电子看板页面搭建
This commit is contained in:
BianLzhaoMin
parent
7af8ca9b59
commit
b9a58b24e0
|
|
@ -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