<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title></title>
|
<!-- <link rel="stylesheet" href="./css/style.css"> -->
|
<!-- <link rel="stylesheet" href="./css/weather.css"> -->
|
<style>
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
|
.river-course .reser-box>div:first-child {
|
display: block;
|
}
|
|
.river-course .reser-box>div {
|
display: none;
|
padding: 15px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
/* width: 100%; */
|
height: 100%;
|
scrollbar-width: thin;
|
box-sizing: border-box;
|
overflow-y: auto !important;
|
}
|
|
|
::-webkit-scrollbar {
|
width: 0.4em;
|
}
|
|
/* 横å‘滚动æ¡æ ·å¼ */
|
::-webkit-scrollbar:horizontal {
|
|
height: 0.5em;
|
|
}
|
|
/* Track */
|
::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
-webkit-border-radius: 10px;
|
border-radius: 10px;
|
}
|
|
/* Handle */
|
::-webkit-scrollbar-thumb {
|
-webkit-border-radius: 10px;
|
border-radius: 10px;
|
/* background: rgba(255, 0, 0, 0.8); */
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
}
|
|
::-webkit-scrollbar-thumb:window-inactive {
|
|
background: rgba(169, 169, 169, 0.4);
|
|
}
|
|
.river-course .reser-box table {
|
font-size: 12px;
|
color: #333333;
|
width: 100%;
|
border-width: 1px;
|
border-collapse: collapse;
|
}
|
|
.river-course .reser-box table th,
|
.river-course .reser-box table td {
|
font-weight: 400;
|
font-style: normal;
|
font-size: 12px;
|
border-width: 1px;
|
border-style: solid;
|
border-color: #3131311a;
|
text-align: left;
|
text-align: center;
|
line-height: 1.4;
|
}
|
|
.esri-component.esri-attribution.esri-widget {
|
display: none !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(2) tr td:nth-child(1),
|
.flood-control-and-scheduling table:nth-child(2) tr td:nth-child(3),
|
.flood-control-and-scheduling table:nth-child(2) tr td:nth-child(5) {
|
width: 14% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(2) tr td:nth-child(2) {
|
width: 30% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(2) tr td:nth-child(4) {
|
width: 10% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(3) tr td:nth-child(1),
|
.flood-control-and-scheduling table:nth-child(3) tr td:nth-child(3) {
|
width: 14% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(3) tr td:nth-child(2) {
|
width: 30% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(4) tr td:nth-child(1),
|
.flood-control-and-scheduling table:nth-child(4) tr td:nth-child(3) {
|
width: 14% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(4) tr td:nth-child(2) {
|
width: 30% !important;
|
}
|
|
|
.flood-control-and-scheduling table:nth-child(5) tr td:nth-child(1),
|
.flood-control-and-scheduling table:nth-child(6) tr td:nth-child(1) {
|
width: 14% !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(2) td,
|
.flood-control-and-scheduling table:nth-child(3) td,
|
.flood-control-and-scheduling table:nth-child(4) td,
|
.flood-control-and-scheduling table:nth-child(5) td {
|
border-bottom: none;
|
}
|
|
.flood-control-and-scheduling table:nth-child(1) th {
|
border: none;
|
}
|
|
.flood-control-and-scheduling table:nth-child(1) th div {
|
height: 60px !important;
|
line-height: 40px !important;
|
font-size: 18px;
|
}
|
|
|
.flood-control-and-scheduling tr td {
|
/* height: 42px !important; */
|
line-height: 42px !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(4) td>div {
|
height: 100px !important;
|
line-height: 100px !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(5) td>div {
|
display: flex !important;
|
flex-direction: column !important;
|
}
|
|
.flood-control-and-scheduling table:nth-child(5) td>div>div {
|
flex: 1 !important;
|
padding-left: 10px;
|
text-align: left;
|
|
}
|
|
|
.flood-control-and-scheduling table:nth-child(5) td>div>div:first-child {
|
border-bottom: 1px solid #3131311a;
|
|
}
|
|
.problem-description {
|
color: #D66F39;
|
}
|
|
.river-course img {
|
margin: 8px;
|
width: 80px;
|
height: 80px;
|
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="river-course">
|
<div class="reser-box">
|
<!-- 巡河日志 -->
|
<div class="flood-control-and-scheduling">
|
<table>
|
<tr>
|
<th>
|
<div class="header-title">
|
<span class="river-name" style="text-decoration:underline;"></span> 河湖巡查 <span
|
class="portal-year" style="text-decoration:underline;"></span> 年 第 <span
|
class="portal-num" style="text-decoration:underline;"></span> 次
|
</div>
|
</th>
|
</tr>
|
</table>
|
<table>
|
<tbody>
|
<tr>
|
<td>河长姓名</td>
|
<td>
|
<span id="hzxm"></span>
|
</td>
|
<td>河长职务</td>
|
<td>
|
<span class="chief-post"></span>
|
</td>
|
<td>所属政区</td>
|
<td>
|
<span class="region-name"></span>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<table>
|
<tr>
|
<td>当日天气</td>
|
<td>
|
<span class="weather"></span>
|
</td>
|
<td>巡河时间</td>
|
<td> <span class="patrol-start"></span> 至 <span class="patrol-end"></span> </td>
|
</tr>
|
</table>
|
<table>
|
<tr>
|
<td>巡河照片</td>
|
<td>
|
<div class="patrol-pic">
|
|
</div>
|
</td>
|
<td>巡河描述</td>
|
<td>
|
<div class="tour-river">
|
|
</div>
|
</td>
|
</tr>
|
</table>
|
<table>
|
<tr>
|
<td>发现问题</td>
|
<td>
|
<div>
|
<div>
|
<div>
|
问题描述：
|
</div>
|
<div class="problem-description">
|
|
</div>
|
</div>
|
<div>
|
<div>
|
问题照片：
|
</div>
|
<div class="problem-photo">
|
|
</div>
|
</div>
|
</div>
|
</td>
|
</tr>
|
</table>
|
<table>
|
<tbody>
|
<tr>
|
<td>
|
巡河地图
|
</td>
|
<td>
|
<div id="mapDiv" style="width: 100%;height: 460px;">
|
|
</div>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
|
<div class="load-box-list">
|
<div class="rote-load">
|
<img src="./img/rote.jpg" alt="">
|
<span>正在加载</span>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<script src="../../js/jquery-1.11.3.min.js"></script>
|
<link rel="stylesheet" href="https://watermap.ysy.com.cn/jsapi/4.15/esri/css/main.css" />
|
<script src="https://watermap.ysy.com.cn/jsapi/4.15/init.js"></script>
|
|
<script>
|
var map = null,
|
view = null;
|
require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/geometry/Polyline",
|
"esri/layers/GraphicsLayer", "esri/layers/TileLayer", "esri/layers/MapImageLayer",
|
"esri/core/urlUtils","esri/geometry/SpatialReference"
|
], function (Map, MapView, Graphic, Polyline,
|
GraphicsLayer, TileLayer, MapImageLayer,urlUtils,SpatialReference) {
|
|
var tiledLayer = new TileLayer({
|
url: "https://watermap.ysy.com.cn/arcgis/rest/services/basemap/HNBasemap_standard/MapServer"
|
// url:"https://10.20.2.55:6443/arcgis/rest/services/basemap/HNBasemap_standard/MapServer"
|
});
|
|
|
map = new Map({
|
layers: [tiledLayer]
|
});
|
view = new MapView({
|
container: "mapDiv", // Reference to the view div created in step 5
|
map: map, // Reference to the map object created before the view
|
});
|
|
$.ajax({
|
url: 'http://10.41.25.196/hzz/public/onemap/patrol/log',
|
type: 'GET',
|
data: {
|
code: getQueryStringByKey("code")
|
},
|
datatype: 'json',
|
success: function (res) {
|
|
var log = res.result.log;
|
|
|
$("#hzxm").html(log.chiefName);
|
|
$('.chief-post').text(log.chiefPost);
|
|
$('.header-title .river-name').text(log.riverName);
|
|
$('.header-title .portal-year').text(log.portalYear);
|
$('.header-title .portal-num').text(log.portalNum);
|
|
|
$('.flood-control-and-scheduling .patrol-start').text(log.patrolStart);
|
$('.flood-control-and-scheduling .patrol-end').text(log.patrolEnd);
|
|
$('.region-name').text(log.regionName);
|
|
$('.patrol-pic').empty();
|
|
$('.weather').text(log.weather);
|
|
$('.tour-river').text(log.detail);
|
|
for (var i = 0; i < log.patrolPic.length; i++) {
|
$('.patrol-pic').append("<img src='" + log.patrolPic[i] + "' alt=''>");
|
}
|
|
// 保存问题相关的；
|
var problems = res.result.problems;
|
|
$('.problem-description').empty();
|
$('.problem-photo').empty();
|
|
for (var i = 0; i < problems.length; i++) {
|
// if (problems[i].patrolCode == log.patrolCode) {
|
$('.problem-description').append("<div>问题【" + (i + 1) + "】." + problems[i].title + "</div>");
|
for (var j = 0; j < problems[i].sceneImg.length; j++) {
|
$('.problem-photo').append("<img src='" + problems[i].sceneImg[j] + "' alt=''>");
|
}
|
// }
|
|
}
|
|
|
|
//轨迹图层
|
//var pathLayer = new GraphicsLayer()
|
var state = getQueryStringByKey("state")
|
var track = res.result.track
|
var points = track.routeData.geometry.coordinates
|
//起点
|
var startPoint = {
|
type: 'point',
|
longitude: points[0][0],
|
latitude: points[0][1]
|
}
|
var markerSymbol = {
|
type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
|
url: "./img/qd.png",
|
width: 32,
|
height: 32
|
}
|
markerSymbol.yoffset = "16px"
|
|
var startPointGraphic = new Graphic({
|
geometry: startPoint,
|
symbol: markerSymbol
|
})
|
|
view.graphics.add(startPointGraphic);
|
//pathLayer.add(startPointGraphic)
|
|
//终点
|
var endPoint = {
|
type: 'point',
|
longitude: points[points.length - 1][0],
|
latitude: points[points.length - 1][1]
|
}
|
var endSymbol = {};
|
|
//巡查未完成
|
if (state == "1") {
|
endSymbol = {
|
type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
|
url: "./img/xc.png",
|
width: 32,
|
height: 32
|
}
|
} else if (state == "2") {
|
endSymbol = {
|
type: "picture-marker", // autocasts as new SimpleMarkerSymbol()
|
url: "./img/zd.png",
|
width: 32,
|
height: 32
|
}
|
}
|
|
|
var endPointGraphic = new Graphic({
|
geometry: endPoint,
|
symbol: endSymbol
|
})
|
|
view.graphics.add(startPointGraphic);
|
//pathLayer.add(startPointGraphic)
|
|
//轨迹线
|
var line = new Polyline({
|
paths: points,
|
spatialReference: {
|
wkid: 4326
|
}
|
});
|
var polylineSymbol = {
|
type: 'simple-line',
|
color: [226, 119, 40],
|
width: 4
|
}
|
var polylineGraphic = new Graphic({
|
geometry: line,
|
symbol: polylineSymbol
|
})
|
|
view.graphics.add(polylineGraphic);
|
view.graphics.add(endPointGraphic);
|
|
// pathLayer.add(polylineGraphic)
|
// pathLayer.add(endPointGraphic)
|
|
// map.add(pathLayer)
|
|
view.goTo({
|
target: polylineGraphic,
|
zoom: 15
|
})
|
}
|
})
|
});
|
|
function getQueryStringByKey(key) {
|
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
|
}
|
</script>
|
</body>
|
|
</html>
|
