<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<title>工程巡检</title>
|
<link rel="stylesheet" href="../layui/css/layui.css">
|
<style>
|
html,
|
body,
|
.layui-prop {
|
background-color: rgba(0, 0, 0, 0);
|
height: 100%;
|
color: #fff;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
|
.layui-prop::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 8px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
.layui-prop::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
.layui-prop::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
form {
|
width: 95%;
|
}
|
|
html {
|
overflow: hidden;
|
}
|
|
.layui-form-item {
|
width: 313px !important;
|
}
|
|
.layui-input {
|
background-color: #fff !important;
|
height: 30px;
|
margin-top: 5px;
|
}
|
|
.layui-form-label {
|
width: 96px !important;
|
}
|
|
.layui-input-block {
|
width: 150px !important;
|
margin-left: 150px !important;
|
}
|
|
.layui-prop {
|
margin-left: 10px;
|
}
|
|
.layui-form-item .line {
|
display: block;
|
}
|
|
.layui-input-block {
|
margin-left: 0;
|
}
|
|
.layui-form-item {
|
border: 1px solid;
|
margin-bottom: 0px !important;
|
border-bottom: none;
|
}
|
|
.layui-input {
|
background-color: rgba(0, 0, 0, 0) !important;
|
margin-top: 5px;
|
color: #fff;
|
}
|
|
.layui-form-select dl {
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
}
|
|
.layui-form-select dl dd:hover {
|
background-color: #f2f2f250;
|
}
|
|
.bnt-box {
|
text-align: center;
|
height: 58px;
|
}
|
|
.bnt-box button {
|
margin-top: 10px;
|
}
|
|
.fly {
|
display: none;
|
}
|
|
#flySpeed {
|
padding: 19px 0;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-prop">
|
<div class="bnt-box">
|
<button type="button" class="layui-btn layui-btn-normal" id="start">继续巡检</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="stop" style="margin-left: 0;">暂停巡检</button>
|
<button type="button" class="layui-btn layui-btn-normal" id="exit">退出巡检</button>
|
</div>
|
<form class="layui-form" action="">
|
<div class="layui-form-item">
|
<label class="layui-form-label">路线名称</label>
|
<div class="layui-input-block" id="roadName" style="line-height: 38px;">
|
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">视角模式</label>
|
<div class="layui-input-block">
|
<select id="sjms" name="sjms" lay-filter="sjms">
|
<option value="0">跟随模型</option>
|
<option value="1">第一人称视角</option>
|
<option value="2">上帝视角</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-form-item norline fly">
|
<label class="layui-form-label">飞行高度</label>
|
<div class="layui-input-block">
|
<input id="cameraHeight" type="text" value="0" name="cameraHeight" lay-filter="cameraHeight"
|
class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item norline fly notGod">
|
<label class="layui-form-label">飞行距离</label>
|
<div class="layui-input-block">
|
<input id="cameraDistance" type="text" value="0" name="cameraDistance" lay-filter="cameraDistance"
|
class="layui-input" onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item norline fly notGod">
|
<label class="layui-form-label">俯仰角</label>
|
<div class="layui-input-block">
|
<input id="pitch" type="text" value="0" name="pitch" lay-filter="pitch" class="layui-input"
|
onkeyup="value=value.replace(/[^\d\.\-]/g,'')">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">巡检速度(m/s)</label>
|
<div class="layui-input-block">
|
<div id="flySpeed" class="flySpeed"></div>
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">总长度</label>
|
<div class="layui-input-block" id="totalLen" style="line-height: 38px;">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">已巡检长度</label>
|
<div class="layui-input-block" id="distanceTraveled" style="line-height: 38px;">
|
0
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">总时长</label>
|
<div class="layui-input-block" id="totalTime" style="line-height: 38px;">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">已巡检时间</label>
|
<div class="layui-input-block" id="time" style="line-height: 38px;">
|
0
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">是否显示模型</label>
|
<div class="layui-input-block">
|
<input id="showModel" type="checkbox" lay-skin="switch" lay-filter="showModel" value="off"
|
lay-text="是|否">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">是否显示路线</label>
|
<div class="layui-input-block">
|
<input id="showLine" type="checkbox" lay-skin="switch" lay-filter="showLine" value="off"
|
lay-text="是|否">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">速度</label>
|
<div class="layui-input-block" id="sd" style="line-height: 38px;">
|
50m/s
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">经度</label>
|
<div class="layui-input-block" id="jd" style="line-height: 38px;">
|
</div>
|
</div>
|
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">纬度</label>
|
<div class="layui-input-block" id="wd" style="line-height: 38px;">
|
</div>
|
</div>
|
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">巡检高程</label>
|
<div class="layui-input-block" id="height" style="line-height: 38px;">
|
</div>
|
</div>
|
<div class="layui-form-item norline">
|
<label class="layui-form-label">地面高程</label>
|
<div class="layui-input-block" id="globeHeight" style="line-height: 38px;">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="ratio">
|
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
</div>
|
</div>
|
</form>
|
</div>
|
<script src="../jquery-2.0.3.js"></script>
|
<script src="../layui/layui.js"></script>
|
|
<script>
|
/// <reference path="sjcs.js" />
|
var fly = null;
|
var sgworld = parent.sgworld;
|
var routeData = parent.PathAnimationData.flyData;
|
var url = parent.SmartEarthRootUrl + "Workers/Model/model.glb";
|
$('#start').hide();
|
$('#stop').show();
|
var form, element, slider;
|
var ratio = 0;
|
layui.use(['form', 'element', 'slider'], function () {
|
form = layui.form;
|
element = layui.element;
|
slider = layui.slider;
|
|
if (routeData.distance) {
|
document.getElementById("totalLen").innerText = getDistance(routeData.distance);
|
}
|
if (routeData.Totaltime) {
|
document.getElementById("totalTime").innerText = getTime(routeData.Totaltime);
|
}
|
if (routeData.range) {
|
document.getElementById("cameraDistance").value = routeData.range;
|
}
|
if (routeData.height) {
|
document.getElementById("cameraHeight").value = routeData.height;
|
}
|
if (routeData.pitch) {
|
document.getElementById("pitch").value = routeData.pitch;
|
}
|
document.getElementById("roadName").innerText = routeData.name;
|
|
fly = sgworld.Creator.createDynamicObject(routeData, url, shuj);
|
parent.PathAnimationData.fly = fly
|
|
if (routeData.mode) {
|
$('#sjms option[value="' + routeData.mode + '"]').attr('selected', '');
|
form.render();
|
switch (routeData.mode) {
|
case 1:
|
$('.fly').show();
|
break;
|
case 2:
|
$('.fly').show();
|
$('.notGod').hide();
|
break;
|
}
|
}
|
form.on('select(sjms)', function (data) {
|
if (data.value === "0") {
|
fly && fly.changeFlyMode(0);
|
routeData && (routeData.mode = 0);
|
$('.fly').hide();
|
} else if (data.value === "1") {
|
fly && fly.changeFlyMode(1);
|
routeData && (routeData.mode = 1);
|
$('.fly').show();
|
} else if (data.value === "2") {
|
fly && fly.changeFlyMode(2);
|
routeData && (routeData.mode = 2);
|
$('.fly').show();
|
$('.notGod').hide();
|
}
|
});
|
|
slider.render({
|
elem: '#flySpeed',
|
theme: '#1E9FFF', //主题色
|
min: 1,
|
max: 500,
|
value: 50,
|
change: function (value) {
|
let multiplier = value / 50.5;
|
fly && fly.setMultiplier(multiplier);
|
routeData && (routeData.multiplier = multiplier);
|
document.getElementById("sd").innerText = value + 'm/s';
|
}
|
});
|
|
$('#cameraDistance').on('input propertychange', function (event) {
|
var distance = $(this).val().replace(/[^\d\.\-]/g, '');
|
fly && fly.setFlyDistance(parseFloat(distance));
|
routeData && (routeData.range = parseFloat(distance));
|
});
|
$('#cameraHeight').on('input propertychange', function (event) {
|
var height = $(this).val().replace(/[^\d\.\-]/g, '');
|
fly && fly.setFlyHeight(parseFloat(height));
|
routeData && (routeData.height = parseFloat(height));
|
});
|
$('#pitch').on('input propertychange', function (event) {
|
var pitch = $(this).val().replace(/[^\d\.\-]/g, '');
|
fly && fly.setFlyPitch(parseFloat(pitch));
|
routeData && (routeData.pitch = parseFloat(pitch));
|
});
|
if (routeData.showModel) {
|
$('#showModel').next().click();
|
$('#showModel').attr('value', 'on');
|
}
|
form.on('switch(showModel)', function (data) {
|
fly && fly.showModel(this.checked);
|
routeData && (routeData.showModel = this.checked);
|
});
|
if (routeData.showLine) {
|
$('#showLine').next().click();
|
$('#showLine').attr('value', 'on');
|
}
|
form.on('switch(showLine)', function (data) {
|
fly && fly.showLine(this.checked);
|
routeData && (routeData.showLine = this.checked);
|
});
|
//进度条
|
setInterval(function () {
|
element.progress('ratio', ratio + '%');
|
}, 500);
|
});
|
//按钮事件
|
$(".bnt-box button").click(function () {
|
var id = this.id;
|
switch (id) {
|
case 'start':
|
fly && fly.isPause(false);
|
$('#start').hide();
|
$('#stop').show();
|
break;
|
case 'stop':
|
fly && fly.isPause(true);
|
$('#start').show();
|
$('#stop').hide();
|
break;
|
case 'exit':
|
parent.layer.close(parent.PathAnimationData.winIndex)
|
break;
|
}
|
});
|
|
function shuj(data) {
|
if (data.distanceTraveled) {
|
//已巡检长度
|
document.getElementById("distanceTraveled").innerText = getDistance(data.distanceTraveled);
|
}
|
if (data.time) {
|
//已巡检时间
|
document.getElementById("time").innerText = getTime(parseInt(data.time));
|
}
|
if (data.longitude) {
|
//经度
|
document.getElementById("jd").innerText = data.longitude.toFixed(7) + '°';
|
}
|
if (data.latitude) {
|
//纬度
|
document.getElementById("wd").innerText = data.latitude.toFixed(7) + '°';
|
}
|
// if (data.speed) {
|
// //速度
|
// document.getElementById("sd").innerText = data.speed;
|
// }
|
if (data.height) {
|
//速度
|
document.getElementById("height").innerText = getDistance(data.height);
|
}
|
if (data.globeHeight) {
|
//速度
|
document.getElementById("globeHeight").innerText = getDistance(data.globeHeight);
|
}
|
if (data.ratio) {
|
ratio = parseInt(data.ratio * 100);
|
}
|
}
|
|
//自动点击关闭窗口点关闭事件
|
function closeLayer() {
|
var $title = $(window.parent.document).find('.layui-layer-title');
|
if ($title.length > 0) {
|
$title.each(function (i, item) {
|
if (item.innerHTML === "巡检路线") {
|
var closeButton = $(item).parent().find('.layui-layer-close');
|
var event = document.createEvent('MouseEvents');
|
event.initEvent("click", false, true);
|
closeButton[0].dispatchEvent(event);
|
}
|
})
|
}
|
}
|
|
function getTime(data) {
|
var time;
|
if (data < 60) {
|
time = data + "秒";
|
} else if (data >= 60 && data < 3600) {
|
time = Math.floor(data / 60) + '分' + data % 60 + '秒';
|
} else {
|
var h = Math.floor(data / 3600);
|
data -= h * 3600;
|
var m = Math.floor(data / 60);
|
data -= m * 60;
|
time = h + '小时' + m + '分' + data + '秒';
|
}
|
return time;
|
}
|
|
function getDistance(data) {
|
var dis;
|
data = parseFloat(data).toFixed(2);
|
data = parseFloat(data);
|
if (data >= 1000) {
|
dis = (data / 1000).toFixed(3) + "千米";
|
} else {
|
dis = data + "米";
|
}
|
return dis;
|
}
|
</script>
|
</body>
|
|
</html>
|
