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) {
|
public ServerResponse getTowerProgressNum(EncryptedReq<QueryParamDto> dto) {
|
||||||
return service.getTowerProgressNum(dto.getData());
|
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
|
* @date 2025/4/24 13:59
|
||||||
*/
|
*/
|
||||||
int getRopewayTransNum(QueryParamDto dto);
|
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
|
@Data
|
||||||
public static class TowerProgressNumVo {
|
public static class TowerProgressNumVo {
|
||||||
/**基础开挖*/
|
/**
|
||||||
|
* 基础开挖
|
||||||
|
*/
|
||||||
private int num1;
|
private int num1;
|
||||||
/**开挖完成*/
|
/**
|
||||||
|
* 开挖完成
|
||||||
|
*/
|
||||||
private int num2;
|
private int num2;
|
||||||
/**浇筑完成*/
|
/**
|
||||||
|
* 浇筑完成
|
||||||
|
*/
|
||||||
private int num3;
|
private int num3;
|
||||||
/**铁塔组立*/
|
/**
|
||||||
|
* 铁塔组立
|
||||||
|
*/
|
||||||
private int num4;
|
private int num4;
|
||||||
/**组塔完成*/
|
/**
|
||||||
|
* 组塔完成
|
||||||
|
*/
|
||||||
private int num5;
|
private int num5;
|
||||||
/**架线完成*/
|
/**
|
||||||
|
* 架线完成
|
||||||
|
*/
|
||||||
private int num6;
|
private int num6;
|
||||||
/**附件安装*/
|
/**
|
||||||
|
* 附件安装
|
||||||
|
*/
|
||||||
private int num7;
|
private int num7;
|
||||||
/**未开始*/
|
/**
|
||||||
|
* 未开始
|
||||||
|
*/
|
||||||
private int num8;
|
private int num8;
|
||||||
/**索道运输*/
|
/**
|
||||||
|
* 索道运输
|
||||||
|
*/
|
||||||
private int num9;
|
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
|
* @date 2025/4/24 13:52
|
||||||
*/
|
*/
|
||||||
ServerResponse getTowerProgressNum(QueryParamDto data);
|
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);
|
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
|
FROM tb_cablewa_trans
|
||||||
WHERE pro_id = #{id} AND is_active = '1'
|
WHERE pro_id = #{id} AND is_active = '1'
|
||||||
</select>
|
</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>
|
</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,
|
.scroll-box,
|
||||||
.legend-box {
|
.legend-box,
|
||||||
|
.right-drawer-box {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -136,3 +137,138 @@ body {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 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实例
|
let map = null;
|
||||||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
|
|
||||||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
// 地图配置项
|
||||||
|
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() {
|
function getScrollData() {
|
||||||
|
|
@ -141,13 +540,101 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
// 启动动画
|
// 启动动画
|
||||||
requestAnimationFrame(animateScroll);
|
requestAnimationFrame(animateScroll);
|
||||||
|
|
||||||
// 鼠标悬停时暂停滚动
|
// // 鼠标悬停时暂停滚动
|
||||||
scrollContent.addEventListener("mouseenter", function () {
|
// scrollContent.addEventListener("mouseenter", function () {
|
||||||
scrollSpeed = 0;
|
// 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>
|
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||||
<title>电子看板</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -60,6 +75,21 @@
|
||||||
<span>6</span> -->
|
<span>6</span> -->
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>
|
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue