<!--suppress ALL -->
<template>
<div>
<div class="overview-map-container">
<!--地图-->
<a-map-container ref="map" :center="center" :zoom="zoom" :style="{height:(bodyHeight-20)+'px'}" vid="overview" class="map-demo" @ready="mapReady">
<a-map-marker v-for="alarmWell of alarmWells" :position="alarmWell.coordinates" :offset="alarmOffset">
<el-image :src="alarmIcon" :style="{'width':alarmIconSize[0]+'px','height':alarmIconSize[1]+'px'}" fit="fill" @click="openAlarmWindow(alarmWell.wellId, alarmWell.coordinates)" />
</a-map-marker>
</a-map-container>
<alarm-list :data="alarmList" @row-click="alarmRowClick" />
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getWellType } from '@/api/well/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
import DeptSelect from '../../components/DeptSelect/index'
import AMapContainer from '@/components/Amap/AMapContainer'
import AlarmInfoWindow from './components/alarmInfoWindow'
import AMapMarker from '@/components/Amap/AMapMarker'
import AlarmList from './components/alarmList'
import Vue from 'vue'
export default {
name: 'Overview',
components: { AlarmList, AMapMarker, AMapContainer, DeptSelect },
data() {
return {
map: null, // 地图对象
center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
zoom: 12, // 地图缩放比例
type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
alarmIcon: require('../../assets/icons/icon-alarm1.png'), // 报警图标
alarmIconSize: [30, 30], // 报警图标大小
alarmOffset: [-15, -30], // 报警图标偏移量
wellIcon: require('../../assets/icons/icon-position.png'), // 井图标
wellIconSize: [30, 30], // 井图标大小
wellOffset: [-10, -10], // 井偏移量
showAlarm: true, // 是否显示报警
showAll: this.baseConfig.showAllWell, // 是否显示全部井
listQuery: {
keywords: '', // 关键字
wellType: '', // 井类型
deptid: '', // 组织机构
isAlarm: '1' // 是否报警
}, // 筛选条件
searchQuery: {
keywords: '' // 关键字： 井编号、名称、位置
}, // 查询条件
count: 30, // 倒计时显示时间
clock: null, // 计时器
showWellType: false, // 是否显示井类型下拉,默认边上
wellTypeList: [], // 井类型列表
commonIcon: 'well-common-green', // 通用图标 绿
commonIconAlarm: 'well-common-red', // 通用图标 红
alarmListOri: [], // 原始报警列表
alarmList: [], // 显示报警列表
alarmWells: [], // 报警井列表
latestAlarmTime: '', // 列表中最新报警事件
alarmFirstAmount: true, // 是否初次加载报警
firstAmount: true, // 是否第一次加载井数据
loading: true, // 加载图标是否显示
markers: [], // 所有井的点原始数据
massMarks: null, // 海量点对象
mapMarkers: [], // 查询结果列表
clusters: [], // 聚合
showClearBtn: false // 是否显示清除查询按钮
}
},
computed: {
...mapGetters([
'needRefresh',
'bodyHeight'
])
},
watch: {
showAll(val) {
if (val) { // 显示全部
// 先清空筛选条件
this.listQuery.deptid = ''
this.listQuery.keywords = ''
this.listQuery.wellType = ''
debugger
if (this.firstAmount) { // 初次加载直接调用mount
if (this.type === 'massMarkers') {
this.mountMassMarker() // 加载海量点
} else if (this.type === 'cluster') {
this.mountClusters() // 加载聚合点
}
} else {
this.filterIcon()
}
} else { // 仅显示报警
this.filterIcon()
}
},
needRefresh(val) {
// 需要刷新
if (val) {
this.refreshAlarm()
}
},
showAlarm(val) {
// 关闭报警显示地时候清除掉报警弹窗
if (!val) {
this.closeAlarmWindow()
}
}
},
created() {
this.fetchWellType()
},
beforeDestroy() {
if (this.clock) {
clearInterval(this.clock)
this.clock = null
}
},
methods: {
// 初始化放这里
mapReady(map) {
this.map = map
// this.getWellList()
this.firstAmount = true
this.refreshAlarm()
if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
setTimeout(() => {
// this.countDown()
}, 1000)
}
},
// 倒计时函数
countDown() {
this.clock = setInterval(() => {
this.count--
if (this.count < 0) { // 当倒计时小于0时清除定时器
this.refreshAlarm()
this.count = this.baseConfig.refreshTime
}
}, 1000)
},
// 获取井类型，显示井类型下拉
fetchWellType() {
getWellType().then(response => {
this.wellTypeList = []
// 如果该用户支持的井类型只有一个，则不显示该筛选框
const supportWellTypes = this.$store.getters.wellTypes
this.wellTypeList = response.data.filter(wellType => {
return supportWellTypes.findIndex(item => item == wellType.value) > -1
})
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
})
},
// 数据查询
search(showMessage = true) {
const keywords = this.listQuery.keywords
const deptid = this.listQuery.deptid
const wellType = this.listQuery.wellType
if (keywords === '' && deptid === '' && wellType === '') {
this.$message.warning('查询条件不能为空')
} else {
this.showClearBtn = true
this.filterIcon(showMessage)
}
},
// 清除查询
clearSearch() {
this.listQuery.wellType = ''
this.listQuery.deptid = ''
this.listQuery.keywords = ''
this.filterIcon()
this.showClearBtn = false
},
// 过滤Marker
filterIcon(showMessage = false) {
// 1.如果有弹窗，将弹窗隐藏
this.currentWindow.visible = false
const hideWellIds = []// 要隐藏的井编号
let center = [] // 待移动到的地图中心
// 2. 整理查询条件
const keywords = this.listQuery.keywords
const wellType = this.listQuery.wellType
const deptid = this.listQuery.deptid
let deptids = []
if (deptid) {
deptids = this.fetchDeptList(deptid) // 获取所有下级
}
// 3.查询全部井，是否匹配，只要有一项不匹配则show为false
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 (deptid && deptid !== '' && deptids.indexOf(marker.deptid) === -1) {
show = false
}
// 井类型不为空，且没有匹配成功
if (wellType && wellType !== '' && marker.wellType !== wellType) {
show = false
}
// 如果show为false，放入需要隐藏的井id列表
if (show === false) {
hideWellIds.push(marker.wellId)
} else {
center = marker.position
}
marker.visible = show
}
// 4.过滤报警marker：alarmWells 如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
if (hideWellIds.length === this.markers.length) {
if (showMessage) {
this.$message.warning('查无结果')
}
for (const alarmWell of this.alarmWells) {
alarmWell.visible = false
}
} else {
// 将报警隐藏
for (const alarmWell of this.alarmWells) {
if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
alarmWell.visible = false
} else {
alarmWell.visible = true
}
}
}
// 5.过滤显示列表：alarmList
this.alarmList = []
if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
for (const alarm of this.alarmListOri) {
const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
if (findFlag === -1) {
this.alarmList.push(alarm)
}
}
} else { // 如果没有直接等于alarmListOri
this.alarmList = this.alarmListOri
}
if (center.length > 0) {
this.center = center
}
if (this.type === 'massMarkers') {
this.resetMassMarker()
} else if (this.type === 'cluster') {
this.clearClusters()
}
},
// 加载海量点
mountMassMarker() {
const { map } = this
this.firstAmount = false
// 创建样式对象
const style = {
url: require('@/assets/icons/icon-position.png'),
anchor: toPixel(8, 15),
size: toSize(15, 15)
}
console.log('海量点初始化')
// 海量点初始化
this.massMarks = new window.AMap.MassMarks(this.markers, {
zIndex: 5, // 海量点图层叠加的顺序
zooms: [3, 20], // 在指定地图缩放级别范围内展示海量点图层
style: style // 设置样式对象
})
console.log(this.massMarkers)
// 将海量点添加至地图实例
this.massMarks.setMap(map)
// 海量点点击事件
const that = this
this.massMarks.on('click', function(e) {
that.openInfoWindow(e.data.id)
})
},
// 过滤海量点
resetMassMarker() {
const { map } = this
if (this.showAll === false) { // 如果showAll为false 则不显示海量点
this.massMarks.clear()
} else {
let markers = this.markers.filter(item => {
return item.visible === true
})
if (markers === null) {
markers = []
this.massMarks.clear()
} else {
this.massMarks.setData(markers)
}
// 将海量点添加至地图实例
this.massMarks.setMap(map)
}
},
// 加载聚合点
mountClusters() {
const self = this
// 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。
var points = this.markers
const markers = []
var icon = new window.AMap.Icon({
size: toSize(20, 20), // 图标尺寸
image: 'static/images/well/pin.svg', // Icon的图像
imageSize: toSize(20, 20) // 根据所设置的大小拉伸或压缩图片
})
for (var i = 0; i < points.length; i += 1) {
markers.push(new window.AMap.Marker({
position: points[i]['lnglat'],
icon: icon, // 添加 Icon 实例
offset: toPixel(-10, 0)
}))
}
// 添加聚合组件
const map = aMapManager.getMap()
const cluster = new window.AMap.MarkerClusterer(map, markers, {
gridSize: 80,
renderCluserMarker: self._renderCluserMarker,
maxZoom: 16 })
},
// 清除聚合点
clearClusters() {
},
// 关闭报警弹窗
closeAlarmWindow() {
},
_renderCluserMarker(context) {
console.log(context)
const count = this.markers.length
const factor = Math.pow(context.count / count, 1 / 18)
const div = document.createElement('div')
const Hue = 180 - factor * 180
const bgColor = 'hsla(' + Hue + ',100%,50%,0.9)'
const fontColor = '#ffffff'
const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
div.style.backgroundColor = bgColor
const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
div.style.width = div.style.height = size + 'px'
div.style.border = 'solid 1px ' + borderColor
div.style.borderRadius = size / 2 + 'px'
div.style.boxShadow = '0 0 1px ' + shadowColor
div.innerHTML = context.count
div.style.lineHeight = size + 'px'
div.style.color = fontColor
div.style.fontSize = '14px'
div.style.textAlign = 'center'
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
context.marker.setContent(div)
},
// 获取全部井列表
getWellList() {
this.loading = true
getWellList().then(response => {
this.loading = false
if (response.code === 200) {
const wells = response.data
if (wells.length > 0) {
this.markers = []
const centerxs = [] // 存储所有坐标，用于计算中点
const centerys = []
for (const well of wells) {
const marker = {
...well,
lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
icon: this.commonIcon,
visible: true,
wellStatus: 'normal'
}
this.markers.push(marker)
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]]
console.log('总数据数：' + this.markers.length)
if (this.type === 'massMarkers' && this.showAll) {
this.mountMassMarker() // 加载海量点
} else if (this.type === 'cluster' && this.showAll) {
this.mountClusters() // 加载聚合点
}
}
}
})
},
// 点击井详情气泡
openInfoWindow(wellId) {
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
}
this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
this.$nextTick(() => {
this.currentWindow.visible = true
this.currentWindow.windowType = 'info'
})
}
})
},
// 刷新报警列表
refreshAlarm() {
console.log('refreshAlarm')
this.count = this.baseConfig.refreshTime
this.loading = true
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
if (response.data.length > 0) {
const latestTime = response.data[0].alarmTime
console.log(latestTime, 'vs', this.latestAlarmTime)
if (this.latestAlarmTime < latestTime) {
// 如果不是初次加载并且声音开关开启状态
if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
console.log('playAudio')
this.playAudio()
}
this.latestAlarmTime = latestTime
}
}
this.alarmFirstAmount = false // 初次加载完毕
// 获取当前报警列表
this.alarmListOri = response.data // 列表原始
this.alarmList = response.data // 要显示的报警列表
this.alarmWells = [] // 报警的井列表
for (const alarm of response.data) {
if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
this.alarmWells.push({
wellCode: alarm.wellCode,
wellId: alarm.wellId,
wellType: alarm.wellType,
lngGaode: alarm.lngGaode,
latGaode: alarm.latGaode,
coordinates: [alarm.lngGaode, alarm.latGaode],
position: alarm.position,
visible: true
})
}
}
console.log('alarmWells Length', this.alarmWells.length)
// this.drawMarkers(this.alarmWells, 'alarm')
}
})
},
// 绘制点
drawMarkers(list, type) {
for (const item of list) {
if (type == 'alarm') {
// 报警图标
const marker = new window.AMap.Marker({
position: toLngLat([item.lngGaode, item.latGaode]),
icon: this.alarmIcon,
offset: this.alarmOffset
})
marker.on('click', () => {
this.openAlarmWindow(item.wellId, [item.lngGaode, item.latGaode])
})
this.map.add(marker)
}
}
},
/**
* 打开报警弹窗
* @param wellId 井id
* @param coordinates 弹窗位置： [经度，纬度]
*/
openAlarmWindow(wellId, coordinates, needCenter = false) {
console.log('openAlarmWindow:' + wellId)
if (this.needCenter) { // 如果需要居中
this.center = coordinates
}
// 获取报警详情
getWellAlarms(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
const alarmInfo = {
wellCode: response.data.wellCode,
position: response.data.position,
deptName: response.data.deptName,
wellTypeName: response.data.wellTypeName,
alarms: response.data.alarmList,
deep: response.data.deep
}
const AlarmWindow = Vue.extend({
render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
})
const alarmWindow = new AlarmWindow().$mount()
const infoWindow = new window.AMap.InfoWindow({
content: alarmWindow.$el, // 显示内容
offset: [0, this.alarmOffset[1]], // 偏移
autoMove: true // 是否自动调整窗体到视野内
})
infoWindow.open(this.map, new toLngLat(coordinates))
}
})
},
// 点击报警列表
alarmRowClick(row) {
console.log('alarmRowClick')
const wellId = row.wellId
for (const alarmWell of this.alarmWells) {
if (alarmWell.wellId === wellId) {
// this.center = alarmWell.coordinates
if (this.zoom < 16) {
this.zoom = 16
}
this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
}
}
},
// 获取当前deptid的所有下级id,仅最多支持3级
fetchDeptList(deptid) {
console.log('fetchDeptList')
const deptids = [deptid] // 储存了该pid和其子集
const deptlist = this.$refs.deptSelect.fetchDeptTree()
for (const dept of deptlist) {
if (dept.pid === deptid) {
deptids.push(dept.id)
}
}
const result = []
// 查找所有列表中有没有deptids里面的本人或子集
if (deptlist.length > 0) {
for (const dept of deptlist) {
if (deptids.indexOf(dept.id) !== -1) {
result.push(dept.id)
} else if (deptids.indexOf(dept.pid) !== -1) {
result.push(dept.id)
}
}
}
console.log(result)
return result
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
// 查询框
.map-search-div{
position: absolute;
z-index: 100;
padding: 5px 20px;
background-color: rgba(244, 244, 244, 0.9);
/*left: 90px;*/
.el-form-item{
margin-bottom: 0px;
}
}
// 刷新框
.function-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 1100;
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;
}
}
// 刷新框
.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%;
.map-demo{
width: 100%;
.svg-icon{
width: 20px;
height: 20px;
}
.alarm-icon{
width: 29px;
height: 30px;
}
.nomal-info-window{
background-color: pink;
}
}
}
</style>
