diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/public/config/project.config.json b/public/config/project.config.json index d708ae9..87492f9 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -5,6 +5,9 @@ "baseUrl": "http://111.198.10.15:11304/", "mainPage": "http://111.198.10.15:11404/dcms/#", "singleSys": true, + "refreshType":"websocket", + "showPointType":"massMarkers", + "showAllWells": false, "provinceCode":"360000", "cityCode":"361000", "areaCode":"361024" diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/public/config/project.config.json b/public/config/project.config.json index d708ae9..87492f9 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -5,6 +5,9 @@ "baseUrl": "http://111.198.10.15:11304/", "mainPage": "http://111.198.10.15:11404/dcms/#", "singleSys": true, + "refreshType":"websocket", + "showPointType":"massMarkers", + "showAllWells": false, "provinceCode":"360000", "cityCode":"361000", "areaCode":"361024" diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue index 1eb1f61..d69f178 100644 --- a/src/views/overview/components/alarmInfoWindow.vue +++ b/src/views/overview/components/alarmInfoWindow.vue @@ -35,5 +35,26 @@ diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/public/config/project.config.json b/public/config/project.config.json index d708ae9..87492f9 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -5,6 +5,9 @@ "baseUrl": "http://111.198.10.15:11304/", "mainPage": "http://111.198.10.15:11404/dcms/#", "singleSys": true, + "refreshType":"websocket", + "showPointType":"massMarkers", + "showAllWells": false, "provinceCode":"360000", "cityCode":"361000", "areaCode":"361024" diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue index 1eb1f61..d69f178 100644 --- a/src/views/overview/components/alarmInfoWindow.vue +++ b/src/views/overview/components/alarmInfoWindow.vue @@ -35,5 +35,26 @@ diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue new file mode 100644 index 0000000..e1445a7 --- /dev/null +++ b/src/views/overview/components/alarmList.vue @@ -0,0 +1,156 @@ + + + + + + diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/public/config/project.config.json b/public/config/project.config.json index d708ae9..87492f9 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -5,6 +5,9 @@ "baseUrl": "http://111.198.10.15:11304/", "mainPage": "http://111.198.10.15:11404/dcms/#", "singleSys": true, + "refreshType":"websocket", + "showPointType":"massMarkers", + "showAllWells": false, "provinceCode":"360000", "cityCode":"361000", "areaCode":"361024" diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue index 1eb1f61..d69f178 100644 --- a/src/views/overview/components/alarmInfoWindow.vue +++ b/src/views/overview/components/alarmInfoWindow.vue @@ -35,5 +35,26 @@ diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue new file mode 100644 index 0000000..e1445a7 --- /dev/null +++ b/src/views/overview/components/alarmList.vue @@ -0,0 +1,156 @@ + + + + + + diff --git a/src/views/overview/components/wellInfoWindow.vue b/src/views/overview/components/wellInfoWindow.vue new file mode 100644 index 0000000..f6826a0 --- /dev/null +++ b/src/views/overview/components/wellInfoWindow.vue @@ -0,0 +1,48 @@ + + + + + + diff --git a/mock/biz/overview.js b/mock/biz/overview.js index 6a608e2..5fc8151 100644 --- a/mock/biz/overview.js +++ b/mock/biz/overview.js @@ -119,6 +119,7 @@ 'deptId': '24', 'deptName': '第一分公司', 'position': '长安街55号', + 'wellTypeName':'雨水井', 'alarmList': [ { 'devcode': '412018202100', diff --git a/public/config/project.config.json b/public/config/project.config.json index d708ae9..87492f9 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -5,6 +5,9 @@ "baseUrl": "http://111.198.10.15:11304/", "mainPage": "http://111.198.10.15:11404/dcms/#", "singleSys": true, + "refreshType":"websocket", + "showPointType":"massMarkers", + "showAllWells": false, "provinceCode":"360000", "cityCode":"361000", "areaCode":"361024" diff --git a/src/views/overview/components/alarmInfoWindow.vue b/src/views/overview/components/alarmInfoWindow.vue index 1eb1f61..d69f178 100644 --- a/src/views/overview/components/alarmInfoWindow.vue +++ b/src/views/overview/components/alarmInfoWindow.vue @@ -35,5 +35,26 @@ diff --git a/src/views/overview/components/alarmList.vue b/src/views/overview/components/alarmList.vue new file mode 100644 index 0000000..e1445a7 --- /dev/null +++ b/src/views/overview/components/alarmList.vue @@ -0,0 +1,156 @@ + + + + + + diff --git a/src/views/overview/components/wellInfoWindow.vue b/src/views/overview/components/wellInfoWindow.vue new file mode 100644 index 0000000..f6826a0 --- /dev/null +++ b/src/views/overview/components/wellInfoWindow.vue @@ -0,0 +1,48 @@ + + + + + + diff --git a/src/views/overview/overviewAmap.vue b/src/views/overview/overviewAmap.vue index d2bab9f..74ef8b5 100644 --- a/src/views/overview/overviewAmap.vue +++ b/src/views/overview/overviewAmap.vue @@ -14,97 +14,50 @@ import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview' import DeptSelect from '../../components/DeptSelect/index' import AMapContainer from '@/components/Amap/AMapContainer' +import AlarmInfoWindow from './components/alarmInfoWindow' +import {toPixel,toLngLat,toSize} from "@/components/Amap/utils/convert-helper"; +// import Vue from 'vue/dist/vue.esm.js' import Vue from 'vue' export default { name: 'Overview', components: { AMapContainer, DeptSelect }, data() { return { - map: null, - type: 'massMarkers', // 加载数据方式：massMarkers或cluster - refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock或websocket + 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推送 showAlarm: true, // 是否显示报警 - showAll: false, // 是否显示全部井 + showAll: this.baseConfig.showAllWell, // 是否显示全部井 listQuery: { keywords: '', // 关键字 wellType: '', // 井类型 deptid: '', // 组织机构 isAlarm: '1' // 是否报警 }, // 筛选条件 - columns: [ - { - text: '井编号', - value: 'wellCode', - width: 100, - align: 'center' - }, - { - text: '设备编号', - value: 'devcode', - width: 120, - align: 'center' - }, - { - text: '告警原因', - value: 'alarmContent', - align: 'center', - width: 120 - }, - { - text: '时间', - value: 'alarmTime', - width: 180, - align: 'center' - } - ], // 告警列表显示列 - tableShow: true, // 是否显示告警列表 - tableIcon: 'el-icon-arrow-up', - count: 30, - showWellType: this.showWellType(), // 是否显示井类型下拉 + searchQuery:{ + keywords:'' // 关键字： 井编号、名称、位置 + }, // 查询条件 + count: 30, // 倒计时显示时间 + clock: null, // 计时器 + showWellType: false, // 是否显示井类型下拉,默认边上 wellTypeList: [], // 井类型列表 - showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面 commonIcon: 'well-common-green', // 通用图标 绿 commonIconAlarm: 'well-common-red', // 通用图标 红 - // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心 - center: [116.4, 39.9], // 地图中心 - zoom: 12, // 地图缩放比例 - markers: [], // 所有井的点原始数据 alarmListOri: [], // 原始报警列表 - alarmList: [], // 报警列表 + alarmList: [], // 显示报警列表 alarmWells: [], // 报警井列表 - offset: [-10, -10], // 偏移量 - alarmOffset: [-15, -30], // 偏移量 - wellInfo: { - wellCode: '', - position: '', - wellTypeName: '', - deptName: '', - bfztName: '', - deep: '' - }, // 显示井详细信息气泡内容 - alarmInfo: { - wellCode: '', - deptName: '', - position: '', - deep: '', - alarms: [] - }, // 显示报警详情气泡内容 - currentWindow: { - visible: false, // 窗体显示与否 - position: [this.$store.getters.lng, this.$store.getters.lat], - windowType: 'info' // 窗体类型：详情info或报警alarm - }, // 当前窗体属性 - infoWindowClass: 'nomal-info-window', - deptShowTop: false, // 是否显示顶级 - clock: null, // 计时器 - hasAlarm: false, // 是否有报警, + latestAlarmTime: '', // 列表中最新报警事件 + alarmFirstAmount: true, // 是否初次加载报警 + offset: [-10, -10], // 海量点偏移量 + alarmOffset: [-15, -30], // 报警图标偏移量 firstAmount: true, // 是否第一次加载井数据 loading: true, // 加载图标是否显示 - massMarks: null, // 海量点 - mapMarkers: [], - clusters: [], - latestAlarmTime: '', - alarmFirstAmount: true, // 是否初次加载 + markers: [], // 所有井的点原始数据 + massMarks: null, // 海量点对象 + mapMarkers: [], // 查询结果列表 + clusters: [], // 聚合 showClearBtn: false // 是否显示清除查询按钮 } }, @@ -117,14 +70,13 @@ watch: { showAll(val) { if (val) { // 显示全部 - // 先清空查询条件 + // 先清空筛选条件 this.listQuery.deptid = '' this.listQuery.keywords = '' this.listQuery.wellType = '' debugger if (this.firstAmount) { // 初次加载直接调用mount if (this.type === 'massMarkers') { - debugger this.mountMassMarker() // 加载海量点 } else if (this.type === 'cluster') { this.mountClusters() // 加载聚合点 @@ -139,21 +91,25 @@ needRefresh(val) { // 需要刷新 if (val) { - // if(this.baseConfig.alarmSound){ - // this.playAudio() - // } this.refreshAlarm() } }, showAlarm(val) { - if (!val && this.currentWindow.windowType === 'alarm') { - this.currentWindow.visible = false + // 关闭报警显示地时候清除掉报警弹窗 + if (!val) { + this.closeAlarmWindow() } } }, created() { this.fetchWellType() }, + beforeDestroy(){ + if(this.clock){ + clearInterval(this.clock) + this.clock = null + } + }, methods: { // 初始化放这里 mapReady(map) { @@ -161,15 +117,15 @@ // this.getWellList() this.firstAmount = true this.refreshAlarm() - // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的 - // setTimeout(function() { - // that.countDown() - // }, 1000) - // } + if (this.refreshType === 'clock') { // 如果需要倒计时刷新的 + setTimeout(() => { + this.countDown() + }, 1000) + } }, // 倒计时函数 countDown() { - this.clock = window.setInterval(() => { + this.clock = setInterval(() => { this.count-- if (this.count < 0) { // 当倒计时小于0时清除定时器 this.refreshAlarm() @@ -194,7 +150,6 @@ }) }, // 数据查询 - search(showMessage = true) { const keywords = this.listQuery.keywords const deptid = this.listQuery.deptid @@ -292,17 +247,17 @@ }, // 加载海量点 mountMassMarker() { + const {map} = this this.firstAmount = false - const map = aMapManager.getMap() // 创建样式对象 const style = { - url: './static/images/well/pin.svg', - anchor: new AMap.Pixel(8, 15), - size: new AMap.Size(15, 15) + url: require('@/assets/icons/icon-position.png'), + anchor: toPixel(8, 15), + size: toSize(15, 15) } console.log('海量点初始化') // 海量点初始化 - this.massMarks = new AMap.MassMarks(this.markers, { + this.massMarks = new window.AMap.MassMarks(this.markers, { zIndex: 5, // 海量点图层叠加的顺序 zooms: [3, 20], // 在指定地图缩放级别范围内展示海量点图层 style: style // 设置样式对象 @@ -318,7 +273,7 @@ }, // 过滤海量点 resetMassMarker() { - const map = aMapManager.getMap() + const {map} = this if (this.showAll === false) { // 如果showAll为false 则不显示海量点 this.massMarks.clear() } else { @@ -341,21 +296,21 @@ // 聚合点数据应该是一组包含经纬度信息的数组。lnglat 为经纬度信息字段，weight 字段为可选数据，表示权重值，以权重高的点为中心进行聚合。 var points = this.markers const markers = [] - var icon = new AMap.Icon({ - size: new AMap.Size(20, 20), // 图标尺寸 + var icon = new window.AMap.Icon({ + size: toSize(20, 20), // 图标尺寸 image: 'static/images/well/pin.svg', // Icon的图像 - imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片 + imageSize: toSize(20, 20) // 根据所设置的大小拉伸或压缩图片 }) for (var i = 0; i < points.length; i += 1) { - markers.push(new AMap.Marker({ + markers.push(new window.AMap.Marker({ position: points[i]['lnglat'], icon: icon, // 添加 Icon 实例 - offset: new AMap.Pixel(-10, 0) + offset: toPixel(-10, 0) })) } // 添加聚合组件 const map = aMapManager.getMap() - const cluster = new AMap.MarkerClusterer(map, markers, { + const cluster = new window.AMap.MarkerClusterer(map, markers, { gridSize: 80, renderCluserMarker: self._renderCluserMarker, maxZoom: 16 }) @@ -364,6 +319,10 @@ clearClusters() { }, + // 关闭报警弹窗 + closeAlarmWindow(){ + + }, _renderCluserMarker(context) { console.log(context) const count = this.markers.length @@ -400,21 +359,15 @@ const centerxs = [] // 存储所有坐标，用于计算中点 const centerys = [] for (const well of wells) { - this.markers.push({ - wellId: well.id, - wellCode: well.wellCode, - id: well.id, - name: well.wellCode, + const marker = { + ...well, lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)], position: [parseFloat(well.lngGaode), parseFloat(well.latGaode)], - positionInfo: well.position, - wellType: well.wellType, - deptid: well.deptid, - bfzt: well.bfzt, icon: this.commonIcon, visible: true, wellStatus: 'normal' - }) + } + this.markers.push(marker) centerxs.push(parseFloat(well.lngGaode)) centerys.push(parseFloat(well.latGaode)) } @@ -488,6 +441,7 @@ this.alarmWells.push({ wellCode: alarm.wellCode, wellId: alarm.wellId, + wellType: alarm.wellType, lngGaode: alarm.lngGaode, latGaode: alarm.latGaode, position: alarm.position, @@ -498,30 +452,30 @@ } }) }, + // 绘制点 drawMarkers(list, type) { for (const item of list) { if (type == 'alarm') { - const content = Vue.extend({ - template: `` - }) + // 报警图标 const marker = new window.AMap.Marker({ - position: new window.AMap.LngLat(item.lngGaode, item.latGaode), - content: content, + position: toLngLat([item.lngGaode, item.latGaode]), + icon: require("../../assets/icons/icon-position.png"), offset: this.alarmOffset }) + marker.on('click',()=>{ + this.openAlarmWindow(item.wellId, [item.lngGaode, item.latGaode]) + }) this.map.add(marker) } } }, // 点击报警详情 openAlarmWindow(wellId, position) { - // 旧弹窗不显示 - this.currentWindow.visible = false - // this.filterIcon() + // 获取报警详情 getWellAlarms(wellId).then(response => { if (response.code === 200) { const wellInfo = response.data - this.alarmInfo = { + const alarmInfo = { wellCode: wellInfo.wellCode, position: wellInfo.position, deptName: wellInfo.deptName, @@ -529,17 +483,20 @@ alarms: wellInfo.alarmList, deep: wellInfo.deep } - this.currentWindow.position = position this.center = position - this.$nextTick(() => { - this.currentWindow.visible = true - this.currentWindow.windowType = 'alarm' + 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 + }) + infoWindow.open(this.map, new window.AMap.LngLat(position[0], position[1])); } }) }, // 点击报警列表 - alarmRowClick(row, column, event) { + alarmRowClick(row) { console.log('alarmRowClick') const wellId = row.wellId for (const alarmWell of this.alarmWells) { @@ -612,65 +569,6 @@ cursor: pointer; } } -// 报警列表 -.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; - } - } - .alarm-scroll{ - width: 100%; - - } - .moredatascollor{ - height: 200px; - } - .el-scrollbar__wrap { - overflow-y: auto; - overflow-x: hidden; - padding: 0px; - margin-bottom: 0px !important; -} - -.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; @@ -708,44 +606,9 @@ .nomal-info-window{ background-color: pink; } - .info-window{ - max-width: 260px; - min-width:200px; - /*background-color: lightcyan;*/ - .info-header{ - padding: 10px 10px 5px 10px; - line-height: 30px; - font-weight: bold; - /*background-color: #eaf4ff;*/ - } - .info-body{ - padding: 5px 10px 10px 10px; - line-height: 23px; - font-size: 14px; - } - } - .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; - } +