diff --git a/src/views/overview/overviewBdOffline.vue b/src/views/overview/overviewBdOffline.vue
index f8adb36..6b1be55 100644
--- a/src/views/overview/overviewBdOffline.vue
+++ b/src/views/overview/overviewBdOffline.vue
@@ -78,7 +78,7 @@
+ :content="''+(index+1)"/>
-
-
-
-
-
-
-
-
-
@@ -155,7 +146,7 @@
width="250"
trigger="click">
-
+
筛选
清除
+
+
显示全部闸井
@@ -209,7 +202,7 @@
listQuery: {
wellType: '', // 井类型
deptid: [], // 组织机构
- isAlarm: '1' // 是否报警
+ isAlarm: '' // 是否报警
}, // 筛选条件
columns: [
{
@@ -329,11 +322,16 @@
// },
alarmShowList: function() {
const hideWellCodes = this.hideWellCodes
- return this.alarmList.filter(function(item) {
+ const showAlarmList = this.alarmList.filter(function(item) {
if (hideWellCodes.indexOf(item.wellCode) === -1) {
return item
}
})
+ if (showAlarmList.length === 0) {
+ this.alarmShow = false
+ this.currentWindow.visible = false
+ }
+ return showAlarmList
},
alarmFixedWindows: function() {
return this.alarmWells.filter(function(item) {
@@ -354,15 +352,10 @@
showAll(val) {
if (val) { // 显示全部
this.listQuery.isAlarm = '0'
- if (this.firstAmount === false) { // 如果是第一次，从后台加载全部数据
- this.getWellList()
- this.firstAmount = true
- } else {
- this.filter()
- }
+ this.filterAlarm(false)
} else { // 仅显示报警
this.listQuery.isAlarm = '1'
- this.filter()
+ this.filterAlarm(true)
}
},
// 监控关键字，如果置空认为清空查询
@@ -374,17 +367,16 @@
}
},
created() {
- this.fetchWellType()
- this.getWellList()
- this.refreshAlarm()
- this.countDown()
- this.fetchPcode()
- this.webSocket()
- // this.isTimeOut()
+ this.fetchWellType() // 获取井类型下拉列表
+ this.getWellList() // 获取报警的井列表
+ this.getNormalWellList() // 获取正常的井列表
+ this.refreshAlarm() // 刷新报警
+ this.countDown() // 开启倒计时
+ this.fetchPcode() // 获取部门下拉列表
+ this.webSocket() // 开启webSocket监听
+ this.isTimeOut()
// this.refreshCenter()
},
- mounted() {
- },
methods: {
// 30s倒计时
countDown() {
@@ -396,7 +388,7 @@
}
}, 1000)
},
- // 更换地图中心计时器
+ // 更换地图中心计时器，暂时无用
countDownCenter() {
console.log('countDownCenter')
this.clock2 = window.setInterval(() => {
@@ -438,7 +430,7 @@
} else {
// 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
// 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
- const socketUrl = 'ws://10.9.39.8:8080/army/webSocket/' + this.$store.getters.username
+ const socketUrl = 'ws://192.168.0.203:9100/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)
@@ -504,24 +496,27 @@
search() {
// 关闭显示的弹框
this.currentWindow.visible = false
+ // 查询条件判空
const keywords = this.keywords // 输入查询条件
if (keywords === '') {
this.$message.warning('查询条件不能为空')
return
}
- // 查询全部井，是否匹配
- this.searchWells = [] // 符合查询结果
+ // 清空筛选条件
+ this.listQuery.deptid = []
+ this.listQuery.wellType = ''
+ // 查询全部井，是否匹配，匹配则显示marker
+ this.searchWells = [] // 符合查询结果放入searchWells,查询前先置空
+ // this.showMarkers = [] // 需要显示的结果放入showMarkers
for (const marker of this.markers) {
let show = true
if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
show = false
}
- if (marker.visible === false) {
- show = false
- }
if (show) {
marker.icon = 'static/BMap/images/well-common.svg'
this.searchWells.push(marker)
+ // this.showMarkers.push(marker)
}
}
// 如果没有找到符合要求的井
@@ -536,9 +531,11 @@
},
// 数据筛选
filter() {
+ // 清空搜索条件
+ this.keywords = ''
+ this.searchWells = []
// 根据筛选条件部门，井类型，报警状态进行筛选
const deptid = []
- debugger
for (const deptList of this.listQuery.deptid) {
let lastIndex = deptList.length - 1
if (lastIndex >= 3) {
@@ -547,15 +544,14 @@
deptid.push(deptList[lastIndex])
// deptid.concat(deptList)
}
- debugger
console.log(deptid)
const wellType = this.listQuery.wellType
- const isAlarm = this.listQuery.isAlarm
+ // const isAlarm = this.listQuery.isAlarm
const hideWellIds = []
const hideWellCodes = []
// 如果查询条件为空，直接全部返回
- if (deptid && deptid.length === 0 && wellType && wellType === '' && isAlarm !== '1') {
- this.showMarkers = this.marker
+ if (deptid && deptid.length === 0 && wellType && wellType === '') {
+ this.showMarkers = this.markers
} else {
this.showMarkers = []
for (const marker of this.markers) {
@@ -569,9 +565,9 @@
show = false
}
// 如果只显示报警,井的状态不是报警
- if (isAlarm === '1' && marker.wellStatus !== 'alarm') {
- show = false
- }
+ // if (isAlarm === '1' && marker.wellStatus !== 'alarm') {
+ // show = false
+ // }
// 如果符合显示的条件
if (show) {
this.showMarkers.push(marker)
@@ -596,6 +592,37 @@
this.$message.success('共找到符合筛选条件的闸井 ' + this.showMarkers.length + ' 个')
}
},
+ // 报警筛选
+ filterAlarm(isAlarm) {
+ this.listQuery.wellType = ''
+ this.listQuery.deptid = []
+ const hideWellIds = []
+ const hideWellCodes = []
+ if (isAlarm) {
+ this.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) {
+ if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+ alarmWell.visible = false
+ } else {
+ alarmWell.visible = true
+ }
+ }
+ this.hideWellCodes = hideWellCodes
+ } else {
+ for (const alarmWell of this.alarmWells) {
+ alarmWell.visible = true
+ }
+ this.hideWellCodes = hideWellCodes
+ this.showMarkers = this.markers
+ }
+ },
// 获取报警的闸井列表
getWellList() {
this.loading = true
@@ -603,10 +630,10 @@
keywords: '', // 关键字
wellType: '', // 井类型
deptid: '', // 组织机构
- isAlarm: this.listQuery.isAlarm
+ isAlarm: '1' // 报警状态
}
getWellList(listQuery).then(response => {
- this.loading = false
+ // this.loading = false
if (response.code === 200) {
const wells = response.data
if (wells.length > 0) {
@@ -615,7 +642,7 @@
const centerxs = []
const centerys = []
for (const well of wells) {
- this.markers.push({
+ const marker = {
wellId: well.id,
wellCode: well.wellCode,
position: { lng: parseFloat(well.lngBaidu), lat: parseFloat(well.latBaidu) },
@@ -627,11 +654,11 @@
deptName: well.deptName,
deptid: well.deptid,
bfzt: well.bfzt,
- // icon: this.icons[well.wellType],
- // icon: this.commonIcon,
visible: true,
wellStatus: 'alarm'
- })
+ }
+ this.markers.push(marker)
+ this.showMarkers.push(marker)
centerxs.push(parseFloat(well.lngBaidu))
centerys.push(parseFloat(well.latBaidu))
}
@@ -639,11 +666,27 @@
centerys.sort()
const index = Math.floor(centerxs.length / 2)
this.center = { lng: centerxs[index], lat: centerys[index] }
- this.showMarkers = this.markers
- } else if (listQuery.isAlarm === '0') { // 状态正常的井
+ }
+ }
+ }
+ })
+ },
+ // 获取正常的闸井列表
+ getNormalWellList() {
+ const listQuery = {
+ keywords: '', // 关键字
+ wellType: '', // 井类型
+ deptid: '', // 组织机构
+ isAlarm: '0'
+ }
+ getWellList(listQuery).then(response => {
+ this.loading = false
+ if (response.code === 200) {
+ const wells = response.data
+ if (wells.length > 0) {
+ // 正在报警的井
+ if (listQuery.isAlarm === '0') { // 状态正常的井
this.firstAmount = true
- const centerxs = []
- const centerys = []
for (const well of wells) {
this.markers.push({
wellId: well.id,
@@ -660,14 +703,7 @@
visible: true,
wellStatus: 'normal'
})
- centerxs.push(parseFloat(well.lngBaidu))
- centerys.push(parseFloat(well.latBaidu))
}
- centerxs.sort()
- centerys.sort()
- const index = Math.floor(centerxs.length / 2)
- this.center = { lng: centerxs[index], lat: centerys[index] }
- this.showMarkers = this.markers
}
}
}
@@ -714,6 +750,7 @@
this.alarmWells = []
for (const alarm of response.data) {
const alarmTime = new Date(alarm.alarmTime).getTime()
+ // 判断图标
let icon = this.alarmicon
if ((nowTime - alarmTime) > 60000) { // 时间差小于一分钟用动画，否则用静态图片
icon = this.alarmicon
@@ -730,6 +767,7 @@
visible: true
})
}
+ // 如果要显示infoWindow, 将最新一条报警弹窗展示
if (showWindow) {
this.alarmNew()
}
@@ -737,7 +775,9 @@
})
this.centerIndex = 0
},
- // 刷新地图中心，打开报警窗口
+ // 筛选是否报警井
+
+ // 刷新地图中心，打开最新报警窗口，暂时无用
refreshCenter() {
const centerIndex = this.centerIndex
if (this.alarmWells.length > 0) {
@@ -747,6 +787,7 @@
this.openAlarmWindow(alarm.wellId, alarm.position)
}
},
+ // 显示最新报警的弹窗
alarmNew() {
if (this.alarmWells.length > 0) {
const alarm = this.alarmWells[0]
@@ -818,12 +859,12 @@
const end = start + this.pagesize
this.searchPageWells = this.searchWells.slice(start, end)
},
- // 点击查询结果
+ // 点击查询结果项，飞到中心且放大到18级
clickSearchItem(well) {
this.center = well.position
this.zoom = 18
},
- // 3分钟无操作定时器
+ // 3分钟无操作定时器，无用
startTimer() {
console.log('instartTimer')
window.clearInterval(this.clock2) // 清除循环更换地图中心定时器
@@ -831,10 +872,11 @@
window.clearTimeout(that.timeOut)
that.timeOut = window.setTimeout(function() {
console.log('startTimer')
- that.countDownCenter()
+ that.filterAlarm(true)
+ // that.countDownCenter()
}, 1000 * 60 * 1)
},
- // 判断超时
+ // 判断超时，无用
isTimeOut() {
console.log('isTimout')
const that = this
@@ -999,7 +1041,7 @@
width:350px;
top: 60px;
z-index: 100;
- padding:20px 5px 0px 10px;
+ padding:20px 5px -5px 10px;
}
.alarmButton{
position: absolute;
@@ -1085,4 +1127,12 @@
.small-alarm-window {
}
+ .selectDiv{
+ .el-form--label-top .el-form-item__label{
+ padding: 0 0 0px;
+ }
+ .el-form-item{
+ margin-bottom: 15px;
+ }
+ }