+
-
+
-
+
闸井类型：{{ wellInfo.wellTypeName }}
+
井深：{{ wellInfo.deep }}(m)
权属单位：{{ wellInfo.deptName }}
详细地址：{{ wellInfo.position }}
@@ -110,6 +114,7 @@
设备编号：{{ alarm.devcode }}
+
井深：{{ alarmInfo.deep }}(m)
权属单位：{{ alarmInfo.deptName }}
详细地址：{{ alarmInfo.position }}
@@ -132,9 +137,10 @@
data() {
return {
listQuery: {
- keywords: '',
- wellType: '',
- deptid: ''
+ keywords: '', // 关键字
+ wellType: '', // 井类型
+ deptid: '', // 组织机构
+ isAlarm: '1' // 是否报警
}, // 筛选条件
columns: [
{
@@ -182,8 +188,8 @@
'4': 'well-heat',
'5': 'well-power'
}, // 井类型图标字典
- center: [116.4, 39.9], // 地图中心
- zoom: 14, // 地图缩放比例
+ center: [117.190186, 39.125595], // 地图中心
+ zoom: 12, // 地图缩放比例
markers: [], // 井列表标注marker
alarmList: [], // 报警列表
alarmWells: [], // 报警闸井列表
@@ -194,22 +200,60 @@
position: '',
wellTypeName: '',
deptName: '',
- bfztName: ''
+ bfztName: '',
+ deep: ''
}, // 显示井详细信息气泡内容
alarmInfo: {
wellCode: '',
deptName: '',
position: '',
+ deep: '',
alarms: []
}, // 显示报警详情气泡内容
currentWindow: {
visible: false, // 窗体显示与否
position: [116.4, 39.9],
- windowType: 'info' // 窗体类型：详情或报警
- },
+ windowType: 'info' // 窗体类型：详情info或报警alarm
+ }, // 当前窗体属性
infoWindowClass: 'nomal-info-window',
- deptShowTop: false,
- clock: null
+ deptShowTop: false, // 是否显示顶级
+ clock: null, // 计时器
+ hasAlarm: false, // 是否有报警,
+ showAll: false, // 是否显示全部闸井（包含报警和不报警，为false时只显示报警）
+ firstAmount: false, // 是否第一次加载井数据
+ loading: true,
+ plugins: [{
+ pName: 'Geolocation',
+ events: {
+ init(o) {
+ // o 是高德地图定位插件实例
+ o.getCurrentPosition((status, result) => {
+ debugger
+ if (result && result.position) {
+ console.log('geolocation')
+ console.log(result)
+ self.center = [result.position.lng, result.position.lat]
+ self.$nextTick()
+ }
+ })
+ }
+ }
+ }]
+ }
+ },
+ watch: {
+ showAll(val) {
+ if (val) { // 显示全部
+ this.listQuery.isAlarm = '0'
+ if (this.firstAmount === false) { // 如果是第一次，从后台加载全部数据
+ this.getWellList()
+ } else {
+ this.search()
+ }
+ } else { // 仅显示报警
+ this.listQuery.isAlarm = '1'
+ this.search()
+ }
}
},
created() {
@@ -251,23 +295,32 @@
const keywords = this.listQuery.keywords
const deptid = this.listQuery.deptid
const wellType = this.listQuery.wellType
+ const isAlarm = this.listQuery.isAlarm
+ let center = []
// 查询全部井，是否匹配
+ debugger
for (const marker of this.markers) {
let show = true
// 关键字不为空，且没有匹配成功，不显示
- if (keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
+ if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.positionInfo.indexOf(keywords) !== -1)) {
show = false
}
// 部门不为空， 且没有匹配成功
- if (deptid !== '' && marker.deptid !== deptid) {
+ if (deptid && deptid !== '' && marker.deptid !== deptid) {
show = false
}
// 井类型不为空，且没有匹配成功
- if (wellType !== '' && marker.wellType !== wellType) {
+ if (wellType && wellType !== '' && marker.wellType !== wellType) {
+ show = false
+ }
+ // 如果只显示报警,井的状态不是报警
+ if (isAlarm === '1' && marker.wellStatus !== 'alarm') {
show = false
}
if (show === false) {
hideWellIds.push(marker.wellId)
+ } else {
+ center = marker.position
}
marker.visible = show
}
@@ -288,24 +341,73 @@
}
}
}
+ if (center.length > 0) {
+ this.center = center
+ }
},
// 获取闸井列表
getWellList() {
- getWellList(this.listQuery).then(response => {
+ this.loading = true
+ const listQuery = {
+ keywords: '', // 关键字
+ wellType: '', // 井类型
+ deptid: '', // 组织机构
+ isAlarm: this.listQuery.isAlarm
+ }
+ getWellList(listQuery).then(response => {
+ this.loading = false
if (response.code === 200) {
const wells = response.data
- for (const well of wells) {
- this.markers.push({
- wellId: well.id,
- wellCode: well.wellCode,
- position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
- positionInfo: well.position,
- wellType: well.wellType,
- deptid: well.deptid,
- bfzt: well.bfzt,
- icon: this.icons[well.wellType],
- visible: true
- })
+ if (wells.length > 0) {
+ // 正在报警的井
+ if (listQuery.isAlarm === '1') {
+ const centerxs = []
+ const centerys = []
+ for (const well of wells) {
+ this.markers.push({
+ wellId: well.id,
+ wellCode: well.wellCode,
+ position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
+ positionInfo: well.position,
+ wellType: well.wellType,
+ deptid: well.deptid,
+ bfzt: well.bfzt,
+ icon: this.icons[well.wellType],
+ visible: true,
+ wellStatus: 'alarm'
+ })
+ centerxs.push(parseFloat(well.lngGaode))
+ centerys.push(parseFloat(well.latGaode))
+ }
+ centerxs.sort()
+ centerys.sort()
+ const index = Math.floor(centerxs.length / 2)
+ this.center = [centerxs[index], centerys[index]]
+ } else if (listQuery.isAlarm === '0') { // 状态正常的井
+ this.firstAmount = false
+ const centerxs = []
+ const centerys = []
+ for (const well of wells) {
+ this.markers.push({
+ wellId: well.id,
+ wellCode: well.wellCode,
+ position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
+ positionInfo: well.position,
+ wellType: well.wellType,
+ deptid: well.deptid,
+ bfzt: well.bfzt,
+ icon: this.icons[well.wellType],
+ visible: true,
+ wellStatus: 'normal'
+ })
+ centerxs.push(parseFloat(well.lngGaode))
+ centerys.push(parseFloat(well.latGaode))
+ }
+ centerxs.sort()
+ centerys.sort()
+ const index = Math.floor(centerxs.length / 2)
+ this.center = [centerxs[index], centerys[index]]
+ }
}
}
})
@@ -321,7 +423,8 @@
position: wellInfo.position,
wellTypeName: wellInfo.wellTypeName,
deptName: wellInfo.deptName,
- bfztName: wellInfo.bfztName
+ bfztName: wellInfo.bfztName,
+ deep: wellInfo.deep
}
this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
this.$nextTick(() => {
@@ -337,20 +440,26 @@
this.count = 60
getAlarmsNow().then(response => {
if (response.code === 200) {
+ // 获取当前报警列表
this.alarmList = response.data
+ if (this.alarmList.length > 0) {
+ this.hasAlarm = true
+ }
+ this.alarmWells = []
for (const alarm of response.data) {
- const item = this.alarmWells.findIndex(item => {
- return item.wellCode === alarm.wellCode
+ // 如果报警的井中找到
+ // const item = this.alarmWells.findIndex(item => {
+ // return item.wellCode === alarm.wellCode
+ // })
+ // if (item === -1) {
+ this.alarmWells.push({
+ wellCode: alarm.wellCode,
+ wellId: alarm.wellId,
+ position: [alarm.lngGaode, alarm.latGaode],
+ positionInfo: alarm.position,
+ visible: true
})
- if (item === -1) {
- this.alarmWells.push({
- wellCode: alarm.wellCode,
- wellId: alarm.wellId,
- position: [alarm.lngGaode, alarm.latGaode],
- positionInfo: alarm.position,
- visible: true
- })
- }
+ // }
}
}
})
@@ -371,7 +480,8 @@
wellCode: wellInfo.wellCode,
position: wellInfo.position,
deptName: wellInfo.deptName,
- alarms: wellInfo.alarmList
+ alarms: wellInfo.alarmList,
+ deep: wellInfo.deep
}
this.currentWindow.position = position
this.$nextTick(() => {
@@ -388,6 +498,9 @@
for (const alarmWell of this.alarmWells) {
if (alarmWell.wellId === wellId) {
this.center = alarmWell.position
+ if (this.zoom < 16) {
+ this.zoom = 16
+ }
this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
}
}