Skip to content

Z
zh-baseversion-project
Commit 121c4d37 authored by 军师中郎将's avatar 军师中郎将
Browse files
Options

1 大屏端用户上图优化，使用高德地图的 标注和标注图层-海量点 labelMarker api，相比较 MassMarks 渲染时间更短，大屏端 居民用户 功能完成。

parent 1c05698b
Show whitespace changes
Inline Side-by-side
Showing with 320 additions and 10 deletions
zh-baseversion-admin/src/main/java/com/zehong/web/controller/supervise/TDetectorUserController.java
View file @ 121c4d37
...@@ -95,6 +95,15 @@ public class TDetectorUserController extends BaseController ...@@ -95,6 +95,15 @@ public class TDetectorUserController extends BaseController
return AjaxResult.success(tDetectorUserService.detectorUserList(tDetectorUser)); return AjaxResult.success(tDetectorUserService.detectorUserList(tDetectorUser));
} }
/**
* 获取探测器用户列表 大屏地图 massMarks 标注的方式
* @return ajaxResult
*/
@GetMapping("/massMarksDetectorUserList")
public AjaxResult massMarksDetectorUserList(TDetectorUser tDetectorUser){
return AjaxResult.success(tDetectorUserService.detectorUserList(tDetectorUser));
}
/** /**
* 获取探测器用户列表 * 获取探测器用户列表
* @return * @return
......
zh-baseversion-system/src/main/java/com/zehong/system/domain/vo/TMassMarksDetectorUserVO.java 0 → 100644
View file @ 121c4d37
package com.zehong.system.domain.vo;
import lombok.Data;
import java.math.BigDecimal;
/**
* 大屏端地图 用户信息 使用 MassMarks 标注方式实现
*/
@Data
public class TMassMarksDetectorUserVO {
private Integer style;
private String iconType;
/**
* 经纬度
*/
private BigDecimal[] lnglat;
/**
* 数据
*/
private TDetectorUserVO tDetectorUserVO;
}
zh-baseversion-system/src/main/java/com/zehong/system/mapper/TDetectorUserMapper.java
View file @ 121c4d37
...@@ -32,6 +32,13 @@ public interface TDetectorUserMapper ...@@ -32,6 +32,13 @@ public interface TDetectorUserMapper
*/ */
public List<TDetectorUserVO> countTDetectorUser(TDetectorUser tDetectorUser); public List<TDetectorUserVO> countTDetectorUser(TDetectorUser tDetectorUser);
/**
* 查询燃气用户统计信息大屏界面 使用massMarks标注的方式
* @param tDetectorUser
* @return
*/
public List<TDetectorUserVO> countTDetectorUserForMassMarks(TDetectorUser tDetectorUser);
/** /**
* 查询探测器报警用户 * 查询探测器报警用户
* *
......
zh-baseversion-system/src/main/java/com/zehong/system/service/ITDetectorUserService.java
View file @ 121c4d37
...@@ -7,6 +7,7 @@ import com.zehong.system.domain.TDetectorUser; ...@@ -7,6 +7,7 @@ import com.zehong.system.domain.TDetectorUser;
import com.zehong.system.domain.TDetectorUserCount; import com.zehong.system.domain.TDetectorUserCount;
import com.zehong.system.domain.vo.TDetectorUserInspectVo; import com.zehong.system.domain.vo.TDetectorUserInspectVo;
import com.zehong.system.domain.vo.TDetectorUserVO; import com.zehong.system.domain.vo.TDetectorUserVO;
import com.zehong.system.domain.vo.TMassMarksDetectorUserVO;
/** /**
* 燃气用户Service接口 * 燃气用户Service接口
...@@ -17,6 +18,21 @@ import com.zehong.system.domain.vo.TDetectorUserVO; ...@@ -17,6 +18,21 @@ import com.zehong.system.domain.vo.TDetectorUserVO;
public interface ITDetectorUserService public interface ITDetectorUserService
{ {
/**
* 查询探测器用户列表 地图使用 LabelMarker 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
public List<TDetectorUserVO> massMarksDetectorUserList(TDetectorUser tDetectorUser);
/**
* 查询探测器用户列表 地图使用 massMarks 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
// public Map<String, List<TMassMarksDetectorUserVO>> massMarksDetectorUserList(TDetectorUser tDetectorUser);
/** /**
* 查询探测器用户列表 * 查询探测器用户列表
* *
......
zh-baseversion-system/src/main/java/com/zehong/system/service/impl/TDetectorUserServiceImpl.java
View file @ 121c4d37
package com.zehong.system.service.impl; package com.zehong.system.service.impl;
import java.math.BigDecimal;
import java.util.ArrayList; import java.util.ArrayList;
import java.util.HashMap;
import java.util.List; import java.util.List;
import java.util.Map; import java.util.Map;
import java.util.stream.Collectors;
import com.zehong.common.utils.DateUtils; import com.zehong.common.utils.DateUtils;
import com.zehong.system.domain.TDetectorUserCount; import com.zehong.system.domain.TDetectorUserCount;
import com.zehong.system.domain.vo.TDetectorUserInspectVo; import com.zehong.system.domain.vo.TDetectorUserInspectVo;
import com.zehong.system.domain.vo.TDetectorUserVO; import com.zehong.system.domain.vo.TDetectorUserVO;
import com.zehong.system.domain.vo.TMassMarksDetectorUserVO;
import com.zehong.system.mapper.TDetectorInfoMapper; import com.zehong.system.mapper.TDetectorInfoMapper;
import com.zehong.system.mapper.TDeviceInfoMapper; import com.zehong.system.mapper.TDeviceInfoMapper;
import com.zehong.system.mapper.TSiteStationInfoMapper; import com.zehong.system.mapper.TSiteStationInfoMapper;
...@@ -72,6 +76,61 @@ public class TDetectorUserServiceImpl implements ITDetectorUserService ...@@ -72,6 +76,61 @@ public class TDetectorUserServiceImpl implements ITDetectorUserService
return list; return list;
} }
/**
* 查询探测器用户列表 地图使用 LabelMarker 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
@Override
public List<TDetectorUserVO> massMarksDetectorUserList(TDetectorUser tDetectorUser) {
return tDetectorUserMapper.countTDetectorUserForMassMarks(tDetectorUser);
}
/**
* 查询探测器用户列表 地图使用 massMarks 标注的方式
* @param tDetectorUser tDetectorUser
* @return r
*/
/*
@Override
public Map<String, List<TMassMarksDetectorUserVO>> massMarksDetectorUserList(TDetectorUser tDetectorUser) {
List<TDetectorUserVO> tDetectorUserList = tDetectorUserMapper.countTDetectorUserForMassMarks(tDetectorUser);
Map<String, List<TMassMarksDetectorUserVO>> collect ;
if (tDetectorUserList.size() > 0) {
List<TMassMarksDetectorUserVO> massMarksDetectorUsers = new ArrayList<>();
TMassMarksDetectorUserVO massMarksDetectorUser;
for(TDetectorUserVO user : tDetectorUserList){
BigDecimal longitude = user.getLongitude();
BigDecimal latitude = user.getLatitude();
BigDecimal[] lnglat = new BigDecimal[2];
lnglat[1] = latitude;
lnglat[0] = longitude;
massMarksDetectorUser = new TMassMarksDetectorUserVO();
lnglat[1] = latitude;
lnglat[0] = longitude;
massMarksDetectorUser.setLnglat(lnglat);
if ("1".equals(user.getUserType())) {
massMarksDetectorUser.setIconType("6");
} else if ("2".equals(user.getUserType())) {
massMarksDetectorUser.setIconType("61");
}
massMarksDetectorUser.setStyle(2);
massMarksDetectorUsers.add(massMarksDetectorUser);
}
collect = massMarksDetectorUsers.stream().collect(Collectors.groupingBy(TMassMarksDetectorUserVO::getIconType));
} else {
collect = new HashMap<>();
}
return collect;
}
*/
/** /**
* 查询探测器报警用户（前台调用） * 查询探测器报警用户（前台调用）
* *
......
zh-baseversion-system/src/main/resources/mapper/system/TDetectorUserMapper.xml
View file @ 121c4d37
...@@ -102,6 +102,18 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" ...@@ -102,6 +102,18 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
where a.user_id = #{userId} where a.user_id = #{userId}
</select> </select>
<select id="countTDetectorUserForMassMarks" resultType="TDetectorUserVO" parameterType="TDetectorUser">
select a.user_id AS userId,
a.nick_name AS nickName,
a.user_type AS userType,
a.address AS address,
a.longitude AS longitude,
a.latitude AS latitude,
a.linkman AS linkman,
a.phone AS phone,
a.email AS email
from(select a2.* from t_detector_user a2) a
</select>
<select id="countTDetectorUser" resultType="TDetectorUserVO" parameterType="TDetectorUser"> <select id="countTDetectorUser" resultType="TDetectorUserVO" parameterType="TDetectorUser">
select t1.*, select t1.*,
IFNULL(t2.historyAlarmNum,0) AS historyAlarmNum, IFNULL(t2.historyAlarmNum,0) AS historyAlarmNum,
...@@ -126,13 +138,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" ...@@ -126,13 +138,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
COUNT(a.detector_id) AS detectorCount, COUNT(a.detector_id) AS detectorCount,
SUM(CASE a.detector_status WHEN '0' THEN 1 ELSE 0 END) AS onLineNum, SUM(CASE a.detector_status WHEN '0' THEN 1 ELSE 0 END) AS onLineNum,
SUM(CASE a.detector_status WHEN '1' THEN 1 ELSE 0 END) AS offLineNum SUM(CASE a.detector_status WHEN '1' THEN 1 ELSE 0 END) AS offLineNum
from(select a1.detector_id, from(select
a1.detector_type, a1.* ,
a1.detector_status, a2.detector_id,
a2.* from t_detector_info a1 a2.detector_type,
right join t_detector_user a2 on a1.user_id = a2.user_id a2.detector_status FROM t_detector_user a1
<where> a1.is_del = '0' and a2.is_del = '0' LEFT JOIN t_detector_info a2 ON a1.user_id = a2.user_id AND a2.is_del = '0'
<if test="userId != null and userId != ''"> and a2.user_id = #{userId}</if> <where> a1.is_del = '0'
<if test="userId != null and userId != ''"> and a1.user_id = #{userId}</if>
</where>) a </where>) a
group by a.user_id,a.detector_type group by a.user_id,a.detector_type
......
zh-baseversion-web/src/api/detector/detectorUser.js
View file @ 121c4d37
...@@ -9,6 +9,15 @@ export function listDetectorUser(query) { ...@@ -9,6 +9,15 @@ export function listDetectorUser(query) {
}) })
} }
// 探测器用户列表 大屏端 massMarks标注方式
export function massMarksDetectorUserList(query) {
return request({
url: '/supervise/user/massMarksDetectorUserList',
method: 'get',
params: query
})
}
// 探测器用户列表 // 探测器用户列表
export function detectorUserList(query) { export function detectorUserList(query) {
return request({ return request({
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ 121c4d37
...@@ -43,6 +43,10 @@ export class EditorMap { ...@@ -43,6 +43,10 @@ export class EditorMap {
// infowindow本身 // infowindow本身
infowindow = null; infowindow = null;
//用户列表图层
detectorUserlabelsLayer = null;
detectorUserlabelsLayerint = 0;
constructor(contaienr, config = {}, vue) { constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, { this.map = new AMap.Map(contaienr, {
viewMode: "3D", viewMode: "3D",
...@@ -80,7 +84,6 @@ export class EditorMap { ...@@ -80,7 +84,6 @@ export class EditorMap {
// 获取朝阳区的边界信息 // 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries; var bounds = result.districtList[0].boundaries;
var polygons = []; var polygons = [];
console.log("boundsboundsboundsboundsbounds", bounds);
if (bounds) { if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) { for (var i = 0, l = bounds.length; i < l; i++) {
...@@ -475,6 +478,159 @@ export class EditorMap { ...@@ -475,6 +478,159 @@ export class EditorMap {
}) })
} }
/**
* 地图上添加用户数据 海量标注 LabelMarker 方式
* @param {*} detectorUserData
* @param {*} component
* @param {*} showBool
*/
addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
this.detectorUserlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, //该层内标注是否避让
allowCollision: true, //不同标注层之间是否避让
});
//设置一个图标对象
const icon = {
type: "image", //图标类型，现阶段只支持 image 类型
image: svgUrl[6], //可访问的图片 URL
size: [30, 30], //图片尺寸
anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
};
var markers = [];
if(mapData !== null && mapData !== undefined) {
const map = new Map();
mapData.forEach(item => {
let longitude = item.longitude;
let latitude = item.latitude;
var userId = item.userId;
icon.userId = userId;
var curData = {
position: [longitude, latitude],
icon: icon,
rank: 1, //避让优先级
};
map.set(JSON.stringify(userId),item);
//创建 LabelMarker
const labelMarker = new AMap.LabelMarker(curData);
// var marker = new AMap.Marker(curData);
markers.push(labelMarker);
labelMarker.on("click", (e) => {
var opts = JSON.stringify(e.data.opts);
var optsObj = JSON.parse(opts);
var userId = JSON.stringify(optsObj.icon.userId);
var extData = map.get(userId);
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
this.massMarksMarkerClick(extData, compontent);
});
});
}
this.detectorUserlabelsLayer.add(markers);
this.map.add(this.detectorUserlabelsLayer)
if (!showBool) {
this.detectorUserlabelsLayer.hide();
}
}
/**
* 地图上添加用户数据 海量点标记 MassMarks 方式
* @param {*} detectorUserData
* @param {*} component
* @param {*} showBool
*/
// addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
// if(mapData !== null && mapData !== undefined) {
// var style;
// for(var key in mapData){
// var value = mapData[key];
// var jsonValue = JSON.stringify(value);
// var jsonValueArr = JSON.parse(jsonValue);
// if ("6" === key) {
// style = [{
// url: svgUrl[6],
// anchor: new AMap.Pixel(3, 3),
// size: new AMap.Size(11, 11),
// zIndex: 3,
// }]
// } else if ("61" === key) {
// style = [{
// url: svgUrl[6],
// anchor: new AMap.Pixel(3, 3),
// size: new AMap.Size(11, 11),
// zIndex: 3,
// }]
// }
// var mass = new AMap.MassMarks(jsonValueArr, {
// opacity: 0.8,
// zIndex: 111,
// cursor: 'pointer',
// style: style
// });
// //先一启动，直接显示
// // if (!showBool) {
// // mass.hide();
// // }
// mass.on("click", (e) => {
// var data = e.data;
// // 如果control==0就是默认值，没有使用123功能，就显示infowindow
// if (this.control == 0) {
// this.massMarksMarkerClick(data, compontent);
// } else if (this.control == 2) {
// // 2是已经上图的设备拥有的编辑功能
// } else if (this.control == 3) {
// // 3是删除操作
// }
// });
// mass.setMap(this.map);
// }
// }
// }
/** 点击marker出现infowindow- 大屏端 massMarks设置
* @description:
* @param {*} target 点击的对象
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
massMarksMarkerClick(data, compontent) {
// var detectorUserVO = data.tdetectorUserVO;
// var lng = lnglatArray[0];
// var lat = lnglatArray[1];
// var detectorUserVO = {"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":[{"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":null,"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}],"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}
let lng = data.longitude;
let lat = data.latitude;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
data,
compontent
);
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
anchor: "middle-left",
offset: [20, -10],
});
this.infowindow.open(this.map);
}
// 地图上add管道 // 地图上add管道
addMediumPipeLine(objData, component,mediumConponent) { addMediumPipeLine(objData, component,mediumConponent) {
const { path, pipePressure, iconType ,id} = objData; const { path, pipePressure, iconType ,id} = objData;
...@@ -666,6 +822,15 @@ export class EditorMap { ...@@ -666,6 +822,15 @@ export class EditorMap {
} }
}); });
} }
if (this.detectorUserlabelsLayer != null) {
if (this.detectorUserlabelsLayerint === 0) {
this.detectorUserlabelsLayer.show();
this.detectorUserlabelsLayerint = 1;
} else {
this.detectorUserlabelsLayer.hide();
this.detectorUserlabelsLayerint = 0;
}
}
} }
// 普通调用方法 // 普通调用方法
// 设备报警 // 设备报警
......
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 121c4d37
...@@ -150,7 +150,7 @@ ...@@ -150,7 +150,7 @@
import { EditorMap } from "@/utils/mapClass/map"; import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo"; import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser"; import { detectorUserList,massMarksDetectorUserList } from "@/api/detector/detectorUser";
import { import {
pipeData, pipeData,
tiaoyaxiang, tiaoyaxiang,
...@@ -380,7 +380,7 @@ export default { ...@@ -380,7 +380,7 @@ export default {
// 用户要等一下 因为有报警数据 // 用户要等一下 因为有报警数据
this.goMap(detectorUserList, this.addDevice3, User, false).then((res) => { this.massMarksDetectorUserGoMap(massMarksDetectorUserList,User, false).then((res) => {
// 先查一下，然后开启定时器 // 先查一下，然后开启定时器
this.userAlarm(); this.userAlarm();
this.alarmTimer = setInterval(() => { this.alarmTimer = setInterval(() => {
...@@ -482,6 +482,13 @@ export default { ...@@ -482,6 +482,13 @@ export default {
return config.iconType; return config.iconType;
}); });
}, },
massMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
this.map.addMassMarksDetectorUserGoMap(mapData, component, show);
});
},
goMap(httpFunc, addFunc, component, show) { goMap(httpFunc, addFunc, component, show) {
return httpFunc().then((res) => { return httpFunc().then((res) => {
// 给用户加icontype // 给用户加icontype
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment