DSDSWeb/src/views/hh.html

1305 lines
47 KiB
HTML
Raw Normal View History

2024-07-11 18:02:47 +08:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<title>深海科考数据管理平台</title>
<!-- <link rel="shortcut icon" href="/DSDS/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/DSDS/layui/css/layui.css">
<link rel="stylesheet" href="/DSDS/js/Cesium-1.53/Build/Cesium/Widgets/widgets.css">
<link rel="stylesheet" href="/DSDS/css/common.css">
<link rel="stylesheet" href="/DSDS/css/iconfont.css">
<link rel="stylesheet" href="/DSDS/css/project.css"> -->
<style type="text/css">
html,
body {
height: 100%;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<div class="navigationBar">
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">
<img alt="" src="/DSDS/images/123.png">
</li>
<li class="layui-nav-item">
<img alt="" src="/DSDS/images/456.png" style="margin : 0 20px;">
</li>
<li class="layui-nav-item layui-this">
<a href="/DSDS/index" class="indexa">首页</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;" class="indexa"> 数据管理 </a>
<dl class="layui-nav-child" style="top: 90px;">
<!-- 二级菜单 -->
</dd>
<dd>
<a href="/DSDS/batchUpload">批量上传</a>
</dd>
<dd>
<a href="/DSDS/dataUploadList">数据上传</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="/DSDS/dataRetrieval"class="indexa">数据检索</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;" class="indexa"> 统计分析 </a>
<dl class="layui-nav-child"style="top: 90px;">
<!-- 二级菜单 -->
<dd class="jobMenu">
<a href="javascript:;" class="job"> 科考航次 <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child jobList-child">
<dd class="menuTree">
<a href="/DSDS/voyageStatistics?shipPlatId=1"> 探索一号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/voyageStatistics?shipPlatId=2"> 探索二号 </a>
</dd>
</dl>
</dd>
<dd class="jobMenu">
<a href="javascript:;" class="job"> 潜器平台 <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child jobList-child">
<dd class="menuTree">
<a href="javascript:;" class="job"> HOV <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree ">
<dd>
<a href="/DSDS/hovStatistics?type=SY"> 深海勇士号 </a>
</dd>
<dd>
<a href="/DSDS/hovStatistics?type=FDZ"> 奋斗者 </a>
</dd>
<dd>
<a> 蛟龙号 </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> ROV <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree ">
<dd>
<a> 海马号 </a>
</dd>
<dd>
<a> 海龙号 </a>
</dd>
<dd>
<a> 海龙2号3500 </a>
</dd>
<dd>
<a> 海龙3号6000 </a>
</dd>
<dd>
<a> 海龙11000 </a>
</dd>
<dd>
<a> 深海科考型ROV系统 </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> AUV <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree ">
<dd>
<a> 潜龙一号 </a>
</dd>
<dd>
<a> 潜龙二号 </a>
</dd>
<dd>
<a> 潜龙三号 </a>
</dd>
<dd>
<a> 探索4500 </a>
</dd>
<dd>
<a> 探索1000 </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> ARV <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree">
<dd>
<a href="/DSDS/arvStatistics?type=HD"> 海斗号 </a>
</dd>
<dd>
<a> 北极ARV </a>
</dd>
<dd>
<a> 万米ARV </a>
</dd>
<dd>
<a> 海斗一号 </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> Glider <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree">
<dd>
<a href="/DSDS/ugStatistics?type=HY"> 海翼号 </a>
</dd>
<dd>
<a> 海翼号-1000 </a>
</dd>
<dd>
<a> 海翼号-4500 </a>
</dd>
<dd>
<a> 海翼号-7000 </a>
</dd>
<dd>
<a> 海翼号-长航程 </a>
</dd>
<dd>
<a> 海燕号-1500 </a>
</dd>
<dd>
<a> 海燕号-X </a>
</dd>
<dd>
<a> 海燕号-L </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> 着陆器 <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree">
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=TY"> 天涯号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=HJ"> 海角号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=WQ"> 万泉号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=JJ"> 金鸡号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=FH"> 凤凰号 </a>
</dd>
<dd class="menuTree">
<a href="/DSDS/landerStatistics?type=YW"> 原位实验号 </a>
</dd>
</dl>
</dd>
<dd class="menuTree">
<a href="javascript:;" class="job"> 新概念潜水器 <i
class="iconfont icon-right"></i>
</a>
<dl class="layui-nav-child listTree">
<dd>
<a> 水下直升机 </a>
</dd>
<dd>
<a> 自主变形仿生柔体潜航器 </a>
</dd>
<dd>
<a> 深海爬游混合型无人潜水器 </a>
</dd>
<dd>
<a> 深海多位点着陆器 </a>
</dd>
<dd>
<a> USE-X </a>
</dd>
<dd>
<a> 旗鱼324型AUV </a>
</dd>
<dd>
<a> 深海高速潜水器 </a>
</dd>
<dd>
<a> 津龙号 </a>
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" class="indexa">谱系化装备</a>
<dl class="layui-nav-child"style="top: 90px;">
<!-- 二级菜单 -->
<dd>
<a href="/DSDS/shipPlatList"> 科考船舶 </a>
</dd>
<dd>
<a href="/DSDS/submersiblePlatList"> 潜器平台 </a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"class="indexa"> 字典管理</a>
<dl class="layui-nav-child"style="top: 90px;">
<!-- 二级菜单 -->
<dd>
<a href="/DSDS/dataTypeList"> 数据类型 </a>
</dd>
<dd>
<a href="/DSDS/deviceTypeList"> 设备类型 </a>
</dd>
<dd>
<a href="/DSDS/platTypeList"> 平台类型 </a>
</dd>
<dd>
<a href="/DSDS/shipUnitList"> 参航单位 </a>
</dd>
<dd>
<a href="/DSDS/shareUnitList"> 共享单位 </a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;"class="indexa">系统管理</a>
<dl class="layui-nav-child"style="top: 90px;">
<!-- 二级菜单 -->
<dd>
<a href="/DSDS/deptList"> 单位(部门)管理 </a>
</dd>
<dd>
<a href="/DSDS/roleList"> 角色管理 </a>
</dd>
<dd>
<a href="/DSDS/userList"> 用户管理 </a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="/DSDS/aboutus"class="indexa"> 关于我们 </a>
</li>
<li class="layui-nav-item" style="float: right;"><a
href="javascript:;" class="indexa"> <a style="text-align: right; padding-right: 14px;"> <img style="width: 24px;"
src="/DSDS/images/user.png"
alt="">&nbsp;&nbsp;<span id="sessionUser" style="color: #45d3ff"> </span>
</a> </a>
<dl class="layui-nav-child "style="top: 90px;">
<!-- 二级菜单 -->
<dd class="joipjio">
</dd>
<dd class="joipjio">
<a class="loginlist" onclick="javascript:modifyPass();"> 修改密码 </a>
</dd>
<dd>
<a class="loginlist" href="/DSDS/logout"> 注销登录 </a>
</dd>
</dl></li>
</ul>
</div>
<!-- 主题部分 -->
<div class="source_main cl">
<!-- 左边数据展示 -->
<div class="source_wrap fl">
<div class="source">
<!-- 搜索框 -->
<div class="search_box cl">
<form class="layui-form fl" action="" id="search_form">
<div class="layui-inline">
<div class="layui-input-inline">
<select name="modules" id="modules" lay-verify="required" lay-search="">
<option value="">选择或搜索</option>
<option value="1" id="type">数据类型</option>
<option value="2">文献检索</option>
<option value="3">采集平台</option>
<option value="4">平台类型</option>
<option value="5">资助类型</option>
<option value="6">设备类型</option>
<option value="7">航次名称</option>
<option value="8">航次首席</option>
</select>
</div>
</div>
</form>
<div class="select_box fl">
<div class="select_all fl">
<input name="inputName" id="inputName" type="text" placeholder="请输入" title="">
</div>
<div class="popups fr">
<div class="dataType fr">
<span id="dataTypeList"> 从列表中选择 </span>
</div>
<span class="fr"> 或者 </span>
</div>
</div>
<div class="search_btn fl">搜索</div>
</div>
<!-- 弹出层内容 -->
<div class="pop_box">
<div class="address"></div>
</div>
<!-- 航次名称弹出层 -->
<div class="voyage_name">
<div class="address"></div>
</div>
<!-- 单选框 -->
<div class="result_check">
<form class="layui-form">
<div class="layui-form-item result_list">
<label class="layui-form-label"> 结果列表 : </label>
<div class="layui-input-block redioList">
<input type="radio" name="result" value="0" title="数据集" lay-filter="test" checked>
<input type="radio" name="result" value="1" title="航次" lay-filter="test">
</div>
</div>
</form>
</div>
</div>
<!-- 搜索数据显示 -->
<div class="data_show cl">
<!-- 数据集 -->
<div class="container"></div>
</div>
</div>
<!-- Cesium地图显示 -->
<div class="grid">
<div id="cesiumContainer" class="fullSize"></div>
<div class="spread">
<i class="layui-icon layui-icon-spread-left spreadIcon"></i>
</div>
<!-- 左下角坐标 -->
<div id="latlng_show">
<!-- <p class="coordinate">
经度(°):
<span id="longitude_show"></span>
</p>
<p class="coordinate">
纬度(°):
<span id="latitude_show"></span>
</p> -->
<p class="coordinate">
水深: <span id="elevation_show"></span> m
</p>
<p class="coordinate">
视角高: <span id="altitude_show"></span> km
</p>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer cl">
<p>
版权所有©2018 <span id="timeYear"></span> 中国科学院深海科学与工程研究所
</p>
<p>技术支持:船海科技有限公司</p>
</div>
</body>
<!-- <script type="text/javascript" src="/DSDS/js/jquery-3.3.1.min.js"></script>
<script src="/DSDS/layui/layui.js"></script>
<script type="text/javascript" src="/DSDS/myJS/userUtil.js"></script>
<script src="/DSDS/js/Cesium-1.53/Build/CesiumUnminified/Cesium.js"></script> -->
<script type="text/javascript">
layui.use(['element', 'form', 'layer'],
function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
var layer = layui.layer;
/* 底部获取时间 */
var mydate = new Date();
var tm = mydate.getFullYear();
$("#timeYear").text(tm);
/*<![CDATA[*/
var basePath ="http:\/\/124.16.219.154:8080\/DSDS";
/*]]>*/
/* 获取当前登录用户信息*/
getCurrentUser(basePath);
// 地图加载线的颜色
var color = [Cesium.Color.LIGHTSLATEGREY, Cesium.Color.LIGHTYELLOW, Cesium.Color.LIME, Cesium.Color.MAGENTA, Cesium.Color.MAROON, Cesium.Color.MEDIUMBLUE, Cesium.Color.MEDIUMORCHID, Cesium.Color.MEDIUMVIOLETRED, Cesium.Color.MINTCREAM, Cesium.Color.MISTYROSE, Cesium.Color.ORANGERED, Cesium.Color.RED]
/* 初始化变量 */
var viewer;
var stationArrList = []; // 收集所有的棋子实例
var stationPrev = ""; // 记录上一次点击的站位
var category = 0;
var url = "";
var modulesVal = "";
var inputVal = "";
var allDataList = null;
var data_count = 0;
$("#inputName").val("");
// 地图初始化
cesiumInit();
/* 展开伸缩菜单栏 */
$(".spread").click(function () {
if ($(".source_wrap").hasClass("on")) {
$(".source,.data_show").show();
$(".spread i").removeClass("layui-icon-shrink-right").addClass("layui-icon-spread-left");
$(".source_wrap").removeClass("on");
$(".grid").removeClass("on");
} else {
$(".source,.data_show").hide();
$(".spread i").removeClass("layui-icon-spread-left").addClass("layui-icon-shrink-right");
$(".source_wrap").addClass("on");
$(".grid").addClass("on");
}
})
function cesiumInit() {
//Cesium.Ion.defaultAccessToken ="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NzgwYzViYS1mNTQ2LTRlNGItYjU1My1iMDQ1YjE2ZTA1MTUiLCJpZCI6NjQ2OSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NjU2NDQ1Mn0.SKCeYf0--5q4najfHUaGqL_8CkfE8hEsQbNxIKqcaeU";
viewer = new Cesium.Viewer('cesiumContainer', {
animation: false,// 动画器件,控制视图动画的播放速度
timeline: false,// 时间线,指示当前时间,并允许用户跳到特定的时间
navigationHelpButton: false,// 导航帮助按钮,显示默认的地图控制帮助
baseLayerPicker: true,// 图层选择器,选择要显示的地图服务和地形服务
geocoder: true,// 查找位置工具查到之后会将镜头对准找到的地址默认使用bing地图
vrButton: false,// 是否显示地图双屏控件
selectionIndicator: true,// 是否显示选取指示器组件 false禁用实体选中true选中
infoBox: false,// 是否显示信息框
fullscreenButton: false,// 全屏按钮
selectionIndicator: false,// 设置绿色框框不可见
});
// 添加本地图层(当GMRT图层加载慢的时候预先加载本地图层交互更好)
var localProvider = new Cesium.createTileMapServiceImageryProvider({
url: 'js/Cesium-1.53/Build/Cesium/Assets/Textures/NaturalEarthII',
fileExtension: 'jpg'
});
viewer.imageryLayers.addImageryProvider(localProvider);
// 添加GMRT图层
var provider = new Cesium.WebMapServiceImageryProvider({
url: 'https://www.gmrt.org/services/mapserver/wms_merc',
layers: 'GMRT',
style: "default",
format: "image/jpeg",
service: 'WMS',
version: '1.3.0',
request: 'GetCapabilities'
});
viewer.imageryLayers.addImageryProvider(provider);
/*初始化航次轨迹*/
$.ajax({
url: 'query/initShipTrack',
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var trackArr = item.track;
var trackId = item.id;
var textName = item.expedition;
var degreeArr = [];
for (var j = 0; j < trackArr.length; j++) {
var trackItem = trackArr[j];
var latitude = trackItem.latitude;
var longtitude = trackItem.longtitude;
degreeArr.push(longtitude, latitude);
}
if (degreeArr.length != 0) {
drawLine(degreeArr, trackId, textName);
}
}
}
})
var entityLength = viewer.entities.values.length; //获取entities的长度
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(
async function (movement) {
$(".info_li").css("background-color", "");
for (let item of allDataList) {
for (var x = 0; x < $('.info_li').length; x++) {
if ($('.info_li').eq(x).attr('datatype') == item.dataType) {
if ($('.info_li').eq(x).nextAll('.' + item.dataType).length > 0) {
var info_li = $('.info_li').eq(x).nextAll('.' + item.dataType).eq(0).attr('style');
if (info_li) {
var info_lir = info_li.split(':')[1].replace(/\s/g, "");
if (info_lir == 'none;') {
data_count = data_count + $('.info_li').eq(x).nextAll('.' + item.dataType).length;
}
}
$('.info_li').eq(x).nextAll('.' + item.dataType).css('display', 'block');
$('.info_li').eq(x).find('.img').attr('toggle', 1);
$('.info_li').eq(x).find('.img').attr("src", "images/arrow3.png");
} else {
var modules = $("#modules").val();
var inputVal = $("#inputName").val();
await expanded(item.dataType, modules, inputVal, (data) => {
var listHtml = '';
var dataList = data.rows;
var dataLen = dataList.length;
if (dataLen != 0) {
data_count = data_count + dataLen - 1;
for (var i = 0; i < dataList.length; i++) {
if (i > 0) {
var item = dataList[i];
var startTime = fmtDate(item.startTime.time); // 格式化JSON日期 cgf
var rawProcess = item.processStatus == 'seatrial' ? '海试数据' : (item.processStatus == 'raw' ? '原始数据' : (item.processStatus == 'preprocess' ? '预处理数据' : '后处理数据'));
var longtitude = item.longtitude;  // 经度                          
var latitude = item.latitude;  // 纬度                              
var startTime = fmtDate(item.startTime.time);  // 格式化JSON日期  cgf 
var jobType = item.jobType == 0 ? '站位作业' : '测线作业';
var longt = item.longtitude == 0 ? item.launchLongtitude : item.longtitude;
var lat = item.latitude == 0 ? item.launchLatitude : item.latitude;
var diveNum = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? item.diveNum : '' : item.stationNum;
var diveTitle = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? '潜次编号' : '' : '站位号';
listHtml += '<li class="info_li ' + item.dataType + '" style="display:block;" id=' + item.id + ' jobType=' + item.jobType + ' longt=' + longt + ' lat=' + lat + '><p class="info_title"><a class="jump" target="_blank" href="dataSetInfo?id=' + item.id + '">' + item.dataType + '</a>';
listHtml += '</p><dl class="resrow cl"><dd><b class="legend">航次名称: </b><a class="expedition" target="_blank" href="detail?expedition=' + item.expedition + '">' + item.expedition + '</a></dd></dd><dd class="openShow"><b class="legend ">平台/设备: </b><span>' + item.platformName + "/" + item.deviceType + '</span>' + (item.sampleNo != '' ? ('<dd class="openShow"><b class="legend ">样品编号:</b><span class="short">' + item.sampleNo + '</span></dd>') : '<dd class="diveName openShow"><b class="legend ">' + diveTitle + ' </b><span class="short">' + diveNum + '</span></dd>') + '<dd class="openShow"><b class="legend">处理状态: </b><span>' + rawProcess + '</span></dd><dd class="openShow"><b class="legend fl">采集时间: </b><span class="short">' + startTime + '</span></dd><dd><b class="legend">航次首席:</b><span class="short">' + item.chief + '</span></dd><dd class="openShow"><b class="legend">作业类型:</b><span class="short">' + jobType + '</span></dd></dl><hr></li>';
if (item.jobType == "0") {
stationData(item, i);
}
}
}
$('.info_li').eq(x).find('.img').attr('toggle', 1);
$('.info_li').eq(x).find('.img').attr("src", "images/arrow3.png");
$(listHtml).insertAfter($('.info_li').eq(x));
}
});
}
break;
}
}
$('.data_num').text(data_count);
updateAll()
}
var pick = viewer.scene.pick(movement.position); //通过viewer.scene.pick获取点击的对象
if (entityLength == 1) {
if (Cesium.defined(pick) && (pick.id.id == id)) { //如果对象不为空且id匹配则说明选中。
} else {
}
} else {
var drillPicks = viewer.scene.drillPick(movement.position); //scene.drillPick获取一个对象列表
if (drillPicks[0]) {
var drillId = drillPicks[0].id._id; //获取选取对象的id
var drillName = drillPicks[0].id._name; //获取选取对象的name
}
if (Cesium.defined(pick) && (pick.id.id == drillId)) { //如果对象不为空且id匹配则说明选中。
$.ajax({
url: 'query/queryByDiveNumOrStationNum?name=' + drillName,
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var liId = $("#" + item.id).find("li").prevObject[0].id;
$("#" + liId).css("background-color", "LightSkyBlue");
$("#" + liId)[0].scrollIntoView({
behavior: "smooth",
block: "end"
});
}
}
})
} else {
$(".list_content li").each(function () {
var id = $(this).attr("id");
$("#" + id).css("background-color", "");
})
}
}
},
Cesium.ScreenSpaceEventType.LEFT_CLICK);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(104.479207, 14.209234, 114.479207, 22.209234);
viewer.camera.flyHome();
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (wheelment) {
var height = viewer.camera.positionCartographic.height;
console.log(height)
if (height > 16576914.758292207) {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromRadians(viewer.camera.positionCartographic.longitude, viewer.camera.positionCartographic.latitude, 16576914.758292207)
});
}
},
Cesium.ScreenSpaceEventType.WHEEL);
}
viewer.scene.screenSpaceCameraController.enableZoom = true;
//viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1200;
//viewer.scene.screenSpaceCameraController.maximumZoomDistance = 2500;
/* 地图左下角坐标显示 */
/* var longitude_show = document.getElementById('longitude_show'); // 经度
var latitude_show = document.getElementById('latitude_show'); // 纬度 */
var elevation_show = document.getElementById('elevation_show'); // 水深
var altitude_show = document.getElementById('altitude_show'); // 视角高
var canvas = viewer.scene.canvas; // 具体事件的实现
var ellipsoid = viewer.scene.globe.ellipsoid;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
this.movementTimer = null;
handler.setInputAction(function (movement) { // 捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian) {
viewer.scene.screenSpaceCameraController.enableZoom = true;
// 将笛卡尔三维坐标转为地图坐标(弧度)
var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
// 将地图坐标(弧度)转为十进制的度数
var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4); // 经度
var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4); // 纬度
var alti_String = (viewer.camera.positionCartographic.height / 1000).toFixed(2); // 视角高
clearTimeout(this.movementTimer);
movementTimer = setTimeout(function () {
$.ajax({
type: "GET",
url: "https://www.gmrt.org/services/pointserver.php",
data: {
'latitude': lat_String,
'longitude': log_String,
'statsoff': 'true'
},
async: true,
success: function (msg) {
$("#elevation_show").text(msg); // 水深
}
});
},
200);
$("#longitude_show").text(log_String); // 经度
$("#latitude_show").text(lat_String); // 纬度
$("#altitude_show").text(alti_String); // 视角高
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
/* 获取select下拉框中的值 */
form.on('select',
function (data) {
$("#inputName").val("");
$(".container").html("");
category = data.value;
});
/* 从列表中选择 弹出框 */
$("#dataTypeList").click(function () {
$(".container").html("");
if (category == 3) {
layer.open({
id: "namePop",
title: '从列表中选择',
content: $('.voyage_name').html(),
type: 1,
area: ['460px', '360px'],
btn: ['确定'],
shadeClose: true,
success: function (layero, index) {
platform();
}
})
} else if (category == 5) {
layer.open({
id: "namePop",
title: '从列表中选择',
content: $('.voyage_name').html(),
type: 1,
area: ['460px', '200px'],
btn: ['确定'],
shadeClose: true,
success: function (layero, index) {
fundType();
}
})
} else if (category == 7) {
layer.open({
id: "namePop",
title: '从列表中选择',
content: $('.voyage_name').html(),
type: 1,
area: ['460px', '200px'],
btn: ['确定'],
shadeClose: true,
success: function (layero, index) {
voyageName();
}
})
} else if (category == 8) {
layer.open({
id: "namePop",
title: '从列表中选择',
content: $('.voyage_name').html(),
type: 1,
area: ['460px', '200px'],
btn: ['确定'],
shadeClose: true,
success: function (layero, index) {
honour();
}
})
} else {
layer.open({
title: '从列表中选择',
content: $('.pop_box').html(),
type: 1,
area: ['460px', '500px'],
btn: ['确定'],
shadeClose: true,
success: function (layero, index) {
if (category == 0 || category == 1) {
url = "query/dataTypeSearch";
} else if (category == 4) {
url = "query/platTypeSearch";
} else if (category == 6) {
url = "query/deviceTypeSearch";
} else {
layer.closeAll();
layer.msg("此数据正在优化,请重新选择!", {
icon: 7,
anim: 6,
time: 1800
});
}
getHttp(url);
}
});
}
})
/* 弹出层内容接口请求 */
function getHttp(url) {
$.ajax({
url: url,
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
str += '<a class="data_list" href="javascript:;">' + item.typeName + '</a>';
}
$(".address").html(str);
$(".data_list").click(function () {
$(this).addClass("on").siblings().removeClass("on");
var chooseVal = $(this).text();
$("#inputName").val(chooseVal);
$("#inputName").attr("title", chooseVal);
})
}
})
}
/* 点击搜索 数据请求 */
$(".search_btn").click(function () {
viewer.entities.removeAll();
modulesVal = $("#modules").val();
inputVal = $("#inputName").val();
if (modulesVal == "" || inputVal == "") {
layer.msg("请选择检索条件!", {
icon: 7,
anim: 6,
time: 1800
});
} else {
var redioed = $('.redioList input[name="result"]:checked').val();
if (redioed == 0) {
dataSetAjax("query/queryDataList?queryCondition=" + modulesVal + "&queryValue=" + inputVal);
} else if (redioed == 1) {
expeditionAjax("query/queryDataListForExpedition?queryCondition=" + modulesVal + "&queryValue=" + inputVal);
}
form.on('radio(test)',
function (data) {
viewer.entities.removeAll();
var dataVal = data.value;
if (dataVal == 0) {
$(".container").eq(0).show().siblings().hide();
dataSetAjax("query/queryDataList?queryCondition=" + modulesVal + "&queryValue=" + inputVal);
} else if (dataVal == 1) {
$(".container").eq(2).show().siblings().hide();
expeditionAjax("query/queryDataListForExpedition?queryCondition=" + modulesVal + "&queryValue=" + inputVal);
}
})
}
})
/*采集平台数据请求*/
function platform() {
$.ajax({
url: "query/submerPlatSearch",
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
str += '<a class="data_list" href="javascript:;">' + item.submersibleName + '</a>';
}
$(".address").html(str);
$(".data_list").click(function () {
$(this).addClass("on").siblings().removeClass("on");
var chooseVal = $(this).text();
$("#inputName").val(chooseVal);
$("#inputName").attr("title", chooseVal);
})
}
})
}
/*资助类型数据请求*/
function fundType() {
$.ajax({
url: "query/fundProjSearch",
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
str += '<a class="data_list" href="javascript:;">' + item.fundName + '</a>';
}
$(".address").html(str);
$(".data_list").click(function () {
$(this).addClass("on").siblings().removeClass("on");
var chooseVal = $(this).text();
$("#inputName").val(chooseVal);
$("#inputName").attr("title", chooseVal);
})
}
})
}
/*航次名称数据请求*/
function voyageName() {
$.ajax({
url: "query/expeditionSearch",
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
str += '<a class="data_list" href="javascript:;">' + item.expedition + '</a>';
}
$(".address").html(str);
$(".data_list").click(function () {
$(this).addClass("on").siblings().removeClass("on");
var chooseVal = $(this).text();
$("#inputName").val(chooseVal);
$("#inputName").attr("title", chooseVal);
})
}
})
}
/*首席科学家数据请求*/
function honour() {
$.ajax({
url: "query/chiefSearch",
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
str += '<a class="data_list" href="javascript:;">' + item.chief + '</a>';
}
$(".address").html(str);
$(".data_list").click(function () {
$(this).addClass("on").siblings().removeClass("on");
var chooseVal = $(this).text();
$("#inputName").val(chooseVal);
$("#inputName").attr("title", chooseVal);
})
}
})
}
// 数据集方式展示接口请求
function dataSetAjax(url) {
$.ajax({
url: url,
dataType: "json",
success: function (data) {
data_count = data.count;
var dataSet = '<div class="data_set cl"><div class="data_title fl"><span class="data_num">' + data_count
+ '</span><span class="DS">种数据类型<span></div></div>';
var listHtml = '<ul class="list_content">';
var dataList = data.rows;
allDataList = data.rows;
var dataLen = dataList.length;
if (dataLen != 0) {
for (var i = 0; i < dataList.length; i++) {
var item = dataList[i];
var longtitude = item.longtitude; // 经度
var latitude = item.latitude; // 纬度
var startTime = fmtDate(item.startTime.time); // 格式化JSON日期 cgf
var rawProcess = item.processStatus == 'seatrial' ? '海试数据' : (item.processStatus == 'raw' ? '原始数据' : (item.processStatus == 'preprocess' ? '预处理数据' : '后处理数据'));
var jobType = item.jobType == 0 ? '站位作业' : '测线作业';
var longt = item.longtitude == 0 ? item.launchLongtitude : item.longtitude;
var lat = item.latitude == 0 ? item.launchLatitude : item.latitude;
var diveNum = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? item.diveNum : '' : item.stationNum;
var diveTitle = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? '潜次编号' : '' : '站位号';
var sampleNo = item.sampleNo == 'undefined' ? '' : item.sampleNo;
listHtml += '<li class="info_li" id=' + item.id + ' datatype=' + item.dataType + ' jobType=' + item.jobType + ' longt=' + longt + ' lat=' + lat + '><p class="info_title"><a class="jump" target="_blank" href="dataSetInfo?id=' +
item.id + '">' + item.dataType + '</a><img toggle=0 src="images/arrow2.png"/class="img" style="width: 17px;height: 18px;z-index: 999;cursor: pointer;margin-left: 15px;"></p><dl class="resrow cl"><dd><b class="legend">航次名称: </b><a class="expedition" target="_blank" href="detail?expedition=' + item.expedition + '">' + item.expedition + '</a></dd></dd><dd class="openShow"><b class="legend">平台/设备: </b><span>' + item.platformName + "/" + item.deviceType + '</span>' + (item.sampleNo != '' ? ('<dd class="openShow"><b class="legend">样品编号:</b><span class="short">' + item.sampleNo + '</span></dd>') : '<dd class="diveName openShow"><b class="legend ">' + diveTitle + ' </b><span class="short">' + diveNum + '</span></dd>') + '<dd class="openShow"><b class="legend">处理状态: </b><span>' + rawProcess + '</span></dd><dd class="openShow"><b class="legend fl">采集时间: </b><span class="short">' + startTime + '</span></dd><dd><b class="legend">航次首席:</b><span class="short">' + item.chief + '</span></dd><dd class="openShow"><b class="legend">作业类型:</b><span class="short">' + jobType + '</span></dd></dl><hr></li>';
if (item.jobType == "0") {
stationData(item, i);
}
}
listHtml += '</ul>';
$(".container").html(dataSet + listHtml);
$(".container").on('click', '.info_li',
function () {
console.log($(this).attr('datatype'))
//if($(this).attr('datatype')&&$(this).attr('datatype')!=undefined&&)
$(this).addClass("on").siblings().removeClass("on");
$(this).addClass("on").siblings().css("background-color", "");
stationArrList[stationPrev].billboard.image = basePath + '/images/station.png';
var index = $(this).index();
// var sourceId = dataList[index].id;
var sourceId = $(this).attr('id');
var stationNum = $(this).attr('stationnum');
if ($(this).attr('jobType') == 1) {
var radar = viewer.entities.getById(sourceId);
if (radar) {
viewer.entities.remove(radar);
}
stationArrList[stationPrev].billboard.image = basePath + '/images/station.png';
polyLine(sourceId, stationNum);
} else {
stationPrev = index;
var listIdx = dataList[index];
var longt = $(this).attr('longt') * 1;
var lat = $(this).attr('lat') * 1;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(longt, lat, 150000)
});
}
});
}
}
})
}
$('.container').on('click', '.img',
async function () {
var index = $(this).parent().parent().index();
var text = $(this).siblings(".jump").html();
var modules = $("#modules").val();
var inputVal = $("#inputName").val();
var toggle = $(this).attr('toggle');
if (toggle == 0) {
// $(".DS").text("条数据集")
$(this).attr("src", "images/arrow3.png");
$(this).attr('toggle', 1);
if ($(this).parent().parent().nextAll('.' + text).length == 0) {
await expanded(text, modules, inputVal, (data) => {
var listHtml = '';
var dataList = data.rows;
var dataLen = dataList.length;
if (dataLen != 0) {
data_count = data_count + dataLen - 1
for (var i = 0; i < dataList.length; i++) {
if (i > 0) {
var item = dataList[i];
var startTime;
if (item.startTime != null) {
startTime = fmtDate(item.startTime.time); // 格式化JSON日期 cgf
} else {
startTime = "";
}
var rawProcess = item.processStatus == 'seatrial' ? '海试数据' : (item.processStatus == 'raw' ? '原始数据' : (item.processStatus == 'preprocess' ? '预处理数据' : '后处理数据'));
var longtitude = item.longtitude;  // 经度                       
var latitude = item.latitude;  // 纬度                           
//var startTime  =  fmtDate(item.startTime.time);  // 格式化JSON日期  cgf 
var jobType = item.jobType == 0 ? '站位作业' : '测线作业';
var longt = item.longtitude == 0 ? item.launchLongtitude : item.longtitude;
var lat = item.latitude == 0 ? item.launchLatitude : item.latitude;
var diveNum = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? item.diveNum : '' : item.stationNum;
var diveTitle = item.diveNum !== '' ? item.stationNum !== '' || item.stationNum !== 'undefined' ? '潜次编号' : '' : '站位号';
listHtml += '<li class="info_li ' + item.dataType + '" id=' + item.id + ' jobType=' + item.jobType + ' longt=' + longt + ' lat=' + lat + '><p class="info_title"><a class="jump" target="_blank" href="dataSetInfo?id=' + item.id + '">' + item.dataType + '</a>';
listHtml += '</p><dl class="resrow cl"><dd><b class="legend">航次名称: </b><a class="expedition" target="_blank" href="detail?expedition=' + item.expedition + '">' + item.expedition + '</a></dd></dd><dd class="openShow"><b class="legend">平台/设备: </b><span>' + item.platformName + "/" + item.deviceType + '</span>' + (item.sampleNo != '' ? ('<dd class="openShow"><b class="legend">样品编号:</b><span class="short">' + item.sampleNo + '</span></dd>') : '<dd class="diveName openShow"><b class="legend ">' + diveTitle + ' </b><span class="short">' + diveNum + '</span></dd>') + '<dd class="openShow"><b class="legend">处理状态: </b><span>' + rawProcess + '</span></dd><dd class="openShow"><b class="legend fl">采集时间: </b><span class="short">' + startTime + '</span></dd><dd><b class="legend">航次首席:</b><span class="short">' + item.chief + '</span></dd><dd class="openShow"><b class="legend">作业类型:</b><span class="short">' + jobType + '</span></dd></dl><hr></li>';
if (item.jobType == "0") {
stationData(item, i);
}
}
}
$(listHtml).insertAfter($(this).parent().parent());
$(this).parent().parent().nextAll('.' + text).css('display', 'block');
updateAll()
}
});
} else {
$(this).parent().parent().nextAll('.' + text).css('display', 'block');
data_count = data_count + $(this).parent().parent().nextAll('.' + text).length;
}
} else {
// $(".DS").text("种数据类型")
$(this).attr("src", "images/arrow2.png");
$(this).parent().parent().nextAll('.' + text).css('display', 'none');
data_count = data_count - $(this).parent().parent().nextAll('.' + text).length;
$(this).attr('toggle', 0);
}
$('.data_num').text(data_count);
updateAll()
})
async function expanded(text, modules, inputVal, success) {
await $.ajax({
url: 'query/queryDataListByCondition?queryCondition=' + modules + "&queryValue=" + inputVal + "&dataType=" + text,
method: 'get',
dataType: 'JSON',
success: function (data) {
if (success) {
success(data);
}
}
})
}
function getRandomArrayElements(arr, count) {
var shuffled = arr.slice(0),
i = arr.length,
min = i - count,
temp,
index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
/* 测线作业线条展示 */
function polyLine(sourceId, positionNum) {
$.ajax({
url: 'query/querySurveyBySourceId?id=' + sourceId,
dataType: 'json',
success: function (data) {
var degreeArr = [];
for (var i = 0; i < data.length; i++) {
var item = data[i];
var latitude = item.latitude;
var longtitude = item.longtitude;
degreeArr.push(longtitude, latitude);
}
drawLine(degreeArr, sourceId, positionNum);
}
})
}
/* cesium 绘制线 */
function drawLine(degreeArr, sourceId, textName) {
viewer.entities.add({
id: sourceId,
name: textName,
position: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1]),
//位置
label: { //标签文字
text: textName,
font: '16px MicroSoft YaHei',
fillColor: Cesium.Color.RED,//填充颜色
outlineColor: Cesium.Color.RED,//轮廓颜色
outlineWidth: 0.2,//轮廓宽度
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(- 20, -15),
horizontalOrigin: Cesium.HorizontalOrigin.LEFT
},
polyline: { //polyline折线实体
positions: Cesium.Cartesian3.fromDegreesArray(degreeArr),//位置
width: 5,//折线宽度
material: new Cesium.PolylineGlowMaterialProperty({ //具有发光效果的线
glowPower: 0.2,//发光的强度,值为线宽的百分比(0-1.0)
color: Cesium.Color.BLUE //发光的颜色
}),//材质
clampToGround: true //地表层高度模式
}
});
viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(degreeArr[0], degreeArr[1], 60000)
});
}
/* 移除线 */
function removeLine() {
$.ajax({
url: '/query/querySurveySource',
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var id = item.id;
var radar = viewer.entities.getById(id);
}
}
})
}
// 航次方式展示接口请求
function expeditionAjax(url) {
$.ajax({
url: url,
dataType: "json",
success: function (data) {
var titleHtml = '<div class="data_set cl"><div class="data_title"><span class="data_num">' + data.count
+ '</span><span class="DS">种数据类型<span></div></div>';
var listHtml = '<ul class="expeditionList">';
var dataList = data.rows;
for (var i = 0; i < dataList.length; i++) {
var item = dataList[i];
var shipId = item.id;
listHtml += '<li><a class="expeditionHref" href="detail?expedition=' + item.expedition + '" target="_blank">' + item.expedition + '</a><p class="infoBox"><b class="legend">首席科学家: </b><span>' + item.chief + '</span></p><hr></li>'
mapData(shipId, item.expedition); // 搜索数据和地图进行交互
}
listHtml += '</ul>';
$(".container").html(titleHtml + listHtml);
$('.expeditionList').find('li').eq(0).addClass('on');
$(".expeditionList li").click(function () {
$(this).addClass("on").siblings().removeClass("on");
})
}
})
}
// 地图线颜色
function setColor(id, color) {
viewer.entities.getById(id).polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.3,
color: color
});
}
// 格式化JSON日期
function fmtDate(obj) { // obj 为日期
var date = new Date(obj);
var y = 1900 + date.getYear();
var m = "0" + (date.getMonth() + 1);
var d = "0" + date.getDate();
return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
}
//数据集站位
function stationData(data, index) {
var longtitude = data.longtitude == 0 ? data.launchLongtitude : data.longtitude;
var latitude = data.latitude == 0 ? data.launchLatitude : data.latitude;
var id = data.id; //
var shipId = data.shipId; // 航次Id
var stationNum = data.stationNum; //站位号
var diveNum = data.diveNum; //潜次编号
var sampleNo = data.sampleNo//编号
console.log(sampleNo)
var stationObj = viewer.entities.add({
id: id,
name: sampleNo !== '' ? sampleNo : (diveNum !== '' ? stationNum !== '' || stationNum !== 'undefined' ? diveNum : '' : stationNum),
position: Cesium.Cartesian3.fromDegrees(longtitude, latitude),
//位置
label: { //文字标签
text: sampleNo !== '' ? sampleNo : (diveNum !== '' ? stationNum !== '' || stationNum !== 'undefined' ? diveNum : '' : stationNum),
font: '16px MicroSoft YaHei',
fillColor: Cesium.Color.YELLOW,//填充颜色
outlineColor: Cesium.Color.YELLOW,//轮廓颜色
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,//垂直方向以底部来计算标签的位置
pixelOffset: new Cesium.Cartesian2(0, 50) //偏移量
},
billboard: { //图标
image: basePath + '/images/station.png',
scale: 1,
}
});
viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置 */
stationArrList.push(stationObj);
if (index === 0) {
stationPrev = index;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(longtitude, latitude, 300000)
});
}
}
// 搜索数据和地图进行交互
function mapData(shipId, expedition) {
var degreeArr = [];
$.ajax({
url: 'query/queryTrackByShipId?shipId=' + shipId,
dataType: 'json',
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var longtitude = item.longtitude;
var latitude = item.latitude;
degreeArr.push(longtitude, latitude);
}
if (degreeArr.length != 0) {
drawLine(degreeArr, shipId, expedition);
}
}
})
}
function updateAll() {
let open = false
for (let item of allDataList) {
for (var x = 0; x < $('.info_li').length; x++) {
if ($('.info_li').eq(x).attr('datatype') == item.dataType) {
if ($('.info_li').eq(x).nextAll('.' + item.dataType).length > 0) {
var info_li = $('.info_li').eq(x).nextAll('.' + item.dataType).eq(0).attr('style');
if (info_li) {
var info_lir = info_li.split(':')[1].replace(/\s/g, "");
if (info_lir == 'none;') {
$('.info_li').eq(x).find('.openShow').css('display','none')
$('.info_li').eq(x).nextAll('.' + item.dataType).find('.openShow').css('display','none')
} else {
open = true
$('.info_li').eq(x).find('.openShow').css('display','block')
$('.info_li').eq(x).nextAll('.' + item.dataType).find('.openShow').css('display','block')
}
}
}
}
}
}
if (open) {
$(".DS").text("条数据集")
} else {
$(".DS").text("种数据类型")
}
}
});
</script>
</html>