<template>
<div>
<!--搜索条件-->
<div class="map-search-div">
<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
<el-row>
<el-input v-model.trim="keywords" placeholder="闸井编号/地址" clearable>
<el-button slot="append" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
</el-input>
</el-row>
</el-form>
</div>
<!--搜索结果弹出框-->
<el-popover
v-show="searchWells.length>0"
v-model="showSelectList"
placement="bottom-end"
width="290"
trigger="click">
<el-card slot="reference" shadow="always" class="selectAnswer">共找到 {{ searchWells.length }} 个符合条件的井</el-card>
<div v-show="searchWells.length>0">
<div v-for="(well,index) in searchPageWells" :key="well.wellCode" class="search-card" @click="clickSearchItem(well)">
<div class="card-left">{{ index+1 }}</div>
<div class="card-right"><div class="card-title">{{ well.wellCode }}</div>
<div>
<span class="card-welltype">{{ well.positionInfo }}</span>
</div>
</div>
</div>
</div>
<div class="clear"/>
<el-pagination
:total="searchWells.length"
:current-page="page"
:page-size="pagesize"
:hide-on-single-page="true"
small
layout="prev, pager, next"
@current-change="handleCurrentChange"/>
</el-popover>
<!--倒计时和刷新按钮-->
<!--<div class="refresh-div">-->
<!--<span class="font-red">{{ count }}</span> s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>-->
<!--</div>-->
<div class="draw-tools">
<draw-tool @click="drawBox"/>
<!--重置工具-->
<clear-tool :disabled="clearDisabled" @click="drawDelete"/>
</div>
<!--告警列表弹框-->
<el-popover
v-show="alarmShowList.length>0"
v-model="alarmShow"
:visible-arrow="false"
:title="alarmtitle"
placement="left-start"
popper-class="alarm-list-popper"
trigger="manual">
<el-button slot="reference" type="danger" icon="el-icon-message-solid" class="alarmButton" circle @click="alarmShow = !alarmShow"/>
<div class="map-alarm-content">
<el-scrollbar
:class="{moredatascollor:alarmList.length>6}"
:native="false">
<el-table
:data="alarmShowList"
:header-row-style="{background:'#F3F4F7'}"
@row-click="alarmRowClick">
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row[column.value] }}
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</div>
</el-popover>
<!--加载框和弹窗-->
<div v-loading="loading" class="overview-map-container">
<!--地图-->
<baidu-map ref="map" :center="center" :zoom="zoom" class="map-demo" @ready="mapReady">
<baidu-point-collection v-if="showNoDeviceWell||showDeviceWell" :points="showMarkers" :color="pointColor" shape="BMAP_POINT_SHAPE_CIRCLE" size="BMAP_POINT_SIZE_SMALL" @click="openInfoWindow"/>
<div v-if="!showNoDeviceWell&&!showDeviceWell">
<baidu-point-collection
:points="showMarkers.filter(function(marker) {
if (marker.wellFlag !== '0') {
return marker
}
})"
color="#66CDAA"
shape="BMAP_POINT_SHAPE_CIRCLE"
size="BMAP_POINT_SIZE_SMALL"
@click="openInfoWindow"/>
<baidu-point-collection
:points="showMarkers.filter(function(marker) {
if (marker.wellFlag === '0') {
return marker
}
})"
color="#f1c353"
shape="BMAP_POINT_SHAPE_CIRCLE"
size="BMAP_POINT_SIZE_SMALL"
@click="openInfoWindow"/>
</div>
<!--报警的图标-->
<baidu-map-marker
v-for="alarm in alarmWells"
v-show="alarm.visible"
:key="'alarmmarker'+alarm.wellId"
:position="alarm.position"
:offset="offset"
:z-index="320"
:visible="alarm.visible"
:icon="alarm.icon"
@click="openAlarmWindow(alarm.wellId,alarm.position)"
/>
<!--符合筛选条件闸井marker-->
<baidu-map-marker
v-for="(marker, index) in searchPageWells"
v-show="marker.visible"
:key="'well'+marker.wellId"
:position="marker.position"
:offset="selectOffset"
:top="true"
:visible="marker.visible"
@click="openInfoWindow(marker)"
>
<baidu-label
:label-style="{color:'white',background:'rgba(0,0,0,0.0)', border:'none', fontSize : '12px'}"
:offset="{width: 5, height: 4}"
:content="''+(index+1)"/>
</baidu-map-marker>
<!--marker的弹出框窗口-->
<baidu-map-info-window
:position="currentWindow.position"
:show="currentWindow.visible"
:title="wellInfo.wellCode"
:class="infoWindowClass"
>
<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
<!--<div class="info-header">{{ wellInfo.wellCode }}</div>-->
<div class="info-body">
<div>闸井类型：{{ wellInfo.wellTypeName }}</div>
<div>所属派出所：{{ wellInfo.deptName }}</div>
<div>产权单位：{{ wellInfo.owner }}</div>
<div>详细地址：{{ wellInfo.position }}</div>
</div>
</div>
<div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
<div class="alarm-header">
<svg-icon icon-class="alarm-red" />
{{ alarmInfo.wellCode }}
</div>
<div class="alarm-body">
<div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
<div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
<div>设备编号：<span>{{ alarm.devcode }}</span></div>
<div>告警时间：<span>{{ alarm.alarmTime }}</span></div>
</div>
<el-divider/>
<div>所属分局：{{ alarmInfo.pidName }}</div>
<div>所属派出所：{{ alarmInfo.deptName }}</div>
<div>产权单位：{{ alarmInfo.owner }}</div>
<div>详细地址：{{ alarmInfo.position }}</div>
</div>
</div>
</baidu-map-info-window>
</baidu-map>
</div>
<!--数据筛选弹框-->
<el-popover
placement="bottom-end"
title="数据筛选"
width="250"
trigger="click">
<el-button slot="reference" type="primary" icon="el-icon-menu" class="toolbox" circle/>
<div class="selectDiv">
<el-form ref="selectForm" :model="listQuery" label-position="top" size="small">
<el-form-item label="派出所">
<el-cascader
v-model="listQuery.deptid"
:options="deptTreeList"
:props="deptProps"
:show-all-levels="false"
style="width:100%"
collapse-tags
clearable/>
</el-form-item>
<el-form-item v-if="wellTypeList.length>1" label="闸井类型">
<el-select v-model="listQuery.wellType" placeholder="选择闸井类型" style="width:100%" clearable>
<el-option
v-for="item in wellTypeList"
:key="item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="filter">筛选</el-button>
<el-button class="filter-item" type="default" icon="el-icon-delete" @click="clearSelected">清除</el-button>
<div style="height:15px;"/>
<el-divider style="padding-top:10px"/>
<el-form-item style="margin-top:10px">
<el-checkbox v-model="showAll" @change="showAllWells">显示全部闸井</el-checkbox>
<el-checkbox v-model="showNoDeviceWell" @change="showNoDeviceWells">显示未装设备闸井</el-checkbox>
<el-checkbox v-model="showDeviceWell" @change="showDeviceWells">显示已装设备闸井</el-checkbox>
</el-form-item>
</el-form>
</div>
</el-popover>
</div>
</template>
<script>
import SelectTree from '@/components/SelectTree/singleSelect'
import { getWellType } from '@/api/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview'
import { judgeTree, toTreeList } from '@/utils/structure'
import { getDeptTreeList } from '@/api/dept'
import DeptSelect from '../../components/DeptSelect/index'
import BaiduMap from '../../components/BMap/baiduMap'
import BaiduMapMarker from '../../components/BMap/baiduMapMarker'
import BaiduPointCollection from '../../components/BMap/baiduPointCollection'
import BaiduMapInfoWindow from '../../components/BMap/baiduInfoWindow'
import BaiduLabel from '../../components/BMap/baiduLabel'
import DrawTool from './components/drawTool'
import ClearTool from './components/clearTool'
export default {
name: 'OverviewBaidu',
components: { ClearTool, DrawTool, BaiduLabel, BaiduMapInfoWindow, BaiduMap, BaiduMapMarker, BaiduPointCollection, DeptSelect, SelectTree },
data() {
return {
pointColor: '#66CDAA',
map: null, // 地图
drawingManager: null, // 绘制管理器
currentPolygon: null, // 当前选取图像
clearDisabled: true, // 禁用重置
keywords: '', // 关键字
listQuery: {
wellType: '', // 井类型
deptid: [], // 组织机构
isAlarm: '' // 是否报警
}, // 筛选条件
columns: [
{
text: '闸井编号',
value: 'wellCode',
width: 80,
align: 'center'
},
// {
// text: '设备编号',
// value: 'devcode',
// width: 120,
// align: 'center'
// },
// {
// text: '告警原因',
// value: 'alarmContent',
// align: 'center',
// width: 100
// },
{
text: '时间',
value: 'alarmTime',
width: 170,
align: 'center'
}
], // 显示列
tableShow: true, // 是否显示告警列表
tableIcon: 'el-icon-arrow-up',
count: 30,
count2: 5,
showWellType: this.showWellType(), // 是否显示闸井类型下拉
wellTypeList: [], // 闸井类型列表
wellTypeDict: {},
deptProps: {
multiple: true,
value: 'id',
label: 'name',
children: 'children'
}, // 产权单位树形下拉菜单
deptTreeList: [], // 组织树列表数据
showDeptTree: 0, // 是否显示产权单位下拉,0不显示，1显示树，2显示平面
showDeptSelect: true, // 是否显示产权单位下拉
icons: {
'1': 'static/BMap/images/well-rain.svg',
'2': 'static/BMap/images/well-sewage.svg',
'3': 'static/BMap/images/well-gas.svg',
'4': 'static/BMap/images/well-heat.svg',
'5': 'static/BMap/images/well-power.svg'
}, // 井类型图标字典
commonIcon: 'static/BMap/images/well-common.svg',
center: { lng: 116.4, lat: 39.9 }, // 地图中心
zoom: 15, // 地图缩放比例
markers: [], // 井列表标注marker
showMarkers: [], // 要显示的标注marker
selectedMarkers: [], // 筛选条件marker
alarmList: [], // 报警列表
alarmShow: false,
hideWellCodes: [], // 要隐藏的井编号
alarmWells: [], // 报警闸井列表
offset: { width: 0, height: -10 }, // 偏移量
alarmOffset: { width: -15, height: -30 }, // 偏移量
selectOffset: { width: 0, height: 0 },
// selectSize: { width: 40, height: 40},
wellInfo: {
wellCode: '',
position: '',
wellTypeName: '',
deptName: '',
bfztName: '',
deep: ''
}, // 显示井详细信息气泡内容
alarmInfo: {
wellCode: '',
deptName: '',
position: '',
deep: '',
alarms: []
}, // 显示报警详情气泡内容
currentWindow: {
visible: false, // 窗体显示与否
position: { lng: 116.4, lat: 39.9 },
windowType: 'info' // 窗体类型：详情info或报警alarm
}, // 当前窗体属性
infoWindowClass: 'nomal-info-window',
smallalarmwindow: 'small-alarm-window',
deptShowTop: false, // 是否显示顶级
clock: null, // 30s计时器,刷新图标用
clock2: null, // 5s定时器，刷新地图中心用
timeOut: '', // 3分钟无操作定时器
hasAlarm: false, // 是否有报警,
showAll: false, // 是否显示全部闸井（包含报警和不报警，为false时只显示报警）
showNoDeviceWell: false, // 是否显示未装设备闸井
showDeviceWell: false, // 是否显示已经装设备闸井
firstAmount: false, // 是否第一次加载井数据
loading: true, // 加载按钮
alarmicon: 'static/BMap/images/alarm-well.svg', // 报警按钮
alarmgificon: 'static/BMap/images/timgq.gif', // 报警按钮
searchWells: [], // 查询结果
searchPageWells: [], // 当前页结果
showSelectList: false, // 是否显示查询结果列表
page: 1, // 查询结果页码
pagesize: 5, // 查询结果每页结果数
centerIndex: 0, // 地图中心在alarmWells列表中的位置
audio: ''
}
},
computed: {
// 要显示的markers
// showMarkers: function() {
// if (this.listQuery.isAlarm === '1') {
// return this.markers.filter(function(marker) {
// if (marker.wellStatus === 'alarm') {
// return marker
// }
// })
// } else {
// return this.markers
// }
// },
alarmShowList: function() {
const hideWellCodes = this.hideWellCodes
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) {
var nowTime = new Date().getTime()
var alarmTime = new Date(item.alarmTime).getTime()
// 临时用 >来看效果
if ((nowTime - alarmTime) < 60000) { // 时间差小于一分钟用动画，否则用静态图片
return item
}
})
},
alarmtitle: function() {
return '告警列表(' + this.alarmShowList.length + ')'
}
},
watch: {
showAll(val) {
if (val) {
this.showDeviceWell = false
this.showNoDeviceWell = false
}
},
// 监控关键字，如果置空认为清空查询
keywords(val) {
if (val === '') {
this.searchWells = []
this.searchPageWells = []
}
}
},
created() {
this.fetchWellType() // 获取井类型下拉列表
this.getWellList() // 获取报警的井列表
this.getNormalWellList() // 获取正常的井列表
this.refreshAlarm() // 刷新报警
this.countDown() // 开启倒计时
this.fetchPcode() // 获取部门下拉列表
this.webSocket() // 开启webSocket监听
this.isTimeOut()
// this.refreshCenter()
},
methods: {
// 点击显示全部闸井
showAllWells(val) {
if (val) { // 显示全部
this.pointColor = '#66CDAA'
this.listQuery.isAlarm = '0'
this.zoom = 15
this.filterAlarm(false, '')
} else { // 仅显示报警
this.listQuery.isAlarm = '1'
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() {
this.clock = window.setInterval(() => {
this.count--
if (this.count < 0) { // 当倒计时小于0时清除定时器
this.refreshAlarmIcon()
this.count = 30
}
}, 1000)
},
// 更换地图中心计时器，暂时无用
countDownCenter() {
console.log('countDownCenter')
this.clock2 = window.setInterval(() => {
this.refreshCenter()
}, 5000)
},
// 加载组织列表树形下拉菜单
fetchPcode: function() {
const listQuery = {
deptType: '03'
}
getDeptTreeList(listQuery).then(response => {
const list = response.data.list
if (list.length <= 1) {
this.showDeptSelect = false
} else {
// list.push({ id: '0', name: '顶级', open: true, value: '0' })
if (list) {
// 如果有必要转树
if (judgeTree(list)) {
this.deptTreeList = toTreeList(response.data.list, '0', this.needTop)
} else {
this.deptTreeList = list
}
console.log(this.deptTreeList)
}
}
})
},
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, '')
} else {
this.filterAlarm(true, '')
}
},
// 获取闸井类型
fetchWellType() {
getWellType().then(response => {
this.wellTypeList = []
this.wellTypeDict = {}
const wellTypes = this.$store.getters.wellTypes
for (const wellType of response.data) {
if (wellTypes.indexOf(wellType.value) !== -1) {
this.wellTypeList.push(wellType)
this.wellTypeDict[wellType.value] = wellType.name
}
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
})
},
// 数据查询，返回条符合查询结果的数据
search() {
// 关闭显示的弹框
this.currentWindow.visible = false
// 查询条件判空
const keywords = this.keywords // 输入查询条件
if (keywords === '') {
this.$message.warning('查询条件不能为空')
return
}
// 清空筛选条件
this.listQuery.deptid = []
this.listQuery.wellType = ''
this.showAll = false
// 查询全部井，是否匹配，匹配则显示marker
this.searchWells = [] // 符合查询结果放入searchWells,查询前先置空
this.showMarkers = [] // 清空所有marker
for (const alarmWell of this.alarmWells) {
alarmWell.visible = true
}
// 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 (show) {
marker.icon = 'static/BMap/images/well-common.svg'
this.searchWells.push(marker)
// this.showMarkers.push(marker)
}
}
// 如果没有找到符合要求的井
if (this.searchWells.length === 0) {
this.$message.warning('查无结果')
} else {
this.handleCurrentChange(1)
this.center = this.searchWells[0].position
this.zoom = 17
this.showSelectList = true
}
},
// 数据筛选
filter() {
// 清空搜索条件
this.keywords = ''
this.searchWells = []
// 根据筛选条件部门，井类型，报警状态进行筛选
const deptid = []
for (const deptList of this.listQuery.deptid) {
let lastIndex = deptList.length - 1
if (lastIndex >= 3) {
lastIndex--
}
deptid.push(deptList[lastIndex])
// deptid.concat(deptList)
}
console.log(deptid)
const wellType = this.listQuery.wellType
// const isAlarm = this.listQuery.isAlarm
const hideWellIds = []
const hideWellCodes = []
// 如果查询条件为空，直接全部返回
if (deptid && deptid.length === 0 && wellType === '') {
this.showMarkers = this.markers
this.showAll = true
} else {
this.showMarkers = []
const centerxs = []
const centerys = []
this.showAll = false
for (const marker of this.markers) {
let show = true
// 部门不为空， 且没有匹配成功
if (deptid && deptid.length > 0 && deptid.indexOf(marker.deptid) === -1) {
show = false
}
// 井类型不为空，且没有匹配成功
if (wellType && wellType !== '' && marker.wellType !== wellType) {
show = false
}
// 如果符合显示的条件
if (show) {
this.showMarkers.push(marker)
centerxs.push(parseFloat(marker.lng))
centerys.push(parseFloat(marker.lat))
marker.visible = true
} else {
hideWellIds.push(marker.wellId)
hideWellCodes.push(marker.wellCode)
marker.visible = false
}
}
centerxs.sort()
centerys.sort()
const index = Math.floor(centerxs.length / 2)
this.center = { lng: centerxs[index], lat: centerys[index] }
this.zoom = 15
}
console.log(hideWellCodes.length)
for (const alarmWell of this.alarmWells) {
if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
alarmWell.visible = false
} else {
alarmWell.visible = true
}
}
this.hideWellCodes = hideWellCodes
if (this.showMarkers) {
this.$message.success('共找到符合筛选条件的闸井 ' + this.showMarkers.length + ' 个')
}
},
// 报警筛选
filterAlarm(isAlarm, isDevice) {
console.log(this.markers.length)
// 清除筛选、搜索条件
this.listQuery.wellType = ''
this.listQuery.deptid = []
this.keywords = ''
this.searchWells = []
const hideWellCodes = []
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
}
})
}
}
},
// 获取报警的闸井列表
getWellList() {
this.loading = true
const listQuery = {
keywords: '', // 关键字
wellType: '', // 井类型
deptid: '', // 组织机构
isAlarm: '1' // 报警状态
}
getWellList(listQuery).then(response => {
this.loading = false
if (response.code === 200) {
const wells = response.data
if (wells.length > 0) {
// 正在报警的井
if (listQuery.isAlarm === '1') {
const centerxs = []
const centerys = []
for (const well of wells) {
const marker = {
wellId: well.id,
wellCode: well.wellCode,
position: { lng: parseFloat(well.lngBaidu), lat: parseFloat(well.latBaidu) },
lng: parseFloat(well.lngBaidu),
lat: parseFloat(well.latBaidu),
positionInfo: well.position,
wellType: well.wellType,
wellFlag: well.wellFlag,
wellTypeName: well.wellTypeName,
deptName: well.deptName,
deptid: well.deptid,
bfzt: well.bfzt,
visible: true,
wellStatus: 'normal'
}
this.markers.push(marker)
// this.showMarkers.push(marker)
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] }
}
}
}
})
},
// 获取正常的闸井列表
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
for (const well of wells) {
this.markers.push({
wellId: well.id,
wellCode: well.wellCode,
position: { lng: parseFloat(well.lngBaidu), lat: parseFloat(well.latBaidu) },
lng: parseFloat(well.lngBaidu),
lat: parseFloat(well.latBaidu),
positionInfo: well.position,
wellType: well.wellType,
wellFlag: well.wellFlag,
deptid: well.deptid,
bfzt: well.bfzt,
// icon: this.icons[well.wellType],
icon: this.commonIcon,
visible: true,
wellStatus: 'normal'
})
}
}
}
}
})
},
// 点击闸井详情气泡
openInfoWindow(point) {
const wellId = point.wellId
console.log('click well')
this.currentWindow.visible = false
getWellInfo(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
this.wellInfo = {
wellCode: wellInfo.wellCode,
position: wellInfo.position,
wellTypeName: wellInfo.wellTypeName,
deptName: wellInfo.deptName,
bfztName: wellInfo.bfztName,
deep: wellInfo.deep,
owner: wellInfo.owner,
pidName: wellInfo.pidName
}
this.currentWindow.position = { lng: wellInfo.lngBaidu, lat: wellInfo.latBaidu }
this.$nextTick(() => {
this.currentWindow.visible = true
this.currentWindow.windowType = 'info'
})
}
})
},
// 刷新报警列表
refreshAlarm(showWindow = false) {
console.log('refreshAlarm')
this.count = 30
getAlarmsNow().then(response => {
if (response.code === 200) {
this.alarmList = response.data
if (this.alarmList.length > 0) {
this.hasAlarm = true
}
const nowTime = new Date().getTime()
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
} else {
icon = this.alarmgificon
}
this.alarmWells.push({
wellCode: alarm.wellCode,
wellId: alarm.wellId,
wellType: alarm.wellType,
position: { lng: alarm.lngBaidu, lat: alarm.latBaidu },
positionInfo: alarm.position,
alarmTime: alarm.alarmTime,
icon: icon,
visible: true
})
}
// 如果要显示infoWindow, 将最新一条报警弹窗展示
if (showWindow) {
this.alarmNew()
}
}
})
this.centerIndex = 0
},
// 筛选是否报警井
// 刷新地图中心，打开最新报警窗口，暂时无用
refreshCenter() {
const centerIndex = this.centerIndex
if (this.alarmWells.length > 0) {
const alarm = this.alarmWells[centerIndex]
this.center = alarm.position
this.centerIndex = centerIndex >= (this.alarmWells.length - 1) ? 0 : centerIndex + 1
this.openAlarmWindow(alarm.wellId, alarm.position)
}
},
// 显示最新报警的弹窗
alarmNew() {
if (this.alarmWells.length > 0) {
const alarm = this.alarmWells[0]
this.center = alarm.position
this.openAlarmWindow(alarm.wellId, alarm.position)
}
},
// 刷新报警图片
refreshAlarmIcon() {
const nowTime = new Date().getTime()
for (const alarmWell of this.alarmWells) {
const alarmTime = new Date(alarmWell.alarmTime).getTime()
if ((nowTime - alarmTime) > 60000) { // 时间差小于一分钟用动画，否则用静态图片
alarmWell.icon = this.alarmicon
} else {
alarmWell.icon = this.alarmgificon
}
}
},
// 点击报警详情
openAlarmWindow(wellId, position) {
this.wellInfo.wellCode = ''
// 旧弹窗不显示
this.currentWindow.visible = false
// 清空查询条件
this.keywords = ''
// this.listQuery.wellType = ''
// this.listQuery.deptid = []
getWellAlarms(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
this.alarmInfo = {
wellCode: wellInfo.wellCode,
position: wellInfo.position,
deptName: wellInfo.deptName,
alarms: wellInfo.alarmList,
deep: wellInfo.deep,
owner: wellInfo.owner,
pidName: wellInfo.pidName
}
this.currentWindow.position = position
this.$nextTick(() => {
this.currentWindow.visible = true
this.currentWindow.windowType = 'alarm'
})
}
})
},
// 点击报警列表
alarmRowClick(row, column, event) {
console.log('alarmRowClick')
const wellId = row.wellId
for (const alarmWell of this.alarmWells) {
if (alarmWell.wellId === wellId) {
if (this.zoom < 18) {
this.zoom = 18
}
this.openAlarmWindow(alarmWell.wellId, alarmWell.position)
this.center = alarmWell.position
}
}
},
// 页码变化处理函数
handleCurrentChange(val) {
console.log('handleCurrentChange')
const offset = val
const start = (offset - 1) * this.pagesize
const end = start + this.pagesize
this.searchPageWells = this.searchWells.slice(start, end)
},
// 点击查询结果项，飞到中心且放大到18级
clickSearchItem(well) {
this.center = well.position
this.zoom = 18
},
// 3分钟无操作定时器
startTimer() {
console.log('instartTimer')
window.clearInterval(this.clock2) // 清除循环更换地图中心定时器
const that = this
window.clearTimeout(that.timeOut)
that.timeOut = window.setTimeout(function() {
console.log('startTimer')
that.filterAlarm(true, '')
// that.countDownCenter()
}, 1000 * 60 * 1)
},
// 判断超时
isTimeOut() {
console.log('isTimout')
const that = this
this.startTimer()
// document.body.onmouseup = that.startTimer
// document.body.onmousemove = that.startTimer
document.body.onkeyup = that.startTimer
document.body.onclick = that.startTimer
// document.body.ontouchend = that.startTimer
},
// 地图Ready回调
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。
}
this.$nextTick(() => {
this.drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, // 是否开启绘制模式
enableDrawingTool: false, // 是否显示工具栏
drawingToolOptions: {
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 // 矩形的样式
})
// 多边形监听器
this.drawingManager.addEventListener('polygoncomplete', function(polygon) {
console.log('end polygon')
that.drawingManager.close()
that.currentPolygon = polygon
if (that.showMarkers.length > 0) {
that.judgeWell(polygon)
} else {
that.judgeAlarmWell(polygon)
}
})
// 矩形监听器
this.drawingManager.addEventListener('rectanglecomplete', function(polygon) {
console.log('end rectangle')
that.drawingManager.close()
that.currentPolygon = polygon
if (that.showMarkers.length > 0) {
that.judgeWell(polygon)
} else {
that.judgeAlarmWell(polygon)
}
})
})
// 实例化鼠标绘制工具
},
// 绘制选框
drawBox(type) {
if (this.currentPolygon) {
this.map.removeOverlay(this.currentPolygon)
}
if (type == 'Polygon') {
console.log('start polygon')
this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)
} else if (type === 'Rectangle') {
console.log('start rectangle')
this.drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)
}
this.drawingManager.open()
this.clearDisabled = false
},
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) {
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) {
typeCount[item.wellType] = 1
}
count++
}
}
let typeStr = '其中包含'
let typeCountList = []
const typeStrList = []
// 生成井类型-数量对象数组
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)
// 转为字符串数组
for (const item of typeCountList) {
// typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]})
typeStrList.push(item.type + item.value + '个')
}
// 组装成字符串
typeStr += typeStrList.join(';') + '。'
const finalStr = '该区域内有' + count + '个井。' + (count > 0 ? typeStr : '')
this.$alert(finalStr, '区域统计', {
confirmButtonText: '确定'
})
},
judgeAlarmWell(polygon) {
let count = 0
const points = polygon.getPath()
const poly = new BMap.Polygon(points)
const typeCount = {}
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) {
debugger
if (item.wellType && typeof (typeCount[item.wellType]) !== 'undefined') {
typeCount[item.wellType]++
} else if (item.wellType) {
typeCount[item.wellType] = 1
}
count++
}
}
let typeStr = '其中包含'
let typeCountList = []
const typeStrList = []
// 生成井类型-数量对象数组
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)
// 转为字符串数组
for (const item of typeCountList) {
// typeCountList.push({type:this.wellTypeDict[key],value:typeCount[key]})
typeStrList.push(item.type + item.value + '个')
}
// 组装成字符串
typeStr += typeStrList.join(';') + '。'
const finalStr = '该区域内有' + count + '个井。' + (count > 0 ? typeStr : '')
this.$alert(finalStr, '区域统计', {
confirmButtonText: '确定'
})
},
drawDelete() {
// if(this.drawingManager.getDrawingMode()){
this.drawingManager.close()
if (this.currentPolygon) {
this.map.removeOverlay(this.currentPolygon)
this.clearDisabled = true
}
// }
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
// 查询框
.map-search-div{
position: absolute;
z-index: 100;
left: 10px;
top:10px;
.el-form-item{
margin-bottom: 0px;
}
}
// 报警列表
.map-alarm-div{
position: absolute;
z-index: 100;
background-color: rgba(255, 234, 241,0.8);
top: 60px;
left: 10px;
.map-alarm-div-header{
line-height: 40px;
width: 504px;
padding-left: 10px;
.icon-right{
position: absolute;
right: 15px;
}
.icon-right:hover{
color: #409EFF;
cursor: pointer;
}
}
.el-table th{
/*background-color: rgba(255, 229, 230, 0.8);*/
padding: 7px 0px;
}
.el-table td{
/*background-color: rgba(255, 234, 241, 0.8);*/
padding: 5px 0px;
/*line-height: 1;*/
}
.el-table td:hover{
/*background-color: rgba(255, 234, 241, 0.8);*/
}
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
}
// 刷新框
.refresh-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 100;
padding: 10px;
color: #ce8b74;
font-size: 14px;
background-color: rgba(244, 233, 230, 1.0);
.font-red{
color: red;
font-weight: bold;
}
.el-icon-refresh:hover{
color: red;
font-weight: bold;
cursor: pointer;
}
}
// 地图
.overview-map-container{
width: 100%;
padding: 5px;
.map-demo{
width: 100%;
height: calc(100vh - 78px);
.svg-icon{
width: 20px;
height: 20px;
}
.alarm-icon{
width:30px;
height: 30px;
}
.nomal-info-window{
/*background-color: pink;*/
}
.info-window{
max-width: 250px;
/*background-color: lightcyan;*/
.info-header{
padding: 10px 10px 5px 10px;
line-height: 30px;
font-weight: bold;
/*background-color: #eaf4ff;*/
}
.info-body{
padding: 5px 10px 5px 10px;
line-height: 23px;
font-size: 14px;
}
}
.BMap_bubble_title{
font-weight: bold;
padding: 0px 10px 5px 10px;
}
.alarm-window{
max-width: 250px;
/*background-color: #ffeaf1;*/
.alarm-header {
padding: 10px 10px 5px 10px;
line-height: 30px;
color: red;
font-weight: bold;
/*background-color: #ffecec;*/
}
.alarm-body{
padding: 5px 10px 10px 10px;
line-height: 23px;
font-size: 14px;
.alarm-red{
color: #ff0000;
}
}
}
}
}
.el-divider--horizontal{
margin: 5px 0;
}
.toolbox{
position: absolute;
right: 20px;
top: 70px;
z-index: 100;
}
.toolbox-content{
background-color: #e9eef2;
width:350px;
top: 60px;
z-index: 100;
padding:20px 5px -5px 10px;
}
.alarmButton{
position: absolute;
right: 20px;
top: 20px;
z-index: 100;
}
.alarm-list-popper{
/*max-height: 200px;*/
/*overflow: hidden;*/
/*background-color: rgba(244, 233, 230, 1.0);*/
.map-alarm-content{
.alarm-list-table{
background-color: rgba(244, 233, 230, 1.0);
}
.alarm-list-header{
background-color: red;
}
}
.el-scrollbar {
/*height: 200px;*/
width: 100%;
}
.moredatascollor{
height: 250px;
}
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 0px !important;
}
}
.selectAnswer{
width:290px;
background-color: #ffffff;
border: 1px solid #d3dce6;
padding-left: 10px;
padding-top: 8px;
padding-bottom: 8px;
position: absolute;
border-radius: initial;
left: 10px;
top: 55px;
z-index: 100;
text-align: left;
.el-card__body{
padding: 5px;
font-size: 14px;
color: #409EFF
}
}
.search-card{
padding:5px 10px;
overflow: auto;
.card-left,.card-right{
float:left
}
.card-left{
width:10%;
line-height:25px;
}
.card-right{
width:90%;
}
.card-title{
font-size:16px;
font-weight: bold;
line-height: 25px;
}
.card-welltype{
line-height:25px;
}
}
.clear{
clear:both
}
.search-card:hover{
background-color: #f5f5f5;
cursor: pointer;
}
.small-alarm-window {
}
.selectDiv{
.el-form--label-top .el-form-item__label{
padding: 0 0 0px;
}
.el-form-item{
margin-bottom: 15px;
}
}
.draw-tools{
position: absolute;
top:20px;
right:90px;
z-index: 100;
display: flex;
}
</style>
