添加优化后的地图页面,完全一处百度地图相关的api
|
@ -4,7 +4,7 @@ public class DeviceChannel {
|
|||
|
||||
|
||||
/**
|
||||
* 数据库自赠ID
|
||||
* 数据库自增ID
|
||||
*/
|
||||
private int id;
|
||||
|
||||
|
|
|
@ -5,7 +5,6 @@ import com.genersoft.iot.vmp.media.zlm.dto.StreamProxyItem;
|
|||
import com.genersoft.iot.vmp.media.zlm.dto.StreamPushItem;
|
||||
import com.genersoft.iot.vmp.service.bean.GPSMsgInfo;
|
||||
import com.genersoft.iot.vmp.storager.dao.dto.ChannelSourceInfo;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.DeviceChannelTree;
|
||||
import com.genersoft.iot.vmp.vmanager.gb28181.platform.bean.ChannelReduce;
|
||||
import com.github.pagehelper.PageInfo;
|
||||
|
||||
|
@ -94,12 +93,6 @@ public interface IVideoManagerStorage {
|
|||
|
||||
public List<DeviceChannel> queryChannelsByDeviceIdWithStartAndLimit(String deviceId, String query, Boolean hasSubChannel, Boolean online, int start, int limit);
|
||||
|
||||
/**
|
||||
* 获取某个设备的通道树
|
||||
* @param deviceId 设备ID
|
||||
* @return
|
||||
*/
|
||||
List<DeviceChannelTree> tree(String deviceId);
|
||||
|
||||
/**
|
||||
* 获取某个设备的通道列表
|
||||
|
@ -285,7 +278,7 @@ public interface IVideoManagerStorage {
|
|||
* @param startTime
|
||||
* @param endTime
|
||||
*/
|
||||
public List<MobilePosition> queryMobilePositions(String deviceId, String startTime, String endTime);
|
||||
public List<MobilePosition> queryMobilePositions(String deviceId, String channelId, String startTime, String endTime);
|
||||
|
||||
/**
|
||||
* 查询最新移动位置
|
||||
|
|
|
@ -2,7 +2,6 @@ package com.genersoft.iot.vmp.storager.dao;
|
|||
|
||||
import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
|
||||
import com.genersoft.iot.vmp.gb28181.bean.DeviceChannelInPlatform;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.DeviceChannelTree;
|
||||
import com.genersoft.iot.vmp.vmanager.gb28181.platform.bean.ChannelReduce;
|
||||
import org.apache.ibatis.annotations.*;
|
||||
import org.springframework.stereotype.Repository;
|
||||
|
@ -236,23 +235,6 @@ public interface DeviceChannelMapper {
|
|||
@Select("SELECT * FROM device_channel WHERE deviceId=#{deviceId} AND status=1")
|
||||
List<DeviceChannel> queryOnlineChannelsByDeviceId(String deviceId);
|
||||
|
||||
@Select(" SELECT\n" +
|
||||
" id,\n" +
|
||||
" channelId,\n" +
|
||||
" deviceId,\n" +
|
||||
" parentId,\n" +
|
||||
" status,\n" +
|
||||
" name as title,\n" +
|
||||
" channelId as \"value\",\n" +
|
||||
" channelId as \"key\",\n" +
|
||||
" longitude,\n" +
|
||||
" latitude,\n" +
|
||||
" PTZType,\n" +
|
||||
" subCount\n" +
|
||||
" from device_channel\n" +
|
||||
" where deviceId = #{deviceId}")
|
||||
List<DeviceChannelTree> tree(String deviceId);
|
||||
|
||||
@Delete(value = {" <script>" +
|
||||
"DELETE " +
|
||||
"from " +
|
||||
|
|
|
@ -16,12 +16,12 @@ public interface DeviceMobilePositionMapper {
|
|||
|
||||
@Select(value = {" <script>" +
|
||||
"SELECT * FROM device_mobile_position" +
|
||||
" WHERE deviceId = #{deviceId} " +
|
||||
" WHERE deviceId = #{deviceId} and channelId = #{channelId} " +
|
||||
"<if test=\"startTime != null\"> AND time>=#{startTime}</if>" +
|
||||
"<if test=\"endTime != null\"> AND time<=#{endTime}</if>" +
|
||||
" ORDER BY time ASC" +
|
||||
" </script>"})
|
||||
List<MobilePosition> queryPositionByDeviceIdAndTime(String deviceId, String startTime, String endTime);
|
||||
List<MobilePosition> queryPositionByDeviceIdAndTime(String deviceId, String channelId, String startTime, String endTime);
|
||||
|
||||
@Select("SELECT * FROM device_mobile_position WHERE deviceId = #{deviceId}" +
|
||||
" ORDER BY time DESC LIMIT 1")
|
||||
|
|
|
@ -13,8 +13,6 @@ import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
|
|||
import com.genersoft.iot.vmp.storager.IVideoManagerStorage;
|
||||
import com.genersoft.iot.vmp.storager.dao.*;
|
||||
import com.genersoft.iot.vmp.storager.dao.dto.ChannelSourceInfo;
|
||||
import com.genersoft.iot.vmp.utils.node.ForestNodeMerger;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.DeviceChannelTree;
|
||||
import com.genersoft.iot.vmp.vmanager.gb28181.platform.bean.ChannelReduce;
|
||||
import com.github.pagehelper.PageHelper;
|
||||
import com.github.pagehelper.PageInfo;
|
||||
|
@ -354,10 +352,6 @@ public class VideoManagerStorageImpl implements IVideoManagerStorage {
|
|||
return deviceChannelMapper.queryChannelsByDeviceIdWithStartAndLimit(deviceId, null, query, hasSubChannel, online, start, limit);
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<DeviceChannelTree> tree(String deviceId) {
|
||||
return ForestNodeMerger.merge(deviceChannelMapper.tree(deviceId));
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<DeviceChannel> queryChannelsByDeviceId(String deviceId) {
|
||||
|
@ -504,8 +498,8 @@ public class VideoManagerStorageImpl implements IVideoManagerStorage {
|
|||
* @param endTime
|
||||
*/
|
||||
@Override
|
||||
public synchronized List<MobilePosition> queryMobilePositions(String deviceId, String startTime, String endTime) {
|
||||
return deviceMobilePositionMapper.queryPositionByDeviceIdAndTime(deviceId, startTime, endTime);
|
||||
public synchronized List<MobilePosition> queryMobilePositions(String deviceId, String channelId, String startTime, String endTime) {
|
||||
return deviceMobilePositionMapper.queryPositionByDeviceIdAndTime(deviceId, channelId, startTime, endTime);
|
||||
}
|
||||
|
||||
@Override
|
||||
|
|
|
@ -1,74 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 节点基类
|
||||
*
|
||||
*/
|
||||
public class BaseNode<T> implements INode<T> {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
* 主键ID
|
||||
*/
|
||||
protected String channelId;
|
||||
|
||||
/**
|
||||
* 父节点ID
|
||||
*/
|
||||
protected String parentId;
|
||||
|
||||
/**
|
||||
* 子孙节点
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_EMPTY)
|
||||
protected List<T> children = new ArrayList<T>();
|
||||
|
||||
/**
|
||||
* 是否有子孙节点
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_EMPTY)
|
||||
private Boolean hasChildren;
|
||||
|
||||
/**
|
||||
* 是否有子孙节点
|
||||
*
|
||||
* @return Boolean
|
||||
*/
|
||||
@Override
|
||||
public Boolean getHasChildren() {
|
||||
if (children.size() > 0) {
|
||||
return true;
|
||||
} else {
|
||||
return this.hasChildren;
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getChannelId() {
|
||||
return channelId;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getParentId() {
|
||||
return parentId;
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<T> getChildren() {
|
||||
return children;
|
||||
}
|
||||
|
||||
public void setChildren(List<T> children) {
|
||||
this.children = children;
|
||||
}
|
||||
|
||||
public void setHasChildren(Boolean hasChildren) {
|
||||
this.hasChildren = hasChildren;
|
||||
}
|
||||
}
|
|
@ -1,31 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 森林节点类
|
||||
*
|
||||
*/
|
||||
public class ForestNode extends BaseNode<ForestNode> {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
* 节点内容
|
||||
*/
|
||||
private Object content;
|
||||
|
||||
public ForestNode(String id, String parentId, Object content) {
|
||||
this.channelId = id;
|
||||
this.parentId = parentId;
|
||||
this.content = content;
|
||||
}
|
||||
|
||||
public Object getContent() {
|
||||
return content;
|
||||
}
|
||||
|
||||
public void setContent(Object content) {
|
||||
this.content = content;
|
||||
}
|
||||
}
|
|
@ -1,68 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
import com.google.common.collect.ImmutableMap;
|
||||
import com.google.common.collect.Maps;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* 森林管理类
|
||||
*
|
||||
* @author smallchill
|
||||
*/
|
||||
public class ForestNodeManager<T extends INode<T>> {
|
||||
|
||||
/**
|
||||
* 森林的所有节点
|
||||
*/
|
||||
private final ImmutableMap<String, T> nodeMap;
|
||||
|
||||
/**
|
||||
* 森林的父节点ID
|
||||
*/
|
||||
private final Map<String, Object> parentIdMap = Maps.newHashMap();
|
||||
|
||||
public ForestNodeManager(List<T> nodes) {
|
||||
nodeMap = Maps.uniqueIndex(nodes, INode::getChannelId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据节点ID获取一个节点
|
||||
*
|
||||
* @param id 节点ID
|
||||
* @return 对应的节点对象
|
||||
*/
|
||||
public INode<T> getTreeNodeAt(String id) {
|
||||
if (nodeMap.containsKey(id)) {
|
||||
return nodeMap.get(id);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 增加父节点ID
|
||||
*
|
||||
* @param parentId 父节点ID
|
||||
*/
|
||||
public void addParentId(String parentId) {
|
||||
parentIdMap.put(parentId, "");
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取树的根节点(一个森林对应多颗树)
|
||||
*
|
||||
* @return 树的根节点集合
|
||||
*/
|
||||
public List<T> getRoot() {
|
||||
List<T> roots = new ArrayList<>();
|
||||
nodeMap.forEach((key, node) -> {
|
||||
if (node.getParentId() == null || parentIdMap.containsKey(node.getChannelId())) {
|
||||
roots.add(node);
|
||||
}
|
||||
});
|
||||
return roots;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,51 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
import com.genersoft.iot.vmp.utils.CollectionUtil;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 森林节点归并类
|
||||
*
|
||||
*/
|
||||
public class ForestNodeMerger {
|
||||
|
||||
/**
|
||||
* 将节点数组归并为一个森林(多棵树)(填充节点的children域)
|
||||
* 时间复杂度为O(n^2)
|
||||
*
|
||||
* @param items 节点域
|
||||
* @return 多棵树的根节点集合
|
||||
*/
|
||||
public static <T extends INode<T>> List<T> merge(List<T> items) {
|
||||
ForestNodeManager<T> forestNodeManager = new ForestNodeManager<>(items);
|
||||
items.forEach(forestNode -> {
|
||||
if (forestNode.getParentId() != null) {
|
||||
INode<T> node = forestNodeManager.getTreeNodeAt(forestNode.getParentId());
|
||||
if (node != null) {
|
||||
node.getChildren().add(forestNode);
|
||||
} else {
|
||||
forestNodeManager.addParentId(forestNode.getChannelId());
|
||||
}
|
||||
}
|
||||
});
|
||||
return forestNodeManager.getRoot();
|
||||
}
|
||||
|
||||
public static <T extends INode<T>> List<T> merge(List<T> items, String[] parentIds) {
|
||||
ForestNodeManager<T> forestNodeManager = new ForestNodeManager<>(items);
|
||||
items.forEach(forestNode -> {
|
||||
if (forestNode.getParentId() != null) {
|
||||
INode<T> node = forestNodeManager.getTreeNodeAt(forestNode.getParentId());
|
||||
if (CollectionUtil.contains(parentIds, forestNode.getChannelId())){
|
||||
forestNodeManager.addParentId(forestNode.getChannelId());
|
||||
} else {
|
||||
if (node != null){
|
||||
node.getChildren().add(forestNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
return forestNodeManager.getRoot();
|
||||
}
|
||||
}
|
|
@ -1,42 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
import java.io.Serializable;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
*
|
||||
* 节点
|
||||
*/
|
||||
public interface INode<T> extends Serializable {
|
||||
|
||||
/**
|
||||
* 主键
|
||||
*
|
||||
* @return String
|
||||
*/
|
||||
String getChannelId();
|
||||
|
||||
/**
|
||||
* 父主键
|
||||
*
|
||||
* @return String
|
||||
*/
|
||||
String getParentId();
|
||||
|
||||
/**
|
||||
* 子孙节点
|
||||
*
|
||||
* @return List<T>
|
||||
*/
|
||||
List<T> getChildren();
|
||||
|
||||
/**
|
||||
* 是否有子孙节点
|
||||
*
|
||||
* @return Boolean
|
||||
*/
|
||||
default Boolean getHasChildren() {
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,42 +0,0 @@
|
|||
package com.genersoft.iot.vmp.utils.node;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 树型节点类
|
||||
*
|
||||
*/
|
||||
public class TreeNode extends BaseNode<TreeNode> {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
private String title;
|
||||
|
||||
private String key;
|
||||
|
||||
private String value;
|
||||
|
||||
public String getTitle() {
|
||||
return title;
|
||||
}
|
||||
|
||||
public void setTitle(String title) {
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
public String getKey() {
|
||||
return key;
|
||||
}
|
||||
|
||||
public void setKey(String key) {
|
||||
this.key = key;
|
||||
}
|
||||
|
||||
public String getValue() {
|
||||
return value;
|
||||
}
|
||||
|
||||
public void setValue(String value) {
|
||||
this.value = value;
|
||||
}
|
||||
}
|
|
@ -1,121 +0,0 @@
|
|||
package com.genersoft.iot.vmp.vmanager.bean;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel;
|
||||
import com.genersoft.iot.vmp.utils.node.INode;
|
||||
import io.swagger.annotations.ApiModel;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
@ApiModel(value = "DeviceChannelTree对象", description = "DeviceChannelTree对象")
|
||||
public class DeviceChannelTree extends DeviceChannel implements INode<DeviceChannelTree> {
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
* 主键ID
|
||||
*/
|
||||
private int id;
|
||||
|
||||
/**
|
||||
* 父节点ID
|
||||
*/
|
||||
private String parentId;
|
||||
|
||||
private String parentName;
|
||||
|
||||
private String title;
|
||||
|
||||
private String key;
|
||||
|
||||
private String value;
|
||||
|
||||
/**
|
||||
* 子孙节点
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_EMPTY)
|
||||
private List<DeviceChannelTree> children;
|
||||
|
||||
/**
|
||||
* 是否有子孙节点
|
||||
*/
|
||||
@JsonInclude(JsonInclude.Include.NON_EMPTY)
|
||||
private Boolean hasChildren;
|
||||
|
||||
@Override
|
||||
public List<DeviceChannelTree> getChildren() {
|
||||
if (this.children == null) {
|
||||
this.children = new ArrayList<>();
|
||||
}
|
||||
return this.children;
|
||||
}
|
||||
|
||||
@Override
|
||||
public Boolean getHasChildren() {
|
||||
if (children.size() > 0) {
|
||||
return true;
|
||||
} else {
|
||||
return this.hasChildren;
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public int getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setId(int id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String getParentId() {
|
||||
return parentId;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setParentId(String parentId) {
|
||||
this.parentId = parentId;
|
||||
}
|
||||
|
||||
public String getParentName() {
|
||||
return parentName;
|
||||
}
|
||||
|
||||
public void setParentName(String parentName) {
|
||||
this.parentName = parentName;
|
||||
}
|
||||
|
||||
public String getTitle() {
|
||||
return title;
|
||||
}
|
||||
|
||||
public void setTitle(String title) {
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
public String getKey() {
|
||||
return key;
|
||||
}
|
||||
|
||||
public void setKey(String key) {
|
||||
this.key = key;
|
||||
}
|
||||
|
||||
public String getValue() {
|
||||
return value;
|
||||
}
|
||||
|
||||
public void setValue(String value) {
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
public void setChildren(List<DeviceChannelTree> children) {
|
||||
this.children = children;
|
||||
}
|
||||
|
||||
public void setHasChildren(Boolean hasChildren) {
|
||||
this.hasChildren = hasChildren;
|
||||
}
|
||||
}
|
|
@ -1,56 +0,0 @@
|
|||
package com.genersoft.iot.vmp.vmanager.bean;
|
||||
|
||||
import com.genersoft.iot.vmp.utils.node.TreeNode;
|
||||
|
||||
public class DeviceChannelTreeNode extends TreeNode {
|
||||
|
||||
private Integer status;
|
||||
|
||||
private String deviceId;
|
||||
|
||||
private String channelId;
|
||||
|
||||
private Double lng;
|
||||
|
||||
private Double lat;
|
||||
|
||||
public Integer getStatus() {
|
||||
return status;
|
||||
}
|
||||
|
||||
public void setStatus(Integer status) {
|
||||
this.status = status;
|
||||
}
|
||||
|
||||
public String getDeviceId() {
|
||||
return deviceId;
|
||||
}
|
||||
|
||||
public void setDeviceId(String deviceId) {
|
||||
this.deviceId = deviceId;
|
||||
}
|
||||
|
||||
public String getChannelId() {
|
||||
return channelId;
|
||||
}
|
||||
|
||||
public void setChannelId(String channelId) {
|
||||
this.channelId = channelId;
|
||||
}
|
||||
|
||||
public Double getLng() {
|
||||
return lng;
|
||||
}
|
||||
|
||||
public void setLng(Double lng) {
|
||||
this.lng = lng;
|
||||
}
|
||||
|
||||
public Double getLat() {
|
||||
return lat;
|
||||
}
|
||||
|
||||
public void setLat(Double lat) {
|
||||
this.lat = lat;
|
||||
}
|
||||
}
|
|
@ -10,6 +10,7 @@ import com.genersoft.iot.vmp.gb28181.transmit.callback.RequestMessage;
|
|||
import com.genersoft.iot.vmp.gb28181.transmit.cmd.impl.SIPCommander;
|
||||
import com.genersoft.iot.vmp.service.IDeviceService;
|
||||
import com.genersoft.iot.vmp.storager.IVideoManagerStorage;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.WVPResult;
|
||||
import com.github.pagehelper.util.StringUtil;
|
||||
|
||||
import io.swagger.annotations.Api;
|
||||
|
@ -65,10 +66,11 @@ public class MobilePositionController {
|
|||
@ApiImplicitParam(name = "start", value = "开始时间", required = true, dataTypeClass = String.class),
|
||||
@ApiImplicitParam(name = "end", value = "结束时间", required = true, dataTypeClass = String.class),
|
||||
})
|
||||
@GetMapping("/history/{deviceId}")
|
||||
public ResponseEntity<List<MobilePosition>> positions(@PathVariable String deviceId,
|
||||
@RequestParam(required = false) String start,
|
||||
@RequestParam(required = false) String end) {
|
||||
@GetMapping("/history/{deviceId}/{channelId}")
|
||||
public ResponseEntity<WVPResult<List<MobilePosition>>> positions(@PathVariable String deviceId,
|
||||
@PathVariable String channelId,
|
||||
@RequestParam(required = false) String start,
|
||||
@RequestParam(required = false) String end) {
|
||||
// if (logger.isDebugEnabled()) {
|
||||
// logger.debug("查询设备" + deviceId + "的历史轨迹");
|
||||
// }
|
||||
|
@ -79,9 +81,11 @@ public class MobilePositionController {
|
|||
if (StringUtil.isEmpty(end)) {
|
||||
end = null;
|
||||
}
|
||||
|
||||
List<MobilePosition> result = storager.queryMobilePositions(deviceId, start, end);
|
||||
return new ResponseEntity<>(result, HttpStatus.OK);
|
||||
WVPResult<List<MobilePosition>> wvpResult = new WVPResult<>();
|
||||
wvpResult.setCode(0);
|
||||
List<MobilePosition> result = storager.queryMobilePositions(deviceId, channelId, start, end);
|
||||
wvpResult.setData(result);
|
||||
return new ResponseEntity<>(wvpResult, HttpStatus.OK);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -9,7 +9,6 @@ import com.genersoft.iot.vmp.gb28181.bean.SyncStatus;
|
|||
import com.genersoft.iot.vmp.gb28181.event.DeviceOffLineDetector;
|
||||
import com.genersoft.iot.vmp.gb28181.task.ISubscribeTask;
|
||||
import com.genersoft.iot.vmp.gb28181.task.impl.CatalogSubscribeTask;
|
||||
import com.genersoft.iot.vmp.gb28181.task.impl.MobilePositionSubscribeHandlerTask;
|
||||
import com.genersoft.iot.vmp.gb28181.task.impl.MobilePositionSubscribeTask;
|
||||
import com.genersoft.iot.vmp.gb28181.transmit.callback.DeferredResultHolder;
|
||||
import com.genersoft.iot.vmp.gb28181.transmit.callback.RequestMessage;
|
||||
|
@ -17,14 +16,12 @@ import com.genersoft.iot.vmp.gb28181.transmit.cmd.impl.SIPCommander;
|
|||
import com.genersoft.iot.vmp.service.IDeviceService;
|
||||
import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
|
||||
import com.genersoft.iot.vmp.storager.IVideoManagerStorage;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.DeviceChannelTree;
|
||||
import com.genersoft.iot.vmp.vmanager.bean.WVPResult;
|
||||
import com.github.pagehelper.PageInfo;
|
||||
import io.swagger.annotations.Api;
|
||||
import io.swagger.annotations.ApiImplicitParam;
|
||||
import io.swagger.annotations.ApiImplicitParams;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import org.kxml2.wap.wv.WV;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
|
@ -450,11 +447,6 @@ public class DeviceQuery {
|
|||
return result;
|
||||
}
|
||||
|
||||
@GetMapping("/{deviceId}/tree")
|
||||
@ApiOperation(value = "通道树形结构", notes = "通道树形结构")
|
||||
public WVPResult<List<DeviceChannelTree>> tree(@PathVariable String deviceId) {
|
||||
return WVPResult.Data(storager.tree(deviceId));
|
||||
}
|
||||
|
||||
@GetMapping("/{deviceId}/sync_status")
|
||||
@ApiOperation(value = "获取通道同步进度", notes = "获取通道同步进度")
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
// 默认地图中心点
|
||||
center:[116.41020, 39.915119],
|
||||
// 地图最大层级
|
||||
maxZoom:19,
|
||||
maxZoom:18,
|
||||
// 地图最小层级
|
||||
minZoom: 3
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
"moment": "^2.29.1",
|
||||
"ol": "^6.14.1",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-clipboards": "^1.3.0",
|
||||
|
@ -11880,6 +11881,16 @@
|
|||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sockjs/node_modules/uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"uuid": "bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/sort-asc": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/sort-asc/-/sort-asc-0.1.0.tgz",
|
||||
|
@ -12978,13 +12989,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1601826530476&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",
|
||||
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
|
||||
"deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
|
||||
"dev": true,
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"bin": {
|
||||
"uuid": "bin/uuid"
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/validate-npm-package-license": {
|
||||
|
@ -24308,6 +24317,14 @@
|
|||
"requires": {
|
||||
"faye-websocket": "^0.10.0",
|
||||
"uuid": "^3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-3.4.0.tgz",
|
||||
"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"sockjs-client": {
|
||||
|
@ -25260,10 +25277,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"uuid": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1601826530476&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",
|
||||
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
|
||||
"dev": true
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
|
||||
},
|
||||
"validate-npm-package-license": {
|
||||
"version": "3.0.4",
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
"moment": "^2.29.1",
|
||||
"ol": "^6.14.1",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-clipboards": "^1.3.0",
|
||||
|
|
|
@ -1,19 +0,0 @@
|
|||
import axios from 'axios';
|
||||
|
||||
export const tree = (deviceId) => {
|
||||
return axios({
|
||||
url: `/api/device/query/${deviceId}/tree`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export const deviceList = (page, count) => {
|
||||
return axios({
|
||||
method: 'get',
|
||||
url:`/api/device/query/devices`,
|
||||
params: {
|
||||
page,
|
||||
count
|
||||
}
|
||||
})
|
||||
}
|
|
@ -194,7 +194,7 @@ export default {
|
|||
this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
|
||||
},
|
||||
showDevicePosition: function (row) {
|
||||
this.$router.push(`/devicePosition/${row.deviceId}/0/15/1`);
|
||||
this.$router.push(`/map?deviceId=${row.deviceId}`);
|
||||
},
|
||||
|
||||
//gb28181平台对接
|
||||
|
|
|
@ -1,70 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree :data="channelList" :props="props" @node-click="sendDevicePush">
|
||||
<span slot-scope="{ node }">
|
||||
<span v-if="node.isLeaf">
|
||||
<i class="el-icon-video-camera" :style="{color:node.disabled==1?'#67C23A':'#F56C6C'}"></i>
|
||||
</span>
|
||||
<span v-else>
|
||||
<i class="el-icon-folder"></i>
|
||||
</span>
|
||||
<span>
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ChannelTreeItem from "@/components/channelTreeItem"
|
||||
import {tree} from '@/api/deviceApi'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChannelTreeItem,
|
||||
},
|
||||
props:{
|
||||
device: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
channelList: [],
|
||||
props: {
|
||||
label: 'title',
|
||||
children: 'children',
|
||||
isLeaf: 'hasChildren',
|
||||
disabled: 'status'
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.leafs = []
|
||||
this.getTree()
|
||||
},
|
||||
methods: {
|
||||
getTree() {
|
||||
this.loading = true
|
||||
var that = this
|
||||
tree(this.device.deviceId).then(function (res) {
|
||||
console.log(res.data.data);
|
||||
that.channelList = res.data.data;
|
||||
that.loading = false;
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
that.loading = false;
|
||||
});
|
||||
},
|
||||
sendDevicePush(c) {
|
||||
if(c.hasChildren) return
|
||||
this.$emit('sendDevicePush',c)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,74 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <div :index="item.key" v-for="(item,i) in list" :key="i+'-'">
|
||||
<el-submenu v-if="item.hasChildren">
|
||||
<template slot="title">
|
||||
<i class="el-icon-video-camera"></i>
|
||||
<span slot="title">{{item.title || item.deviceId}}</span>
|
||||
</template>
|
||||
<channel-list :list="item.children" @sendDevicePush="sendDevicePush"></channel-list>
|
||||
</el-submenu>
|
||||
<el-menu-item v-else :index="item.key" @click="sendDevicePush(item)">
|
||||
<template slot="title" >
|
||||
<i class="el-icon-switch-button" :style="{color:item.status==1?'#67C23A':'#F56C6C'}"></i>
|
||||
<span slot="title">{{item.title}}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</div> -->
|
||||
<div >
|
||||
<template v-if="!item.hasChildren">
|
||||
<el-menu-item :index="item.key" @click="sendDevicePush(item)">
|
||||
<i class="el-icon-video-camera" :style="{color:item.status==1?'#67C23A':'#F56C6C'}"></i>
|
||||
{{item.title}}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else :index="item.key">
|
||||
<template slot="title" >
|
||||
<i class="el-icon-location-outline"></i>
|
||||
{{item.title}}
|
||||
</template>
|
||||
|
||||
<template v-for="child in item.children">
|
||||
<channel-item
|
||||
v-if="child.hasChildren"
|
||||
:item="child"
|
||||
:key="child.key"
|
||||
@sendDevicePush="sendDevicePush"/>
|
||||
<el-menu-item v-else :key="child.key" :index="child.key" @click="sendDevicePush(child)">
|
||||
<i class="el-icon-video-camera" :style="{color:child.status==1?'#67C23A':'#F56C6C'}"></i>
|
||||
{{child.title}}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'ChannelItem',
|
||||
props:{
|
||||
list:Array,
|
||||
channelId: String,
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
channelId(val) {
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sendDevicePush(c) {
|
||||
this.$emit('sendDevicePush',c)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF">
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
|
||||
<el-container>
|
||||
<el-header>设备列表</el-header>
|
||||
<el-main style="background-color: #ffffff;">
|
||||
<div class="device-tree-main-box">
|
||||
<el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu">
|
||||
<el-tree :props="defaultProps" :load="loadNode" lazy @node-click="handleNodeClick"@node-contextmenu="handleContextMenu" style="min-width: 100%; display:inline-block !important;">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
|
||||
<span v-if="node.data.type === 0 && node.data.online" title="在线设备" class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
|
||||
<span v-if="node.data.type === 0 && !node.data.online " title="离线设备" class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
|
||||
|
@ -49,16 +49,17 @@ export default {
|
|||
},
|
||||
props: ['clickEvent', 'contextMenuEvent'],
|
||||
methods: {
|
||||
handleNodeClick(data) {
|
||||
handleNodeClick(data,node,element) {
|
||||
console.log("点击事件")
|
||||
console.log(data)
|
||||
if(typeof (this.clickEvent) == "function") {
|
||||
this.clickEvent(data.userData)
|
||||
}
|
||||
},
|
||||
handleContextMenu(data) {
|
||||
handleContextMenu(event,data,node,element) {
|
||||
console.log("右键点击事件")
|
||||
if(typeof (this.contextMenuEvent) == "function") {
|
||||
this.contextMenuEvent(data.userData)
|
||||
this.contextMenuEvent(event, data.userData)
|
||||
}
|
||||
},
|
||||
loadNode: function(node, resolve){
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="mapContainer" style="width: 100%;height: 100%;"></div>
|
||||
<div id="mapContainer" ref="mapContainer" style="width: 100%;height: 100%;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -7,10 +7,20 @@ import 'ol/ol.css';
|
|||
import Map from 'ol/Map';
|
||||
import OSM from 'ol/source/OSM';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import Tile from 'ol/layer/Tile';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import Style from 'ol/style/Style';
|
||||
import Icon from 'ol/style/Icon';
|
||||
import View from 'ol/View';
|
||||
import Feature from 'ol/Feature';
|
||||
import Overlay from 'ol/Overlay';
|
||||
import {Point, LineString} from 'ol/geom';
|
||||
import {get as getProj, fromLonLat} from 'ol/proj';
|
||||
import {ZoomSlider, Zoom} from 'ol/control';
|
||||
import {containsCoordinate} from 'ol/extent';
|
||||
|
||||
import {v4} from 'uuid'
|
||||
|
||||
let olMap = null;
|
||||
|
||||
|
@ -24,7 +34,9 @@ export default {
|
|||
},
|
||||
created(){
|
||||
this.$nextTick(() => {
|
||||
this.init();
|
||||
setTimeout(()=>{
|
||||
this.init()
|
||||
}, 100)
|
||||
})
|
||||
|
||||
},
|
||||
|
@ -48,7 +60,7 @@ export default {
|
|||
});
|
||||
let tileLayer = null;
|
||||
if (mapParam.tilesUrl) {
|
||||
tileLayer = new TileLayer({
|
||||
tileLayer = new Tile({
|
||||
source: new XYZ({
|
||||
projection: getProj("EPSG:3857"),
|
||||
wrapX: false,
|
||||
|
@ -57,13 +69,13 @@ export default {
|
|||
})
|
||||
})
|
||||
}else {
|
||||
tileLayer = new TileLayer({
|
||||
tileLayer = new Tile({
|
||||
preload: 4,
|
||||
source: new OSM(),
|
||||
})
|
||||
}
|
||||
olMap = new Map({
|
||||
target: "mapContainer", // 容器ID
|
||||
target: this.$refs.mapContainer, // 容器ID
|
||||
layers: [tileLayer], // 默认图层
|
||||
view: view, // 视图
|
||||
controls:[ // 控件
|
||||
|
@ -71,6 +83,7 @@ export default {
|
|||
new Zoom(),
|
||||
] ,
|
||||
})
|
||||
console.log(3222)
|
||||
},
|
||||
setCenter(point){
|
||||
|
||||
|
@ -82,26 +95,151 @@ export default {
|
|||
|
||||
},
|
||||
centerAndZoom(point,zoom,callback){
|
||||
var zoom_ = olMap.getView().getZoom();
|
||||
zoom = zoom|| zoom_;
|
||||
var duration = 600;
|
||||
olMap.getView().setCenter(fromLonLat(point))
|
||||
olMap.getView().animate({
|
||||
zoom: zoom ,
|
||||
duration: duration
|
||||
});
|
||||
},
|
||||
panTo(point, zoom){
|
||||
let duration = 800;
|
||||
|
||||
olMap.getView().cancelAnimations()
|
||||
olMap.getView().animate({
|
||||
center: fromLonLat(point),
|
||||
duration: duration
|
||||
});
|
||||
if (!containsCoordinate(olMap.getView().calculateExtent(), fromLonLat(point))) {
|
||||
olMap.getView().animate({
|
||||
zoom: olMap.getView().getZoom() - 1,
|
||||
duration: duration / 2
|
||||
}, {
|
||||
zoom: zoom || olMap.getView().getZoom(),
|
||||
duration: duration / 2
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
panTo(point){
|
||||
fit(layer){
|
||||
let extent = layer.getSource().getExtent();
|
||||
if (extent) {
|
||||
olMap.getView().fit(extent,{
|
||||
duration : 600,
|
||||
padding: [100, 100, 100, 100]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
openInfoBox(){
|
||||
|
||||
openInfoBox(position, content, offset){
|
||||
let id = v4()
|
||||
// let infoBox = document.createElement("div");
|
||||
// infoBox.innerHTML = content ;
|
||||
// infoBox.setAttribute("infoBoxId", id)
|
||||
let overlay = new Overlay({
|
||||
id:id,
|
||||
autoPan:true,
|
||||
autoPanAnimation:{
|
||||
duration: 250
|
||||
},
|
||||
element: content,
|
||||
positioning:"bottom-center",
|
||||
offset:offset,
|
||||
// className:overlayStyle.className
|
||||
});
|
||||
olMap.addOverlay(overlay);
|
||||
overlay.setPosition(fromLonLat(position));
|
||||
return id;
|
||||
},
|
||||
closeInfoBox(){
|
||||
|
||||
closeInfoBox(id){
|
||||
olMap.getOverlayById(id).setPosition(undefined)
|
||||
// olMap.removeOverlay(olMap.getOverlayById(id))
|
||||
},
|
||||
addLayer(){
|
||||
/**
|
||||
* 添加图层
|
||||
* @param data
|
||||
* [
|
||||
* {
|
||||
*
|
||||
* position: [119.1212,45,122],
|
||||
* image: {
|
||||
* src:"/images/123.png",
|
||||
* anchor: [0.5, 0.5]
|
||||
*
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* ]
|
||||
*/
|
||||
addLayer(data, clickEvent){
|
||||
let style = new Style();
|
||||
if (data.length > 0) {
|
||||
let features = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let feature = new Feature(new Point(fromLonLat(data[i].position)));
|
||||
feature.customData = data[i].data;
|
||||
let cloneStyle = style.clone()
|
||||
cloneStyle.setImage(new Icon({
|
||||
anchor: data[i].image.anchor,
|
||||
crossOrigin: 'Anonymous',
|
||||
src: data[i].image.src,
|
||||
}))
|
||||
feature.setStyle(cloneStyle)
|
||||
features.push(feature);
|
||||
}
|
||||
let source = new VectorSource();
|
||||
source.addFeatures(features);
|
||||
let vectorLayer = new VectorLayer({
|
||||
source:source,
|
||||
style:style,
|
||||
renderMode:"image",
|
||||
declutter: false
|
||||
})
|
||||
olMap.addLayer(vectorLayer)
|
||||
if (typeof clickEvent == "function") {
|
||||
olMap.on("click", (event)=>{
|
||||
vectorLayer.getFeatures(event.pixel).then((features)=>{
|
||||
if (features.length > 0) {
|
||||
let items = []
|
||||
for (let i = 0; i < features.length; i++) {
|
||||
items.push(features[i].customData)
|
||||
}
|
||||
clickEvent(items)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
return vectorLayer;
|
||||
}
|
||||
},
|
||||
removeLayer(layer){
|
||||
olMap.removeLayer(layer)
|
||||
},
|
||||
removeLayer(){
|
||||
|
||||
addLineLayer(positions) {
|
||||
if (positions.length > 0) {
|
||||
let points = [];
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
points.push(fromLonLat(positions[i]));
|
||||
}
|
||||
let line = new LineString(points)
|
||||
let lineFeature = new Feature(line);
|
||||
|
||||
let source = new VectorSource();
|
||||
source.addFeature(lineFeature);
|
||||
let vectorLayer = new VectorLayer({
|
||||
source: source,
|
||||
})
|
||||
olMap.addLayer(vectorLayer)
|
||||
return vectorLayer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
// if (this.jessibuca) {
|
||||
|
|
|
@ -1,260 +1,353 @@
|
|||
<template>
|
||||
<div id="devicePosition" style="height: 100%">
|
||||
<el-container style="height: 100%">
|
||||
<el-header>
|
||||
<uiHeader></uiHeader>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="250px" height="100%" style="background-color: #FFFFFF; margin: 0 0 20px 20px;">
|
||||
<div style=" padding-top: 10px">
|
||||
<el-tree class="el-scrollbar"
|
||||
ref="tree"
|
||||
id="deviceTree"
|
||||
empty-text="未知节点"
|
||||
node-key="id"
|
||||
:highlight-current="false"
|
||||
:expand-on-click-node="false"
|
||||
:props="props"
|
||||
:load="loadNode"
|
||||
@node-contextmenu="contextmenuEventHandler"
|
||||
@node-click="nodeClickHandler"
|
||||
lazy>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<MapComponent></MapComponent>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<div id="devicePosition" style="width: 100vw; height: 91vh;">
|
||||
<el-container style="height: 91vh;" v-loading="isLoging">
|
||||
<el-aside width="auto" style="background-color: #ffffff">
|
||||
<DeviceTree ref="deviceTree" :clickEvent="clickEvent" :contextMenuEvent="contextmenuEventHandler" ></DeviceTree>
|
||||
</el-aside>
|
||||
<el-main style="height: 91vh; padding: 0">
|
||||
<MapComponent ref="map"></MapComponent>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div ref="infobox" v-if="channel != null " >
|
||||
<div v-if="channel != null" class="infobox-content">
|
||||
<el-descriptions class="margin-top" :title="channel.name" :column="1" :colon="true" size="mini" :labelStyle="labelStyle" >
|
||||
<el-descriptions-item label="生产厂商">{{channel.manufacture}}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{channel.model}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备归属" >{{channel.owner}}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区域" >{{channel.civilCode}}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装地址" >{{channel.address == null?'未知': channel.address}}</el-descriptions-item>
|
||||
<el-descriptions-item label="云台类型" >{{channel.ptztypeText}}</el-descriptions-item>
|
||||
<el-descriptions-item label="经纬度" >{{channel.longitude}},{{channel.latitude}}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag size="small" v-if="channel.status === 1">在线</el-tag>
|
||||
<el-tag size="small" type="info" v-if="channel.status === 0">离线</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div style="padding-top: 10px">
|
||||
<el-button type="primary" size="small" title="播放" icon="el-icon-video-play" @click="play(channel)"></el-button>
|
||||
<el-button type="primary" size="small" title="编辑位置" icon="el-icon-edit" @click="edit(channel)"></el-button>
|
||||
<el-button type="primary" size="small" title="轨迹查询" icon="el-icon-map-location" @click="getTrace(channel)"></el-button>
|
||||
</div>
|
||||
<span class="infobox-close el-icon-close" @click="closeInfoBox()"></span>
|
||||
</div>
|
||||
</div>
|
||||
<devicePlayer ref="devicePlayer" ></devicePlayer>
|
||||
<queryTrace ref="queryTrace" ></queryTrace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from "./UiHeader.vue";
|
||||
import MapComponent from "./common/MapComponent.vue";
|
||||
import DeviceService from "./service/DeviceService";
|
||||
import DeviceTree from "./common/DeviceTree";
|
||||
import channelMapInfobox from "./dialog/channelMapInfobox";
|
||||
import devicePlayer from './dialog/devicePlayer.vue'
|
||||
import queryTrace from './dialog/queryTrace.vue'
|
||||
|
||||
export default {
|
||||
name: "devicePosition",
|
||||
components: {
|
||||
MapComponent,
|
||||
uiHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceService: new DeviceService(),
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
isLeaf: 'leaf'
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
|
||||
name: "devicePosition",
|
||||
components: {
|
||||
MapComponent,
|
||||
DeviceTree,
|
||||
channelMapInfobox,
|
||||
devicePlayer,
|
||||
queryTrace,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceService: new DeviceService(),
|
||||
layer: null,
|
||||
lineLayer: null,
|
||||
channel: null,
|
||||
infoBoxId: null,
|
||||
labelStyle: {
|
||||
width: "56px"
|
||||
},
|
||||
loadNode: function(node, resolve){
|
||||
if (node.level === 0) {
|
||||
this.deviceService.getAllDeviceList((data)=>{
|
||||
console.log("all deivce")
|
||||
console.log(data)
|
||||
if (data.length > 0) {
|
||||
let nodeList = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let node = {
|
||||
name: data[i].name || data[i].deviceId,
|
||||
id: data[i].deviceId,
|
||||
online: data[i].online,
|
||||
deviceId: data[i].deviceId,
|
||||
}
|
||||
nodeList.push(node);
|
||||
}
|
||||
resolve(nodeList)
|
||||
}else {
|
||||
resolve([])
|
||||
}
|
||||
}, (error)=>{
|
||||
isLoging: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.deviceId) {
|
||||
console.log(this.$route.query.deviceId)
|
||||
// this.$refs.deviceTree.openByDeivceId(this.$route.query.deivceId)
|
||||
setTimeout(()=>{ // 延迟以等待地图加载完成 TODO 后续修改为通过是实际这;状态加回调完成
|
||||
this.deviceService.getAllChannel(false, this.$route.query.deviceId, this.channelsHandler)
|
||||
}, 1000)
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickEvent: function (data) {
|
||||
if (data.channelId && data.subCount == 0) {
|
||||
// 点击通道
|
||||
if (data.longitude * data.latitude === 0) {
|
||||
this.$message.error('未获取到位置信息');
|
||||
} else {
|
||||
if (this.layer != null) {
|
||||
this.$refs.map.removeLayer(this.layer);
|
||||
}
|
||||
this.closeInfoBox()
|
||||
this.layer = this.$refs.map.addLayer([{
|
||||
position: [data.longitude, data.latitude],
|
||||
image: {
|
||||
src: this.getImageByChannel(data),
|
||||
anchor: [0.5, 1]
|
||||
},
|
||||
data: data
|
||||
}], this.featureClickEvent)
|
||||
this.$refs.map.panTo([data.longitude, data.latitude], mapParam.maxZoom)
|
||||
}
|
||||
if (node.level === 1){
|
||||
console.log(node)
|
||||
this.deviceService.getAllCatalog(node.data.deviceId, (data)=>{
|
||||
console.log("all Catalog")
|
||||
console.log(data)
|
||||
if (data.length > 0) {
|
||||
let nodeList = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let node = {
|
||||
name: data[i].name || data[i].channelId,
|
||||
id: data[i].channelId,
|
||||
online: data[i].status === 1,
|
||||
deviceId: data[i].deviceId,
|
||||
channelId: data[i].channelId,
|
||||
}
|
||||
nodeList.push(node);
|
||||
}
|
||||
resolve(nodeList)
|
||||
}else {
|
||||
resolve([])
|
||||
}
|
||||
}, (error)=>{
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
if (node.level > 1) {
|
||||
console.log(node.data.channelId)
|
||||
this.deviceService.getAllSubCatalog(node.data.deviceId, node.data.channelId, (data)=>{
|
||||
console.log("all Catalog")
|
||||
console.log(data)
|
||||
if (data.length > 0) {
|
||||
let nodeList = []
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let node = {
|
||||
name: data[i].name || data[i].channelId,
|
||||
id: data[i].channelId,
|
||||
online: data[i].status === 1,
|
||||
deviceId: data[i].deviceId,
|
||||
channelId: data[i].channelId,
|
||||
}
|
||||
nodeList.push(node);
|
||||
}
|
||||
resolve(nodeList)
|
||||
}else {
|
||||
resolve([])
|
||||
}
|
||||
}, (error)=>{
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
contextmenuEventHandler: function (event,data,node,element){
|
||||
if (node.data.type !== 0) {
|
||||
data.parentId = node.parent.data.id;
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
{
|
||||
label: "移除通道",
|
||||
icon: "el-icon-delete",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.$axios({
|
||||
method:"delete",
|
||||
url:"/api/platform/catalog/relation/del",
|
||||
data: data
|
||||
}).then((res)=>{
|
||||
console.log("移除成功")
|
||||
node.parent.loaded = false
|
||||
node.parent.expand();
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
event, // 鼠标事件信息
|
||||
customClass: "custom-class", // 自定义菜单 class
|
||||
zIndex: 3000, // 菜单样式 z-index
|
||||
});
|
||||
}else {
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
{
|
||||
label: "刷新节点",
|
||||
icon: "el-icon-refresh",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.refreshCatalog(node);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "新建节点",
|
||||
icon: "el-icon-plus",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.addCatalog(data.id, node);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "修改节点",
|
||||
icon: "el-icon-edit",
|
||||
disabled: node.level === 1,
|
||||
onClick: () => {
|
||||
this.editCatalog(data, node);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "删除节点",
|
||||
icon: "el-icon-delete",
|
||||
disabled: node.level === 1,
|
||||
divided: true,
|
||||
onClick: () => {
|
||||
this.$confirm('确定删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.removeCatalog(data.id, node)
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "设为默认",
|
||||
icon: "el-icon-folder-checked",
|
||||
disabled: node.data.id === this.defaultCatalogIdSign,
|
||||
onClick: () => {
|
||||
this.setDefaultCatalog(data.id)
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: "导出",
|
||||
// icon: "el-icon-download",
|
||||
// disabled: false,
|
||||
// children: [
|
||||
// {
|
||||
// label: "导出到文件",
|
||||
// onClick: () => {
|
||||
//
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// label: "导出到其他平台",
|
||||
// onClick: () => {
|
||||
//
|
||||
// },
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
],
|
||||
event, // 鼠标事件信息
|
||||
customClass: "custom-class", // 自定义菜单 class
|
||||
zIndex: 3000, // 菜单样式 z-index
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
nodeClickHandler: function (data, node, tree){
|
||||
this.chooseId = data.id;
|
||||
this.chooseName = data.name;
|
||||
if (this.catalogIdChange)this.catalogIdChange(this.chooseId, this.chooseName);
|
||||
}
|
||||
},
|
||||
contextmenuEventHandler: function (event, data) {
|
||||
if (data.channelId && data.subCount == 0) {
|
||||
// 点击通道
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
{
|
||||
label: "播放",
|
||||
icon: "el-icon-video-play",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.play(data);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "编辑位置",
|
||||
icon: "el-icon-edit",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.edit(data)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "轨迹查询",
|
||||
icon: "el-icon-map-location",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
this.getTrace(data)
|
||||
}
|
||||
}
|
||||
],
|
||||
event, // 鼠标事件信息
|
||||
customClass: "custom-class", // 自定义菜单 class
|
||||
zIndex: 3000, // 菜单样式 z-index
|
||||
});
|
||||
} else {
|
||||
this.deviceOrSubChannelMenu(event, data)
|
||||
}
|
||||
|
||||
},
|
||||
deviceOrSubChannelMenu: function (event, data) {
|
||||
// 点击设备
|
||||
this.$contextmenu({
|
||||
items: [
|
||||
{
|
||||
label: "定位",
|
||||
icon: "el-icon-s-promotion",
|
||||
disabled: false,
|
||||
onClick: () => {
|
||||
if (!data.channelId) {
|
||||
this.deviceService.getAllChannel(false, data.deviceId, this.channelsHandler)
|
||||
}
|
||||
if (data.channelId && data.subCount > 0) {
|
||||
// 点击子目录
|
||||
this.deviceService.getAllSubChannel(false, data.deviceId, data.channelId, this.channelsHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
event, // 鼠标事件信息
|
||||
customClass: "custom-class", // 自定义菜单 class
|
||||
zIndex: 3000, // 菜单样式 z-index
|
||||
});
|
||||
|
||||
},
|
||||
channelsHandler: function (channels) {
|
||||
console.log(2)
|
||||
if (channels.length > 0) {
|
||||
this.clean()
|
||||
this.closeInfoBox()
|
||||
let params = [];
|
||||
for (let i = 0; i < channels.length; i++) {
|
||||
if (channels[i].longitude * channels[i].latitude === 0) {
|
||||
continue;
|
||||
}
|
||||
let item = {
|
||||
position: [channels[i].longitude, channels[i].latitude],
|
||||
image: {
|
||||
src: this.getImageByChannel(channels[i]),
|
||||
anchor: [0.5, 1]
|
||||
},
|
||||
data: channels[i]
|
||||
}
|
||||
params.push(item);
|
||||
}
|
||||
console.log(3)
|
||||
|
||||
this.layer = this.$refs.map.addLayer(params, this.featureClickEvent)
|
||||
console.log(4)
|
||||
if (params.length === 1) {
|
||||
this.$refs.map.panTo([channels[0].longitude, channels[0].latitude], mapParam.maxZoom)
|
||||
} else if (params.length > 1) {
|
||||
this.$refs.map.fit(this.layer)
|
||||
} else {
|
||||
this.$message.error('未获取到位置信息');
|
||||
}
|
||||
} else {
|
||||
this.$message.error('未获取到位置信息');
|
||||
}
|
||||
},
|
||||
getImageByChannel: function (channel) {
|
||||
let src = "static/images/gis/camera.png"
|
||||
switch (channel.ptztype) {
|
||||
case 1:
|
||||
if (channel.status === 1) {
|
||||
src = "static/images/gis/camera1.png"
|
||||
} else {
|
||||
src = "static/images/gis/camera1-offline.png"
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (channel.status === 1) {
|
||||
src = "static/images/gis/camera2.png"
|
||||
} else {
|
||||
src = "static/images/gis/camera2-offline.png"
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if (channel.status === 1) {
|
||||
src = "static/images/gis/camera3.png"
|
||||
} else {
|
||||
src = "static/images/gis/camera3-offline.png"
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (channel.status === 1) {
|
||||
src = "static/images/gis/camera.png"
|
||||
} else {
|
||||
src = "static/images/gis/camera-offline.png"
|
||||
}
|
||||
}
|
||||
return src;
|
||||
},
|
||||
featureClickEvent: function (channels) {
|
||||
this.closeInfoBox()
|
||||
if (channels.length > 0) {
|
||||
this.channel = channels[0]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.infoBoxId = this.$refs.map.openInfoBox([this.channel.longitude, this.channel.latitude], this.$refs.infobox, [0, -50])
|
||||
})
|
||||
},
|
||||
closeInfoBox: function () {
|
||||
if (this.infoBoxId != null) {
|
||||
this.$refs.map.closeInfoBox(this.infoBoxId)
|
||||
}
|
||||
},
|
||||
play: function (channel) {
|
||||
|
||||
let deviceId = channel.deviceId;
|
||||
this.isLoging = true;
|
||||
let channelId = channel.channelId;
|
||||
console.log("通知设备推流1:" + deviceId + " : " + channelId);
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/play/start/' + deviceId + '/' + channelId
|
||||
}).then(function (res) {
|
||||
that.isLoging = false;
|
||||
if (res.data.code === 0) {
|
||||
|
||||
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
|
||||
streamInfo: res.data.data,
|
||||
hasAudio: channel.hasAudio
|
||||
});
|
||||
|
||||
} else {
|
||||
that.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
});
|
||||
},
|
||||
edit: function (data) {
|
||||
this.$message.warning('暂不支持');
|
||||
},
|
||||
getTrace: function (data) {
|
||||
// this.$message.warning('暂不支持');
|
||||
this.clean()
|
||||
this.$refs.queryTrace.openDialog(data, (channelPositions) => {
|
||||
console.log("getTrace")
|
||||
console.log(channelPositions)
|
||||
if (channelPositions.length === 0) {
|
||||
this.$message.success('未查询到轨迹信息');
|
||||
} else {
|
||||
let positions = [];
|
||||
for (let i = 0; i < channelPositions.length; i++) {
|
||||
if (channelPositions[i].cnLng * channelPositions[i].cnLat > 0) {
|
||||
positions.push([channelPositions[i].cnLng, channelPositions[i].cnLat])
|
||||
}
|
||||
|
||||
}
|
||||
if (positions.length === 0) {
|
||||
this.$message.success('未查询到轨迹信息');
|
||||
return;
|
||||
}
|
||||
this.lineLayer = this.$refs.map.addLineLayer(positions)
|
||||
this.$refs.map.fit(this.lineLayer)
|
||||
}
|
||||
})
|
||||
},
|
||||
clean: function (){
|
||||
if (this.lineLayer != null) {
|
||||
this.$refs.map.removeLayer(this.lineLayer)
|
||||
}
|
||||
if (this.infoBoxId != null) {
|
||||
this.$refs.map.closeInfoBox(this.infoBoxId)
|
||||
}
|
||||
if (this.layer != null) {
|
||||
this.$refs.map.removeLayer(this.layer)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.infobox-content{
|
||||
width: 260px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
.infobox-content::after {
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: 130px;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url('~@static/images/arrow.png') no-repeat center;
|
||||
}
|
||||
.infobox-close {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
color: #000000;
|
||||
cursor:pointer
|
||||
}
|
||||
.el-descriptions__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 20px 20px 0px 23px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div id="channelMapInfobox" style="display: none">
|
||||
<div >
|
||||
<el-descriptions class="margin-top" title="channel.name" :column="4" direction="vertical">
|
||||
<el-descriptions-item label="生产厂商">{{channel.manufacture}}</el-descriptions-item>
|
||||
<el-descriptions-item label="型号">{{channel.model}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备归属" >{{channel.owner}}</el-descriptions-item>
|
||||
<el-descriptions-item label="行政区域" >{{channel.civilCode}}</el-descriptions-item>
|
||||
<el-descriptions-item label="安装地址" >{{channel.address}}</el-descriptions-item>
|
||||
<el-descriptions-item label="云台类型" >{{channel.ptztypeText}}</el-descriptions-item>
|
||||
<el-descriptions-item label="经纬度" >{{channel.longitude}},{{channel.latitude}}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">
|
||||
<el-tag size="small" v-if="channel.status === 1">在线</el-tag>
|
||||
<el-tag size="small" v-if="channel.status === 0">离线</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import devicePlayer from '../dialog/devicePlayer.vue'
|
||||
|
||||
export default {
|
||||
name: "channelMapInfobox",
|
||||
props: ['channel'],
|
||||
computed: {devicePlayer},
|
||||
created() {},
|
||||
data() {
|
||||
return {
|
||||
showDialog: false,
|
||||
isLoging: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
play: function (){
|
||||
let deviceId = this.channel.deviceId;
|
||||
this.isLoging = true;
|
||||
let channelId = this.channel.channelId;
|
||||
console.log("通知设备推流1:" + deviceId + " : " + channelId);
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: '/api/play/start/' + deviceId + '/' + channelId
|
||||
}).then(function (res) {
|
||||
that.isLoging = false;
|
||||
if (res.data.code === 0) {
|
||||
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
|
||||
streamInfo: res.data.data,
|
||||
hasAudio: this.channel.hasAudio
|
||||
});
|
||||
} else {
|
||||
that.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
});
|
||||
},
|
||||
close: function () {
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div id="queryTrace" >
|
||||
<el-dialog
|
||||
title="查询轨迹"
|
||||
width="40%"
|
||||
top="2rem"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showDialog"
|
||||
:destroy-on-close="true"
|
||||
@close="close()"
|
||||
>
|
||||
<div v-loading="isLoging">
|
||||
<el-date-picker v-model="searchFrom" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
|
||||
<el-date-picker v-model="searchTo" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
|
||||
<el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">查询</el-button>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeviceService from '../service/DeviceService'
|
||||
|
||||
export default {
|
||||
name: "deviceEdit",
|
||||
props: [],
|
||||
computed: {},
|
||||
created() {},
|
||||
data() {
|
||||
return {
|
||||
deviceService: new DeviceService(),
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '今天',
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
}, {
|
||||
text: '昨天',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}, {
|
||||
text: '一周前',
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}]
|
||||
},
|
||||
searchFrom: null,
|
||||
searchTo: null,
|
||||
listChangeCallback: null,
|
||||
showDialog: false,
|
||||
isLoging: false,
|
||||
channel: null,
|
||||
callback: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog: function (channel, callback) {
|
||||
console.log(channel)
|
||||
this.showDialog = true;
|
||||
this.callback = callback;
|
||||
this.channel = channel;
|
||||
},
|
||||
|
||||
onSubmit: function () {
|
||||
console.log("onSubmit");
|
||||
this.isLoging = true;
|
||||
this.$axios.get(`/api/position/history/${this.channel.deviceId}/${this.channel.channelId}`, {
|
||||
}).then((res)=> {
|
||||
this.isLoging = false;
|
||||
if (typeof this.callback == "function") {
|
||||
if (res.data.code == 0) {
|
||||
this.callback(res.data.data)
|
||||
this.close()
|
||||
}else {
|
||||
this.$message.error(res.data.msg);
|
||||
}
|
||||
|
||||
}
|
||||
}).catch(function (error) {
|
||||
this.isLoging = false;
|
||||
console.error(error);
|
||||
})
|
||||
},
|
||||
close: function () {
|
||||
this.showDialog = false;
|
||||
this.isLoging = false;
|
||||
this.callback = null;
|
||||
this.channel = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
|
@ -1,44 +1,28 @@
|
|||
<template>
|
||||
<div id="devicePosition" style="height: 100%">
|
||||
<el-container style="height: 100%">
|
||||
<el-header>
|
||||
<uiHeader></uiHeader>
|
||||
</el-header>
|
||||
<el-container v-loading="loading" element-loading-text="拼命加载中" style="margin: 0 20px;">
|
||||
<el-aside width="300px" style="background-color: #ffffff">
|
||||
<div style="text-align: center;padding-top: 20px;">设备列表</div>
|
||||
<el-menu v-loading="loading">
|
||||
<el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
|
||||
<template slot="title" >
|
||||
<i class="el-icon-location-outline"></i>
|
||||
{{device.name}}
|
||||
</template>
|
||||
<ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<!-- <LivePlay></LivePlay> -->
|
||||
<el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
|
||||
分屏:
|
||||
<i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
|
||||
<i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
|
||||
<i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;">
|
||||
<div v-for="i in spilt" :key="i" class="play-box"
|
||||
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
|
||||
@click="playerIdx = (i-1)"
|
||||
>
|
||||
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
|
||||
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
|
||||
:containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
|
||||
<!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div id="devicePosition" style="width:100vw; height: 91vh">
|
||||
<el-container v-loading="loading" style="height: 91vh;" element-loading-text="拼命加载中" >
|
||||
<el-aside width="300px" style="background-color: #ffffff">
|
||||
<DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
|
||||
分屏:
|
||||
<i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
|
||||
<i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
|
||||
<i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
|
||||
</el-header>
|
||||
<el-main style="padding: 0;">
|
||||
<div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;">
|
||||
<div v-for="i in spilt" :key="i" class="play-box"
|
||||
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
|
||||
@click="playerIdx = (i-1)"
|
||||
>
|
||||
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
|
||||
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
|
||||
:containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
|
@ -46,13 +30,13 @@
|
|||
|
||||
<script>
|
||||
import uiHeader from "../layout/UiHeader.vue";
|
||||
import player from './dialog/jessibuca.vue'
|
||||
import ChannelTree from './channelTree.vue'
|
||||
import player from './common/jessibuca.vue'
|
||||
import DeviceTree from './common/DeviceTree.vue'
|
||||
|
||||
export default {
|
||||
name: "live",
|
||||
components: {
|
||||
uiHeader, player, ChannelTree
|
||||
uiHeader, player, DeviceTree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -127,33 +111,17 @@
|
|||
clearTimeout(this.updateLooper);
|
||||
},
|
||||
methods: {
|
||||
initData: function () {
|
||||
this.getDeviceList();
|
||||
|
||||
},
|
||||
destroy(idx) {
|
||||
console.log(idx);
|
||||
this.clear(idx.substring(idx.length-1))
|
||||
},
|
||||
getDeviceList: function() {
|
||||
let that = this;
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url:`/api/device/query/devices`,
|
||||
params: {
|
||||
page: that.currentPage,
|
||||
count: that.count
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res.data.list);
|
||||
that.total = res.data.total;
|
||||
clickEvent: function (data) {
|
||||
if (data.channelId && data.subCount == 0) {
|
||||
this.sendDevicePush(data)
|
||||
}
|
||||
},
|
||||
contextMenuEvent: function (data) {
|
||||
|
||||
that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}});
|
||||
that.getDeviceListLoading = false;
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
that.getDeviceListLoading = false;
|
||||
});
|
||||
},
|
||||
//通知设备上传媒体流
|
||||
sendDevicePush: function (itemData) {
|
||||
|
|
|
@ -32,7 +32,6 @@ class DeviceService{
|
|||
|
||||
getAllDeviceListIteration(deviceList, currentPage, count, callback, errorCallback) {
|
||||
this.getDeviceList(currentPage, count, (data) => {
|
||||
console.log(data)
|
||||
if (data.list) {
|
||||
deviceList = deviceList.concat(data.list);
|
||||
if (deviceList.length < data.total) {
|
||||
|
@ -55,14 +54,13 @@ class DeviceService{
|
|||
|
||||
getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback) {
|
||||
this.getChanel(isCatalog, deviceId, currentPage, count, (data) => {
|
||||
console.log(data)
|
||||
if (data.list) {
|
||||
catalogList = catalogList.concat(data.list);
|
||||
if (catalogList.length < data.total) {
|
||||
currentPage ++
|
||||
this.getAllChannelIteration(isCatalog, deviceId, catalogList, currentPage, count, callback, errorCallback)
|
||||
}else {
|
||||
console.log(2222)
|
||||
console.log(1)
|
||||
if (typeof (callback) == "function") callback(catalogList)
|
||||
}
|
||||
}
|
||||
|
@ -94,7 +92,6 @@ class DeviceService{
|
|||
|
||||
getAllSubChannelIteration(isCatalog, deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
|
||||
this.getSubChannel(isCatalog, deviceId, channelId, currentPage, count, (data) => {
|
||||
console.log(data)
|
||||
if (data.list) {
|
||||
catalogList = catalogList.concat(data.list);
|
||||
if (catalogList.length < data.total) {
|
||||
|
@ -121,16 +118,6 @@ class DeviceService{
|
|||
if (typeof (callback) == "function") callback(res.data)
|
||||
}).catch(errorCallback);
|
||||
}
|
||||
getDeviceTree(deviceId, callback, errorCallback){
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/device/query/${deviceId}/tree`,
|
||||
params:{}
|
||||
}).then((res) =>{
|
||||
console.log(res.data)
|
||||
if (typeof (callback) == "function") callback(res.data.data)
|
||||
}).catch(errorCallback);
|
||||
}
|
||||
}
|
||||
|
||||
export default DeviceService;
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<el-menu-item index="/control">控制台</el-menu-item>
|
||||
<el-menu-item index="/live">实时监控</el-menu-item>
|
||||
<el-menu-item index="/deviceList">国标设备</el-menu-item>
|
||||
<el-menu-item index="/map">电子地图</el-menu-item>
|
||||
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
|
||||
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
|
||||
<el-menu-item index="/cloudRecord">云端录像</el-menu-item>
|
||||
|
@ -47,7 +48,6 @@ export default {
|
|||
if (this.$route.path.startsWith("/channelList")) {
|
||||
this.activeIndex = "/deviceList"
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||
|
|
|
@ -108,6 +108,11 @@ export default new VueRouter({
|
|||
name: 'rtcPlayer',
|
||||
component: rtcPlayer,
|
||||
},
|
||||
{
|
||||
path: '/map',
|
||||
name: 'devicePosition',
|
||||
component: devicePosition,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 9.8 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 13 KiB |