xujingliang
/
Fei_Xian_Sen_Lin_Fang_Huo_Dian_Zi_Sha_Pan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实现网格员地图联动，网格区划图片展示

Browse Source
main
徐景良 2 years ago
parent fb9b9b11d7
commit 9742dd0663
10 changed files with 129 additions and 10 deletions
Show Stats Download Patch File Download Diff File

16
css/wg.css
Unescape Escape View File

@ -6,7 +6,7 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999999;
/* display: none; */
display: none;
}
.wg {
@ -168,6 +168,20 @@
overflow-y: scroll;
}
.wg-con-right .wg-ri-image-card {
width: calc(100% - 100px);
margin-left:30px;
flex-wrap: wrap;
max-height: 650px;
overflow-y: scroll;
}
.wg-ri-image-card img{
width:100%;
margin:0px auto;
}
.wg-con-right .wg-ri-item {
background-color: rgb(12, 69, 76);
width: 240px;

BIN
img/wanggeyuan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

24
index.html
Unescape Escape View File

@ -20,6 +20,11 @@
<meta name="msapplication-TileColor" content="#62a8ea" />
<script type="text/javascript" src="/lib/jquery/jquery-2.1.4.min.js"></script>
<!-- URL配置信息 -->
<script src="js/config.js"></script>
@ -46,6 +51,12 @@
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
<link rel='stylesheet' href='http://mars3d.cn/temp/css/divGraphic.css'>
<!-- jquery viewer图片查看器 -->
<script type="text/javascript" src="/lib/viewer/viewer-jquery.min.js"></script>
<!-- <script type="text/javascript" src="/lib/viewer/viewer.min.js"></script> -->
<link rel="stylesheet" href="/lib/viewer/viewer.min.css">
</head>
<body class="dark" style="padding:0px;">
@ -180,9 +191,9 @@
</div>
<!-- <div class="peizhi" id="peizibtn"> 配置 </div> -->
<div class="peizhi" id="wg-show"> 网格化管理 </div>
<!-- <div class="peizhi" id="wg-show" > 网格化管理 </div> -->
<div class="luxian" id="luxian"> 路线规划 </div>
<div class="peizhi" id="luxian"> 路线规划 </div>
<!-- <div class="findroad" id="findroad"> 自动寻路 </div> -->
<!-- 底部样式 -->
<div class="bottom"></div>
@ -324,13 +335,20 @@
<div class="wg-con-right">
<div class="wg-right-control">
<div class="wg-right-control-btn">
<div class="wg-control-tab wg-active">网格员</div>
<div class="wg-control-tab wg-active" id="show-wg-control">网格员</div>
<div class="wg-control-tab wg-control-tab2" id="show-wg-img">网格区划图</div>
</div>
</div>
<div class="wg-ri-card wg-control-content" id="wg-ri-card" data-tab="wg-control-tab1">
</div>
<div class="wg-ri-image-card" id="wg-ri-image-card">
<div class="tpSHow" data-original="">
<img style="width:1px;" src="">
</div>
</div>
</div>
</div>
</div>

23
js/index.js
Unescape Escape View File

@ -1751,7 +1751,8 @@ function bindShowTilesParts() {
}
let name = null;
name = event.graphic.entity.id;
name = event.graphic.entity.id ? event.graphic.entity.id : null;
// 判断点击是否是无人机
if (name.match("UAV")) {
@ -1829,6 +1830,26 @@ function loadUserList(event){
break;
case "向导": url ="/api/FirePrevention/Loadxiangdaouser";
break;
case '网格化管理':
$('#wg-container').fadeIn();
let townName = event.graphic.options.attr.zhen;
let villageName = event.graphic.options.attr.cun;
$("#wg-ri-image-card").hide();
$("#wg-ri-card").show();
// 点击第一层
$(`.${townName}`).click();
// 点击第二层
$(`.${villageName}`).click();
let thr = $(`.${villageName}`).parent().find('.wg-con-left-thr-item').first().click();
console.log("thrthr:::",thr);
console.log("layerlayer:::",event.graphic.options.attr.zldwmc);
;
}
if(url){

BIN
js/photo-js.zip
View File

Binary file not shown.

42
js/wg.js
Unescape Escape View File

@ -24,7 +24,7 @@ $(document).ready(function () {
});
let secHtml = `
<ul class="wg-con-left-sec">
<span class="wg-sec-name">${secNode.areaName}</span>
<span class="wg-sec-name ${secNode.areaName}">${secNode.areaName}</span>
<li class="wg-con-left-sec-item">
<ul class="wg-con-left-thr">
${thrList}
@ -36,7 +36,7 @@ $(document).ready(function () {
});
let firHtml = `
<div class="wg-con-left-fir">
<span class="wg-fir-name">${firstNode.areaName}</span>
<span class="wg-fir-name ${firstNode.areaName}">${firstNode.areaName}</span>
${secList}
</div>
`
@ -53,7 +53,7 @@ function wgTreeAnimation() {
$('.wg-con-left-sec-item').hide()
// 点击一级目录
$('.wg-fir-name').click(function () {
$('.wg-con-left-sec').slideUp()
// $('.wg-con-left-sec').slideUp()
if ($(this).nextAll().is(":visible")) {
$('.wg-con-left-sec-item').slideUp()
}
@ -88,7 +88,35 @@ function wgTreeAnimation() {
$('#wg-show').click(function () {
$('#wg-container').fadeIn()
});
// 网格员
$("#show-wg-control").click(function(){
// $("#wg-ri-image-card").hide();
$("#wg-ri-card").show();
})
// 区划图
$("#show-wg-img").click(function(){
// $("#wg-ri-image-card").find("img").attr("src","http://123.132.248.154:9223/"+$(this).attr("data-url"));
// $("#wg-ri-image-card").show();
// $("#wg-ri-card").hide();
$("#wg-ri-image-card").viewer({
url: 'data-original'
})
$("#wg-ri-image-card").find("img").click();
})
}
// var VIEW;
// function reloadWiewer(){
// VIEW= $('#wg-ri-image-card').Viewer({
// url:'dat1a-original',
// });
// }
function showWgDetail(id) {
// /api/Grid/LoadChildGridUser
$.ajax({
@ -100,6 +128,8 @@ function showWgDetail(id) {
success: function (data) {
let res = data.data
$('#wg-ri-card').empty()
$("#show-wg-img").attr("data-url",res.imaUrl);
$("#wg-ri-image-card").find("img").attr("src","http://123.132.248.154:9223/"+res.imaUrl);
res.dataInfo.forEach((item) => {
let html = `
<ul class="wg-ri-item">
@ -119,11 +149,13 @@ function showWgDetail(id) {
</li>
</ul>
`
$('#wg-ri-card').append(html)
})
}
})
}
function showImage(url){
}

5
lib/viewer/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
lib/viewer/viewer-jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
lib/viewer/viewer.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
lib/viewer/viewer.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save