Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
46cb4c0b6d
|
|
@ -41,4 +41,11 @@ public class DigitalSignageController {
|
|||
public ServerResponse getTowerProgressNum(EncryptedReq<QueryParamDto> dto) {
|
||||
return service.getTowerProgressNum(dto.getData());
|
||||
}
|
||||
|
||||
@ApiOperation("电子看板-三跨数据")
|
||||
@PostMapping(value = "getThreeSpans")
|
||||
@DecryptAndVerify(decryptedClass = QueryParamDto.class)//加解密统一管理
|
||||
public ServerResponse getThreeSpans(EncryptedReq<QueryParamDto> dto) {
|
||||
return service.getThreeSpans(dto.getData());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,4 +42,13 @@ public interface DigitalSignageDao {
|
|||
* @date 2025/4/24 13:59
|
||||
*/
|
||||
int getRopewayTransNum(QueryParamDto dto);
|
||||
|
||||
/**
|
||||
* 电子看板-三跨数据
|
||||
* @param dto
|
||||
* @return List<ThreeSpanVo>
|
||||
* @author cwchen
|
||||
* @date 2025/4/24 14:50
|
||||
*/
|
||||
List<DigitalSignageVo.ThreeSpanVo> getThreeSpans(QueryParamDto dto);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,23 +14,99 @@ public class DigitalSignageVo {
|
|||
|
||||
@Data
|
||||
public static class TowerProgressNumVo {
|
||||
/**基础开挖*/
|
||||
/**
|
||||
* 基础开挖
|
||||
*/
|
||||
private int num1;
|
||||
/**开挖完成*/
|
||||
/**
|
||||
* 开挖完成
|
||||
*/
|
||||
private int num2;
|
||||
/**浇筑完成*/
|
||||
/**
|
||||
* 浇筑完成
|
||||
*/
|
||||
private int num3;
|
||||
/**铁塔组立*/
|
||||
/**
|
||||
* 铁塔组立
|
||||
*/
|
||||
private int num4;
|
||||
/**组塔完成*/
|
||||
/**
|
||||
* 组塔完成
|
||||
*/
|
||||
private int num5;
|
||||
/**架线完成*/
|
||||
/**
|
||||
* 架线完成
|
||||
*/
|
||||
private int num6;
|
||||
/**附件安装*/
|
||||
/**
|
||||
* 附件安装
|
||||
*/
|
||||
private int num7;
|
||||
/**未开始*/
|
||||
/**
|
||||
* 未开始
|
||||
*/
|
||||
private int num8;
|
||||
/**索道运输*/
|
||||
/**
|
||||
* 索道运输
|
||||
*/
|
||||
private int num9;
|
||||
}
|
||||
|
||||
@Data
|
||||
public static class ThreeSpanVo {
|
||||
|
||||
/**
|
||||
* 跨越类型 1.跨线路 2.跨公路 3.跨铁路
|
||||
*/
|
||||
private String spanType;
|
||||
/**
|
||||
* 开始杆塔id
|
||||
*/
|
||||
private Long towerId;
|
||||
/**
|
||||
* 结束杆塔id
|
||||
*/
|
||||
private String towerName;
|
||||
/**
|
||||
* 开始杆塔名称
|
||||
*/
|
||||
private Long nextTowerId;
|
||||
/**
|
||||
* 结束杆塔名称
|
||||
*/
|
||||
private String nextTowerName;
|
||||
/**
|
||||
* 上层线路
|
||||
*/
|
||||
private String upperLine;
|
||||
/**
|
||||
* 下层线路
|
||||
*/
|
||||
private String lowerLine;
|
||||
/**
|
||||
* 交叉角度
|
||||
*/
|
||||
private String intersectionAngle;
|
||||
/**
|
||||
* 垂直距离（m）
|
||||
*/
|
||||
private String verticalDistance;
|
||||
/**
|
||||
* 安全裕度（°）
|
||||
*/
|
||||
private String safetyMargin;
|
||||
/**
|
||||
* 垂直净距（m）
|
||||
*/
|
||||
private String verticalClearDistance;
|
||||
/**
|
||||
* 杆塔间距（m）
|
||||
*/
|
||||
private String towerSpacing;
|
||||
/**
|
||||
* 公路宽度（m）
|
||||
*/
|
||||
private String highwayWidth;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,4 +28,13 @@ public interface DigitalSignageService {
|
|||
* @date 2025/4/24 13:52
|
||||
*/
|
||||
ServerResponse getTowerProgressNum(QueryParamDto data);
|
||||
|
||||
/**
|
||||
* 电子看板-三跨数据
|
||||
* @param data
|
||||
* @return ServerResponse
|
||||
* @author cwchen
|
||||
* @date 2025/4/24 14:48
|
||||
*/
|
||||
ServerResponse getThreeSpans(QueryParamDto data);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,4 +78,15 @@ public class DigitalSignageServiceImpl implements DigitalSignageService {
|
|||
}
|
||||
return ServerResponse.createSuccess(vo);
|
||||
}
|
||||
|
||||
@Override
|
||||
public ServerResponse getThreeSpans(QueryParamDto dto) {
|
||||
List<DigitalSignageVo.ThreeSpanVo> list = new ArrayList<>();
|
||||
try {
|
||||
list = Optional.ofNullable(dao.getThreeSpans(dto)).orElseGet(ArrayList::new);
|
||||
} catch (Exception e) {
|
||||
log.error(e.toString(), e);
|
||||
}
|
||||
return ServerResponse.createSuccess(list);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
package com.bonus.digitalSignage.basic.controller;
|
||||
|
||||
import com.bonus.digitalSignage.annotation.DecryptAndVerify;
|
||||
import com.bonus.digitalSignage.annotation.LogAnnotation;
|
||||
import com.bonus.digitalSignage.backstage.entity.dto.QueryParamDto;
|
||||
import com.bonus.digitalSignage.basic.service.TbProjectService;
|
||||
import com.bonus.digitalSignage.basic.vo.TbProjectVo;
|
||||
import com.bonus.digitalSignage.system.vo.EncryptedReq;
|
||||
import com.bonus.digitalSignage.utils.ServerResponse;
|
||||
import com.github.pagehelper.PageHelper;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
|
||||
/**
|
||||
* @author 马三炮
|
||||
* @date 2025/4/24
|
||||
*/
|
||||
@RestController
|
||||
@RequestMapping("/tbProject")
|
||||
@Slf4j
|
||||
public class TbProjectController {
|
||||
|
||||
@Resource
|
||||
private TbProjectService tbProjectService;
|
||||
|
||||
/**
|
||||
* 线路工程管理-查询列表
|
||||
* @param dto
|
||||
* @return
|
||||
*/
|
||||
@PostMapping(value = "getTbProjectList")
|
||||
@DecryptAndVerify(decryptedClass = TbProjectVo.class)//加解密统一管理
|
||||
@LogAnnotation(operModul = "基础管理-线路工程管理", operation = "查询列表", operDesc = "系统级事件",operType="查询")
|
||||
public ServerResponse getTbProjectList(EncryptedReq<TbProjectVo> dto) {
|
||||
PageHelper.startPage(dto.getData().getPageNum(), dto.getData().getPageSize());
|
||||
return tbProjectService.getTbProjectList(dto.getData());
|
||||
}
|
||||
|
||||
/**
|
||||
* 线路工程管理-查询详情
|
||||
* @param dto
|
||||
* @return
|
||||
*/
|
||||
@PostMapping(value = "getTbProjectById")
|
||||
@DecryptAndVerify(decryptedClass = TbProjectVo.class)//加解密统一管理
|
||||
@LogAnnotation(operModul = "基础管理-线路工程管理", operation = "查询详情", operDesc = "系统级事件",operType="查询")
|
||||
public ServerResponse getTbProjectById(EncryptedReq<TbProjectVo> dto) {
|
||||
return tbProjectService.getTbProjectById(dto.getData());
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
package com.bonus.digitalSignage.basic.dao;
|
||||
|
||||
import com.bonus.digitalSignage.basic.vo.TbProjectVo;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public interface TbProjectMapper {
|
||||
List<TbProjectVo> getTbProjectList(TbProjectVo data);
|
||||
|
||||
TbProjectVo getTbProjectById(TbProjectVo data);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
package com.bonus.digitalSignage.basic.service;
|
||||
|
||||
import com.bonus.digitalSignage.basic.vo.TbProjectVo;
|
||||
import com.bonus.digitalSignage.utils.ServerResponse;
|
||||
|
||||
public interface TbProjectService {
|
||||
/**
|
||||
* 线路工程管理-查询列表
|
||||
* @param data
|
||||
* @return
|
||||
*/
|
||||
ServerResponse getTbProjectList(TbProjectVo data);
|
||||
|
||||
/**
|
||||
* 线路工程管理-查询详情
|
||||
* @param data
|
||||
* @return
|
||||
*/
|
||||
ServerResponse getTbProjectById(TbProjectVo data);
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
package com.bonus.digitalSignage.basic.service.impl;
|
||||
|
||||
import com.bonus.digitalSignage.backstage.entity.vo.ProProgressVo;
|
||||
import com.bonus.digitalSignage.basic.dao.TbProjectMapper;
|
||||
import com.bonus.digitalSignage.basic.service.TbProjectService;
|
||||
import com.bonus.digitalSignage.basic.vo.TbProjectVo;
|
||||
import com.bonus.digitalSignage.utils.ServerResponse;
|
||||
import com.github.pagehelper.PageInfo;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* @author 马三炮
|
||||
* @date 2025/4/24
|
||||
*/
|
||||
@Service
|
||||
@Slf4j
|
||||
public class TbProjectServiceImpl implements TbProjectService {
|
||||
|
||||
@Resource
|
||||
private TbProjectMapper tbProjectMapper;
|
||||
|
||||
/**
|
||||
* 线路工程管理-查询列表
|
||||
* @param data
|
||||
* @return
|
||||
*/
|
||||
@Override
|
||||
public ServerResponse getTbProjectList(TbProjectVo data) {
|
||||
List<TbProjectVo> tbProjectVoList = tbProjectMapper.getTbProjectList(data);
|
||||
PageInfo<TbProjectVo> pageInfo = new PageInfo<>(tbProjectVoList);
|
||||
return ServerResponse.createSuccessPage(pageInfo, data.getPageNum(), data.getPageSize());
|
||||
}
|
||||
|
||||
@Override
|
||||
public ServerResponse getTbProjectById(TbProjectVo data) {
|
||||
TbProjectVo tbProject = tbProjectMapper.getTbProjectById(data);
|
||||
return ServerResponse.createSuccess(tbProject);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
package com.bonus.digitalSignage.basic.vo;
|
||||
|
||||
import lombok.Data;
|
||||
|
||||
import java.util.Date;
|
||||
|
||||
/**
|
||||
* @author 马三炮
|
||||
* @date 2025/4/24
|
||||
*/
|
||||
@Data
|
||||
public class TbProjectVo {
|
||||
|
||||
/**
|
||||
* id
|
||||
*/
|
||||
private Long id;
|
||||
|
||||
/**
|
||||
* 项目部id
|
||||
*/
|
||||
private Long departId;
|
||||
|
||||
/**
|
||||
* 工程名称
|
||||
*/
|
||||
private String proName;
|
||||
|
||||
/**
|
||||
* 电压等级（电压等级）
|
||||
*/
|
||||
private String voltageLevel;
|
||||
|
||||
/**
|
||||
* 线路长度（单位km）
|
||||
*/
|
||||
private String lineLength;
|
||||
|
||||
/**
|
||||
* 计划开始时间
|
||||
*/
|
||||
private String planStartTime;
|
||||
|
||||
/**
|
||||
* 计划完工时间
|
||||
*/
|
||||
private String planEndTime;
|
||||
|
||||
/**
|
||||
* 经度
|
||||
*/
|
||||
private String lon;
|
||||
|
||||
/**
|
||||
* 纬度
|
||||
*/
|
||||
private String lat;
|
||||
|
||||
/**
|
||||
* 工程地址
|
||||
*/
|
||||
private String address;
|
||||
|
||||
/**
|
||||
* 工程状态（字典表配置）
|
||||
*/
|
||||
private String proStatus;
|
||||
|
||||
/**
|
||||
* 项目进度（实时更新）
|
||||
*/
|
||||
private String proProgress;
|
||||
|
||||
/**
|
||||
* 是否可用 1.可用 0.不可用
|
||||
*/
|
||||
private String isActive;
|
||||
|
||||
/**
|
||||
* 创建时间
|
||||
*/
|
||||
private Date createTime;
|
||||
|
||||
/**
|
||||
* 更新时间
|
||||
*/
|
||||
private Date updateTime;
|
||||
|
||||
/**
|
||||
* 创建人
|
||||
*/
|
||||
private Date createUserId;
|
||||
|
||||
/**
|
||||
* 修改人
|
||||
*/
|
||||
private Date updateUserId;
|
||||
|
||||
private int pageNum = 1;
|
||||
private int pageSize = 10;
|
||||
}
|
||||
|
|
@ -60,4 +60,26 @@
|
|||
FROM tb_cablewa_trans
|
||||
WHERE pro_id = #{id} AND is_active = '1'
|
||||
</select>
|
||||
<!--电子看板-三跨数据-->
|
||||
<select id="getThreeSpans"
|
||||
resultType="com.bonus.digitalSignage.backstage.entity.vo.DigitalSignageVo$ThreeSpanVo">
|
||||
SELECT tts.id,
|
||||
tts.tower_id AS towerId,
|
||||
tt.tower_name AS towerName,
|
||||
CASE span_type WHEN '1' THEN '跨线路' WHEN '2' THEN '跨公路' WHEN '3' THEN '跨铁路' ELSE '未知' END AS spanType,
|
||||
tts.next_tower_id AS nextTowerId,
|
||||
tt2.tower_name AS nextTowerName,
|
||||
tts.upper_line AS upperLine,
|
||||
tts.lower_line AS lowerLine,
|
||||
tts.intersection_angle AS intersectionAngle,
|
||||
tts.vertical_distance AS verticalDistance,
|
||||
tts.safety_margin AS safetyMargin,
|
||||
tts.vertical_clear_distance AS verticalClearDistance,
|
||||
tts.tower_spacing AS towerSpacing,
|
||||
tts.highway_width AS highwayWidth
|
||||
FROM tb_three_span tts
|
||||
LEFT JOIN tb_tower tt ON tts.tower_id = tt.id
|
||||
LEFT JOIN tb_tower tt2 ON tts.tower_id = tt2.id
|
||||
WHERE tts.pro_id = #{id} AND is_active = '1'
|
||||
</select>
|
||||
</mapper>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
||||
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
<mapper namespace="com.bonus.digitalSignage.basic.dao.TbProjectMapper">
|
||||
|
||||
<select id="getTbProjectList" resultType="com.bonus.digitalSignage.basic.vo.TbProjectVo">
|
||||
select tp.pro_name as proName,A.dict_name as voltageLevel,tp.line_length as lineLength,
|
||||
tp.plan_start_time as planStartTime,tp.plan_end_time as planEndTime,tp.lon as lon,tp.lat as lat,
|
||||
tp.address as address,B.dict_name as pro_status
|
||||
from tb_project tp
|
||||
LEFT JOIN (
|
||||
SELECT sd.dict_value,sd.dict_name
|
||||
FROM sys_distinct sd
|
||||
LEFT JOIN sys_distinct sd2 ON sd.p_id = sd2.id
|
||||
WHERE sd2.dict_code = 'voltage_level' AND sd.del_flag = 0
|
||||
) A ON A.dict_value = tp.voltage_level
|
||||
LEFT JOIN (
|
||||
SELECT sd.dict_value,sd.dict_name
|
||||
FROM sys_distinct sd
|
||||
LEFT JOIN sys_distinct sd2 ON sd.p_id = sd2.id
|
||||
WHERE sd2.dict_code = 'pro_status' AND sd.del_flag = 0
|
||||
) B ON B.dict_value = tp.voltage_level
|
||||
where tp.is_active = '1'
|
||||
</select>
|
||||
<select id="getTbProjectById" resultType="com.bonus.digitalSignage.basic.vo.TbProjectVo">
|
||||
select tp.pro_name as proName,tp.voltage_level as voltageLevel,tp.line_length as lineLength,
|
||||
tp.plan_start_time as planStartTime,tp.plan_end_time as planEndTime,tp.lon as lon,tp.lat as lat,
|
||||
tp.address as address,B.pro_status as pro_status
|
||||
from tb_project tp where id = #{id}
|
||||
</select>
|
||||
</mapper>
|
||||
|
|
@ -42,7 +42,8 @@ body {
|
|||
}
|
||||
|
||||
.scroll-box,
|
||||
.legend-box {
|
||||
.legend-box,
|
||||
.right-drawer-box {
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
|
|
@ -136,3 +137,138 @@ body {
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
/* min-width: 150px; */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.map-container h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.map-container-item {
|
||||
padding: 4px 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.map-container-item span:first-child {
|
||||
width: 160px;
|
||||
}
|
||||
.map-container-item span:last-child {
|
||||
min-width: 120px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 索道信息窗口样式 */
|
||||
.map-container-item-ropeway span:first-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.map-container-item-ropeway span:last-child {
|
||||
margin-left: 4px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
/* 交叉信息窗口样式 */
|
||||
.map-container-cross {
|
||||
display: flex;
|
||||
}
|
||||
.map-container-cross .map-container-1 {
|
||||
width: 260px;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.map-container-cross .map-container-2 {
|
||||
width: 220px;
|
||||
padding: 10px;
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.map-container-cross .map-container-2 h4 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* 右侧抽屉 */
|
||||
.right-drawer-box {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
height: 90%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: right 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 打开弹框的三角 */
|
||||
.open-drawer-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 20px 20px 0;
|
||||
border-color: transparent #d7d7d7 transparent transparent;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-drawer-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 20px 0px 20px 20px;
|
||||
border-color: transparent transparent transparent #d7d7d7;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 当抽屉打开时，隐藏三角按钮 */
|
||||
.right-drawer-box.open ~ .open-drawer-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.organization-tree-box {
|
||||
padding: 20px;
|
||||
height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.layui-tree-txt {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-tree-icon .layui-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
|
||||
color: #dfd8d8 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,405 @@
|
|||
const map = new BMapGL.Map("map-box"); // 创建Map实例
|
||||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||||
let map = null;
|
||||
|
||||
// 地图配置项
|
||||
const config = {
|
||||
points: [
|
||||
{
|
||||
lng: 116.254, // 向西偏移
|
||||
lat: 39.965, // 向北偏移
|
||||
title: "点1",
|
||||
type: 1,
|
||||
isCompleted: true, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.263, // 保持适当距离
|
||||
lat: 39.972,
|
||||
title: "点2",
|
||||
type: 1,
|
||||
isCompleted: true, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.275, // 平滑过渡
|
||||
lat: 39.958,
|
||||
title: "点3",
|
||||
type: 1,
|
||||
isCompleted: true, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.285, // 继续向东
|
||||
lat: 39.945,
|
||||
title: "点4",
|
||||
type: 2,
|
||||
isCompleted: true, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.298, // 向南偏移
|
||||
lat: 39.935,
|
||||
title: "点5",
|
||||
type: 2,
|
||||
isCompleted: false, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.305, // 保持连贯性
|
||||
lat: 39.925,
|
||||
title: "点6",
|
||||
type: 2,
|
||||
isCompleted: false, // 是否完成
|
||||
isCrossing: false, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.315, // 最终点
|
||||
lat: 39.915,
|
||||
title: "点7",
|
||||
type: 3,
|
||||
isCompleted: false, // 是否完成
|
||||
isCrossing: true, // 是否跨越
|
||||
},
|
||||
{
|
||||
lng: 116.325, // 最远点
|
||||
lat: 39.905,
|
||||
title: "点8",
|
||||
type: 9,
|
||||
isCompleted: false, // 是否完成
|
||||
isCrossing: true, // 是否跨越
|
||||
},
|
||||
],
|
||||
polyline: {
|
||||
strokeColor: "#3388ff", // 线条颜色
|
||||
strokeWeight: 3, // 线条宽度
|
||||
strokeOpacity: 0.8, // 透明度
|
||||
strokeStyle: "dashed", // solid(实线)或dashed(虚线)
|
||||
enableEditing: false, // 是否可编辑
|
||||
enableClicking: true, // 是否可点击
|
||||
},
|
||||
};
|
||||
|
||||
// 百度地图初始化
|
||||
function initMap() {
|
||||
map = new BMapGL.Map("map-box");
|
||||
// 以第一个点为中心初始化地图
|
||||
map.centerAndZoom(
|
||||
new BMapGL.Point(config.points[0].lng, config.points[0].lat),
|
||||
11
|
||||
);
|
||||
map.enableScrollWheelZoom(true);
|
||||
|
||||
map.setMapStyleV2({
|
||||
// styleJson: [
|
||||
// {
|
||||
// featureType: "background",
|
||||
// elementType: "geometry",
|
||||
// stylers: {
|
||||
// color: "#f5f5f5", // 浅灰色背景
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// featureType: "road",
|
||||
// elementType: "geometry",
|
||||
// stylers: {
|
||||
// visibility: "off", // 隐藏道路
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
});
|
||||
// map.setMapType(BMAP_EARTH_MAP); // 地球模式
|
||||
// map.setDisplayOptions({
|
||||
// poiText: false, // 隐藏POI文字
|
||||
// poiIcon: false, // 隐藏POI图标
|
||||
// building: false, // 隐藏建筑物
|
||||
// });
|
||||
|
||||
// 添加地图控件（可选）
|
||||
// map.addControl(new BMapGL.NavigationControl());
|
||||
// map.addControl(new BMapGL.ScaleControl());
|
||||
|
||||
// 地图加载完成后添加标点和折线
|
||||
map.addEventListener("tilesloaded", function () {
|
||||
addAllMapPoints();
|
||||
addMapLine();
|
||||
});
|
||||
}
|
||||
|
||||
// 添加标点
|
||||
function addAllMapPoints() {
|
||||
// 清除地图上所有现有的标记
|
||||
map.clearOverlays();
|
||||
|
||||
const bounds = [];
|
||||
const iconTypeList = {
|
||||
1: "/gzDigitalSignage/img/digitalSignage/yellow.png",
|
||||
2: "/gzDigitalSignage/img/digitalSignage/green.png",
|
||||
3: "/gzDigitalSignage/img/digitalSignage/blue.png",
|
||||
4: "/gzDigitalSignage/img/digitalSignage/orange.png",
|
||||
5: "/gzDigitalSignage/img/digitalSignage/zt_red.png",
|
||||
6: "/gzDigitalSignage/img/digitalSignage/zt_purple.png",
|
||||
7: "/gzDigitalSignage/img/digitalSignage/zt_green.png",
|
||||
8: "/gzDigitalSignage/img/digitalSignage/white.png",
|
||||
9: "/gzDigitalSignage/img/digitalSignage/sd.png",
|
||||
};
|
||||
|
||||
// 使用对象记录已添加的点，避免重复
|
||||
const addedPoints = {};
|
||||
|
||||
config.points.forEach((pointData, index) => {
|
||||
const pointKey = `${pointData.lng},${pointData.lat}`;
|
||||
|
||||
// 如果该坐标点已经添加过标记，则跳过
|
||||
if (addedPoints[pointKey]) {
|
||||
console.warn(`重复的点坐标被跳过: ${pointKey}`);
|
||||
return;
|
||||
}
|
||||
|
||||
addedPoints[pointKey] = true;
|
||||
const point = new BMapGL.Point(pointData.lng, pointData.lat);
|
||||
bounds.push(point);
|
||||
|
||||
// 检查图标是否存在，不存在则使用默认图标
|
||||
const iconUrl = iconTypeList[pointData.type] || iconTypeList[1]; // 默认使用第一个图标
|
||||
const myIcon = new BMapGL.Icon(iconUrl, new BMapGL.Size(30, 32), {
|
||||
anchor: new BMapGL.Size(8, 35), // 修正锚点位置为中心底部
|
||||
imageSize: new BMapGL.Size(30, 32), // 与实际图片尺寸一致
|
||||
});
|
||||
|
||||
const marker = new BMapGL.Marker(point, { icon: myIcon });
|
||||
|
||||
// 添加信息窗口
|
||||
|
||||
let infoContent = "";
|
||||
|
||||
if (pointData.type === 9) {
|
||||
// 索道
|
||||
infoContent = `
|
||||
<div class="map-container">
|
||||
<h4>
|
||||
索道运输
|
||||
</h4>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>索道位置</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>索道长度</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>最大载重</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>安全距离</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>最大坡度</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
</div>`;
|
||||
} else if (pointData.isCrossing) {
|
||||
// 交叉信息
|
||||
infoContent = `
|
||||
<div class="map-container-cross">
|
||||
<div class="map-container-1 map-container">
|
||||
<h4>
|
||||
${pointData.title}
|
||||
</h4>
|
||||
<div class="map-container-item">
|
||||
<span>基础开挖</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>基础开挖完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>基础浇筑完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>铁塔组立</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>铁塔组立完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>架线施工完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-container-2 map-container">
|
||||
<h4>
|
||||
交叉跨越信息 ( ${pointData.title} )
|
||||
</h4>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>上层线路</span>
|
||||
<span>550V宁安线</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>下层线路</span>
|
||||
<span>220V宁安线</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>交叉角度</span>
|
||||
<span>78.5°</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>垂直距离</span>
|
||||
<span>12.8m</span>
|
||||
</div>
|
||||
<div class="map-container-item-ropeway">
|
||||
<span>安全裕度</span>
|
||||
<span>4.8m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
} else {
|
||||
// 普通信息
|
||||
infoContent = `
|
||||
<div class="map-container">
|
||||
<h4>
|
||||
${pointData.title}
|
||||
</h4>
|
||||
<div class="map-container-item">
|
||||
<span>基础开挖</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>基础开挖完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>基础浇筑完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>铁塔组立</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>铁塔组立完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
<div class="map-container-item">
|
||||
<span>架线施工完成</span>
|
||||
<span>2025-04-24</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 创建信息窗口，禁用默认样式
|
||||
const infoWindow = new BMapGL.InfoWindow(infoContent, {
|
||||
width: 0, // 宽度设为0，让内容决定宽度
|
||||
height: 0, // 高度设为0，让内容决定高度
|
||||
offset: new BMapGL.Size(0, -20), // 调整偏移量
|
||||
enableAutoPan: true, // 自动平移地图
|
||||
enableCloseOnClick: true, // 点击地图不关闭
|
||||
});
|
||||
|
||||
marker.addEventListener("click", function () {
|
||||
this.openInfoWindow(infoWindow);
|
||||
|
||||
// 移除百度地图默认添加的三角箭头
|
||||
setTimeout(() => {
|
||||
const infoWindowElements =
|
||||
document.getElementsByClassName("BMap_bubble_pop");
|
||||
if (infoWindowElements.length > 0) {
|
||||
const popup = infoWindowElements[0];
|
||||
// 移除箭头元素
|
||||
const arrows =
|
||||
popup.getElementsByClassName("BMap_bubble_arrow");
|
||||
while (arrows[0]) {
|
||||
arrows[0].parentNode.removeChild(arrows[0]);
|
||||
}
|
||||
// 移除百度地图添加的额外样式
|
||||
popup.style.background = "none";
|
||||
popup.style.border = "none";
|
||||
popup.style.boxShadow = "none";
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
|
||||
map.addOverlay(marker);
|
||||
});
|
||||
|
||||
// 调整视野使所有点可见
|
||||
if (bounds.length > 0) {
|
||||
map.setViewport(bounds);
|
||||
}
|
||||
}
|
||||
|
||||
// 添加标点折线（智能绘制虚实线）
|
||||
function addMapLine() {
|
||||
if (config.points.length < 2) return;
|
||||
|
||||
// 存储所有线段
|
||||
const segments = [];
|
||||
|
||||
// 遍历点数组，创建线段
|
||||
for (let i = 0; i < config.points.length - 1; i++) {
|
||||
const startPoint = config.points[i];
|
||||
const endPoint = config.points[i + 1];
|
||||
|
||||
// 判断两点是否都已完成
|
||||
const isSegmentCompleted =
|
||||
startPoint.isCompleted && endPoint.isCompleted;
|
||||
|
||||
// 创建线段点数组
|
||||
const segmentPoints = [
|
||||
new BMapGL.Point(startPoint.lng, startPoint.lat),
|
||||
new BMapGL.Point(endPoint.lng, endPoint.lat),
|
||||
];
|
||||
|
||||
// 设置线段样式
|
||||
const segmentOptions = {
|
||||
strokeColor: getSegmentColor(startPoint, endPoint), // 根据类型获取颜色
|
||||
strokeWeight: config.polyline.strokeWeight,
|
||||
strokeOpacity: config.polyline.strokeOpacity,
|
||||
enableEditing: config.polyline.enableEditing,
|
||||
enableClicking: config.polyline.enableClicking,
|
||||
strokeStyle: isSegmentCompleted ? "solid" : "dashed",
|
||||
};
|
||||
|
||||
// 如果是虚线，设置虚线样式
|
||||
if (!isSegmentCompleted) {
|
||||
segmentOptions.strokeDashArray = [10, 5];
|
||||
segmentOptions.strokeOpacity = 0.6; // 虚线透明度降低
|
||||
}
|
||||
|
||||
// 创建线段并添加到数组
|
||||
segments.push(new BMapGL.Polyline(segmentPoints, segmentOptions));
|
||||
}
|
||||
|
||||
// 将所有线段添加到地图
|
||||
segments.forEach((segment) => map.addOverlay(segment));
|
||||
}
|
||||
|
||||
// 根据点类型获取线段颜色
|
||||
function getSegmentColor(startPoint, endPoint) {
|
||||
// 如果两点类型相同，使用该类型对应颜色
|
||||
if (startPoint.type === endPoint.type) {
|
||||
switch (startPoint.type) {
|
||||
case 1:
|
||||
return "#3388ff"; // 类型1蓝色
|
||||
case 2:
|
||||
return "#ff9900"; // 类型2橙色
|
||||
case 3:
|
||||
return "#33cc33"; // 类型3绿色
|
||||
default:
|
||||
return config.polyline.strokeColor;
|
||||
}
|
||||
}
|
||||
// 类型不同使用默认颜色
|
||||
return config.polyline.strokeColor;
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
initMap();
|
||||
|
||||
// 获取左上角滚动数据源
|
||||
function getScrollData() {
|
||||
|
|
@ -141,13 +540,101 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
// 启动动画
|
||||
requestAnimationFrame(animateScroll);
|
||||
|
||||
// 鼠标悬停时暂停滚动
|
||||
scrollContent.addEventListener("mouseenter", function () {
|
||||
scrollSpeed = 0;
|
||||
// // 鼠标悬停时暂停滚动
|
||||
// scrollContent.addEventListener("mouseenter", function () {
|
||||
// scrollSpeed = 0;
|
||||
// });
|
||||
|
||||
// scrollContent.addEventListener("mouseleave", function () {
|
||||
// scrollSpeed = 30; // 恢复原始速度
|
||||
// });
|
||||
|
||||
const drawer = document.querySelector(".right-drawer-box");
|
||||
const openBtn = document.querySelector(".open-drawer-box");
|
||||
const closeBtn = document.querySelector(".close-drawer-btn");
|
||||
|
||||
// 点击三角按钮打开抽屉
|
||||
openBtn.addEventListener("click", function () {
|
||||
drawer.classList.add("open");
|
||||
|
||||
layui.use(["tree", "jquery"], function () {
|
||||
var tree = layui.tree;
|
||||
var $ = layui.jquery;
|
||||
|
||||
// 初始化组织树
|
||||
function initOrgTree() {
|
||||
// 渲染树形结构
|
||||
tree.render({
|
||||
elem: "#orgTree", // 绑定元素
|
||||
id: "orgTree", // 自定义索引
|
||||
data: getTreeData(), // 获取数据
|
||||
showCheckbox: false, // 是否显示复选框
|
||||
isJump: false, // 是否允许点击节点时弹出新窗口
|
||||
accordion: true, // 是否开启手风琴模式
|
||||
edit: false, // 是否开启节点的操作图标
|
||||
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
||||
click: function (obj) {
|
||||
console.log(obj.data); // 点击节点时的回调
|
||||
// 这里可以添加点击节点后的处理逻辑
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 模拟获取树形数据（实际项目中替换为AJAX请求）
|
||||
function getTreeData() {
|
||||
return [
|
||||
{
|
||||
title: "总公司",
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: "技术部",
|
||||
id: 11,
|
||||
children: [
|
||||
{ title: "前端组", id: 111 },
|
||||
{ title: "后端组", id: 112 },
|
||||
{ title: "测试组", id: 113 },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "市场部",
|
||||
id: 12,
|
||||
children: [
|
||||
{ title: "销售组", id: 121 },
|
||||
{ title: "推广组", id: 122 },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "人事部",
|
||||
id: 13,
|
||||
children: [
|
||||
{ title: "招聘组", id: 131 },
|
||||
{ title: "培训组", id: 132 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
initOrgTree();
|
||||
});
|
||||
});
|
||||
|
||||
scrollContent.addEventListener("mouseleave", function () {
|
||||
scrollSpeed = 30; // 恢复原始速度
|
||||
// 点击关闭按钮关闭抽屉
|
||||
closeBtn.addEventListener("click", function () {
|
||||
drawer.classList.remove("open");
|
||||
});
|
||||
|
||||
// 点击抽屉外部关闭抽屉（可选）
|
||||
document.addEventListener("click", function (e) {
|
||||
if (
|
||||
drawer.classList.contains("open") &&
|
||||
!drawer.contains(e.target) &&
|
||||
e.target !== openBtn
|
||||
) {
|
||||
drawer.classList.remove("open");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,22 @@
|
|||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||
<title>电子看板</title>
|
||||
|
||||
<style>
|
||||
.custom-info-window {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
|
||||
border: none;
|
||||
min-width: 150px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.BMap_bubble_pop .BMap_bubble_arrow {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -60,6 +75,21 @@
|
|||
<span>6</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧抽屉 -->
|
||||
<div class="right-drawer-box">
|
||||
<!-- 关闭按钮 -->
|
||||
<div class="close-drawer-btn">
|
||||
</div>
|
||||
|
||||
<!-- 组织树盒子 -->
|
||||
<div class="organization-tree-box">
|
||||
<div id="orgTree"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 打开弹框的三角 -->
|
||||
<div class="open-drawer-box"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue