diff --git a/config/dev.env.js b/config/dev.env.js index a1dfd8a..251ba26 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -10,8 +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://111.198.10.15:21403"' + BASE_API: '"http://111.198.10.15:11707/smartwell"' // 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 a1dfd8a..251ba26 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -10,8 +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://111.198.10.15:21403"' + BASE_API: '"http://111.198.10.15:11707/smartwell"' // 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 47868e7..23ef513 100644 --- a/src/views/overview/overviewBdOffline.vue +++ b/src/views/overview/overviewBdOffline.vue @@ -78,7 +78,29 @@
- + +
+ + +
显示全部闸井 显示未装设备闸井 + 显示已装设备闸井
@@ -200,12 +223,13 @@ import BaiduLabel from '../../components/BMap/baiduLabel' import DrawTool from './components/drawTool' import ClearTool from './components/clearTool' -import { eventBus } from '@/main' + export default { name: 'OverviewBaidu', components: { ClearTool, DrawTool, BaiduLabel, BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, BaiduPointCollection, DeptSelect, SelectTree }, data() { return { + pointColor: '#66CDAA', map: null, // 地图 drawingManager: null, // 绘制管理器 currentPolygon: null, // 当前选取图像 @@ -266,7 +290,7 @@ '5': 'static/BMap/images/well-power.svg' }, // 井类型图标字典 commonIcon: 'static/BMap/images/well-common.svg', - center: { lng: this.$store.getters.lng, lat: this.$store.getters.lat }, // 地图中心 + center: { lng: 116.4, lat: 39.9 }, // 地图中心 zoom: 15, // 地图缩放比例 markers: [], // 井列表标注marker showMarkers: [], // 要显示的标注marker @@ -308,6 +332,7 @@ hasAlarm: false, // 是否有报警, showAll: false, // 是否显示全部闸井（包含报警和不报警，为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 === '') { @@ -372,20 +402,13 @@ } }, created() { - eventBus.$on('refresh', (message) => { - if (message == 'refresh') { - console.log('hear EventBus refreshAlarm') - this.refreshAlarm(true) - } - }) - this.fetchWellType() // 获取井类型下拉列表 this.getWellList() // 获取报警的井列表 this.getNormalWellList() // 获取正常的井列表 this.refreshAlarm() // 刷新报警 this.countDown() // 开启倒计时 this.fetchPcode() // 获取部门下拉列表 - // this.webSocket() // 开启webSocket监听 + this.webSocket() // 开启webSocket监听 this.isTimeOut() // this.refreshCenter() }, @@ -393,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() { - + 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() { @@ -445,15 +489,69 @@ } }) }, - + webSocket() { + const that = this + if (typeof (WebSocket) === 'undefined') { + this.$notify({ + title: '提示', + message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！', + type: 'warning', + duration: 0 + }) + } else { + // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改 + // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送 + // const socketUrl = 'ws://192.168.0.203:9100/army/webSocket/' + this.$store.getters.username + // const socketUrl = 'ws://111.198.10.15:11707/army/webSocket/' + this.$store.getters.username + const socketUrl = 'ws://10.9.39.8:8080/army/webSocket/' + this.$store.getters.username + // const socketUrl = 'ws://127.0.0.1:8090/ws/' + this.$store.getters.username + console.log(socketUrl) + this.socket = new WebSocket(socketUrl) + // 监听socket打开 + this.socket.onopen = function() { + console.log('浏览器WebSocket已打开') + } + // 监听socket消息接收 + this.socket.onmessage = function(msg) { + // 转换为json对象 + const data = JSON.parse(msg.data) + that.refreshAlarm(true) + that.playAudio() + that.$notify({ + title: '新报警来了', + // 这里也可以把返回信息加入到message中显示 + message: data.message, + type: 'warning', + onClick: () => { + that.$router.push({ + path: '/overview' + }) + } + }) + } + // 监听socket错误 + this.socket.onerror = function() { + that.$notify({ + title: '服务器错误', + message: '无法接收实时报警信息,请检查服务器后重新刷新页面', + type: 'error', + duration: 0 + }) + } + // 监听socket关闭 + this.socket.onclose = function() { + console.log('WebSocket已关闭') + } + } + }, // 清除选择 clearSelected() { this.listQuery.deptid = [] this.listQuery.wellType = '' if (this.showAll) { - this.filterAlarm(false) + this.filterAlarm(false, '') } else { - this.filterAlarm(true) + this.filterAlarm(true, '') } }, // 获取闸井类型 @@ -586,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 + } + }) + } } }, // 获取报警的闸井列表 @@ -642,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, @@ -688,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], @@ -865,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) }, @@ -954,12 +1059,12 @@ const points = polygon.getPath() const poly = new BMap.Polygon(points) const typeCount = {} - console.log('beginHere=============') + console.log(this.showMarkers.length) + debugger 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) { - 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) { @@ -968,7 +1073,6 @@ count++ } } - console.log('overHere=============') let typeStr = '其中包含' let typeCountList = [] const typeStrList = [] @@ -1045,141 +1149,141 @@