<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('地图')" />
|
<link rel="stylesheet" th:href="@{/map/map.css}"/>
|
<link rel="stylesheet" th:href="@{/map/tab.css}"/>
|
</head>
|
<style>
|
#map {
|
width: calc(100% - 400px);
|
z-index: 0;
|
}
|
</style>
|
<body>
|
|
<div id="container">
|
<!-- <div id="menu">-->
|
<!-- <div class="menu-title">-->
|
<!-- <span>工程项目分布图</span>-->
|
<!-- </div>-->
|
<!-- <ul class="menu-tree">-->
|
<!-- <li class="active"><i class="fa fa-building-o"></i>项目详情</li>-->
|
<!-- <li><i class="fa fa-map-marker"></i>勘探点</li>-->
|
<!-- <li><i class="fa fa-paper-plane-o"></i>参与人</li>-->
|
<!-- <li><i class="fa fa-bar-chart"></i>工作量</li>-->
|
<!-- <!–<li><i class="fa fa-print"></i>打印导出</li>–>-->
|
<!-- </ul>-->
|
<!-- </div>-->
|
<div id="map"></div>
|
</div>
|
|
<div class="custom-tab" id ="customData">
|
<ul class="custom-tab-title">
|
<li class="active">勘探点详情</li>
|
<li>原始记录</li>
|
</ul>
|
<div class="custom-tab-content">
|
<div class="custom-tab-item active">
|
<table class="prospect-detail">
|
<tr>
|
<td>编号</td>
|
<td style="min-width: 90px;">{{hole.code}}</td>
|
<td>类型</td>
|
<td style="min-width: 90px;">{{hole.type}}</td>
|
</tr>
|
<tr>
|
<td>设计深度(m)</td>
|
<td colspan="3">{{hole.depth}}</td>
|
</tr>
|
<tr>
|
<td>记录深度(m)</td>
|
<td>{{hole.endDepth}}</td>
|
<td>总记录数</td>
|
<td>{{hole.datacount}}</td>
|
</tr>
|
<tr>
|
<td>发布坐标</td>
|
<td>{{hole.longitude}}</br>{{hole.latitude}}</td>
|
<td>基准点坐标</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td>测量坐标</td>
|
<td>{{hole.mapLongitude}}</br>{{hole.mapLatitude}}</td>
|
<td>测量相对坐标</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td>发布时间</td>
|
<td>{{hole.mapTime}}</td>
|
<td>更新时间</td>
|
<td>{{hole.updateTime}}</td>
|
</tr>
|
<tr>
|
<td>负责人</td>
|
<td></td>
|
<td>描述员</td>
|
<td></td>
|
</tr>
|
<tr>
|
<td>司钻员</td>
|
<td></td>
|
<td>钻机</td>
|
<td></td>
|
</tr>
|
</table>
|
</div>
|
<div class="custom-tab-item">
|
<div class="chart-label">
|
<span onclick="histogram()" ><i class="fa fa-external-link"></i>柱状图</span>
|
<span><i class="fa fa-external-link" ></i>记录分布点</span>
|
</div>
|
|
<div v-for="(record,index) in recordList" class="record-item">
|
<div class="item-title">
|
<i class="fa fa-star-o star" aria-hidden="true"></i>
|
<span class="biaohao">{{index}}</span>
|
<i class="fa fa-paperclip clip" aria-hidden="true"></i>
|
<span>{{record.beginDepth}}m~{{record.endDepth}}m</span>
|
</div>
|
<div class="item-title">
|
<i class="fa fa-square square"></i>
|
<span>{{record.frequencyType}}</span>
|
<span class="date">{{record.gpsTime}}</span>
|
</div>
|
<div class="record-content">
|
{{record.content}}
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/js/tdt.js}"></script>
|
<script th:src="@{/js/vue.min.js}"></script>
|
|
<th:block th:include="include :: footer" />
|
|
<script th:inline="javascript">
|
var project =[[${project}]];
|
var holes= [[${holes}]];
|
var clickHoleId;//存储点击的钻孔id
|
|
var map ;
|
var zkicon = new T.Icon({
|
iconUrl: '/bjfw/images/icons/zk.png',
|
iconSize: new T.Point(30, 30),
|
iconAnchor: new T.Point(6, 40),
|
});
|
|
$(function(){
|
map = new T.Map('map');
|
map.centerAndZoom(new T.LngLat(116.38, 39.9), 16);
|
var control = new T.Control.Zoom();
|
control.setPosition(T_ANCHOR_TOP_RIGHT);
|
map.addControl(control);// 添加缩放平移控件
|
|
var scale = new T.Control.Scale();// 创建比例尺控件对象
|
var ctrl = new T.Control.MapType();
|
ctrl.setPosition(T_ANCHOR_BOTTOM_RIGHT);
|
// 添加控件
|
map.addControl(ctrl);
|
bindTabEvent();
|
loadHoleOnMap();
|
if(holes !=null && holes.length>0){
|
clickHoleId=holes[0].ids;
|
bindHoleData(holes[0]);
|
}
|
})
|
|
|
var vm = new Vue({
|
el: '#customData',
|
data() {
|
return {
|
hole: {
|
code:'',
|
type:'',
|
},
|
recordList:'',
|
}
|
},
|
mounted: function () {
|
},
|
methods: {
|
}
|
});
|
|
//显示钻孔
|
function loadHoleOnMap() {
|
if(holes !=null && holes.length>0 ){
|
var centerLng,centerLat;
|
for(var i=0;i<holes.length;i++){
|
centerLng=holes[i].mapLongitude;
|
centerLat=holes[i].mapLatitude;
|
var marker = new T.Marker(new T.LngLat(centerLng, centerLat), { title: "钻孔编号：" + holes[i].code , icon : zkicon});
|
addZkClickHandler(holes[i],marker);
|
map.addOverLay(marker);
|
addLabel(holes[i]);
|
}
|
map.centerAndZoom(new T.LngLat(centerLng, centerLat), 16);
|
}
|
}
|
|
//钻孔的点击事件
|
function addZkClickHandler(hole,marker) {
|
marker.addEventListener("click", function () {
|
clickHoleId = hole.ids;
|
bindHoleData(hole);
|
});
|
}
|
//绑定钻孔的信息和原始记录d
|
function bindHoleData(hole){
|
$.ajax({
|
url: ctx + "geo/projectwork/holedata?holeId="+hole.ids,
|
type: "GET",
|
dataType: "json",
|
async: false,
|
contentType: "application/json;charset=utf-8",
|
success: function (data) {
|
if(data.code == 0){
|
var hole = data.hole;
|
var yantus= data.yantuList;
|
//勘探点类型（1-探井、2-钻孔）
|
hole.type = hole.type=='1'?"探井":"钻孔";
|
hole.datacount = yantus.length;
|
var endDepth = yantus[yantus.length-1].endDepth;
|
hole.endDepth=endDepth;
|
setRecordList(yantus);
|
vm.hole=hole;
|
vm.recordList = yantus;
|
}else{
|
alert("获取数据失败：" + data.msg);
|
}
|
},
|
error: function () {
|
console.log("获取数据失败");
|
}
|
});
|
}
|
|
//设置岩土信息
|
function setRecordList (yantus) {
|
|
for(var i =0;i<yantus.length;i++){
|
var yantu =yantus[i];
|
var content ="";
|
content +="岩土类型："+ yantu.frequencyType +"; ";
|
content +="岩土定名："+ yantu.layerName +"; ";
|
content +="起始深度："+ yantu.beginDepth +"m; ";
|
content +="终止深度："+ yantu.endDepth +"m; ";
|
|
if(yantu.zycf !=null){
|
content +="主要成分："+ yantu.zycf +"; ";
|
}
|
|
if(yantu.cycf !=null){
|
content +="次要成分："+ yantu.cycf +"; ";
|
}
|
if(yantu.ys !=null){
|
content +="颜色："+ yantu.ys +"; ";
|
}
|
|
if(yantu.bhw !=null){
|
content +="包含物："+ yantu.bhw +"; ";
|
}
|
|
if( yantu.sd !=null){
|
content +="湿度："+ yantu.sd +"; ";
|
}
|
if(yantu.zt !=null){
|
content +="状态："+ yantu.zt +"; ";
|
}
|
if(yantu.msd !=null){
|
content +="密实度："+ yantu.msd +"; ";
|
}
|
if(yantu.klxz !=null){
|
content +="颗粒型装："+ yantu.klxz +"; ";
|
}
|
if(yantu.kljp !=null){
|
content +="颗粒级别："+ yantu.kljp +"; ";
|
}
|
yantus[i].content =content;
|
}
|
|
}
|
|
//显示钻孔标签
|
function addLabel(e) {
|
var label = new T.Label({
|
text: e.code,
|
position: new T.LngLat(e.mapLongitude, e.mapLatitude),
|
offset: new T.Point(-25, 0)
|
});
|
label.setBackgroundColor("transparent");
|
label.setBorderLine(0);
|
map.addOverLay(label);
|
}
|
|
//跳转页面 查看点击的钻孔的柱状图
|
function histogram(){
|
if(clickHoleId !=null){
|
$.modal.openTab("柱状图", ctx+"/geo/projectwork/histogram?id="+clickHoleId);
|
}
|
}
|
|
|
//绑定切换tab 的时间
|
function bindTabEvent() {
|
$("#menu li").on("click", function() {
|
$(this).siblings().removeClass("active");
|
$(this).addClass("active");
|
})
|
|
$(".custom-tab-title li").on("click", function() {
|
$(this).siblings().removeClass("active");
|
$(this).addClass("active");
|
var index = $(this).index();
|
$(".custom-tab-item").removeClass("active");
|
$(".custom-tab-item").eq(index).addClass("active");
|
})
|
}
|
|
|
</script>
|
</body>
|
|
</html>
|
