|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>天空地一体化监测平台</title>
|
|
|
<link rel="stylesheet" href="./css/style.css" />
|
|
|
<script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>
|
|
|
<!-- mapbox库 -->
|
|
|
<link href="./lib/mapboxgl/mapbox-gl.css" rel="stylesheet">
|
|
|
<script src="./lib/mapboxgl/mapbox-gl.js"></script>
|
|
|
|
|
|
<script src="./js/shijie.js"></script>
|
|
|
<script src="./js/county.js"></script>
|
|
|
<script src="./js/village.js"></script>
|
|
|
<script src="./js/shexiangtou.js"></script>
|
|
|
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
|
|
<script>
|
|
|
var BASE_URL = "http://123.132.248.154:9104";
|
|
|
var APP_URL = "http://123.132.248.154:9103";
|
|
|
if (localStorage.getItem("X-Token") == null || localStorage.getItem("X-Token") == "") {
|
|
|
window.location.href = APP_URL;
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="isFullScreen" style="background:rgba(0,0,0,0.5);display: none;">
|
|
|
<div class="tishi">
|
|
|
<div style="width:100%;height:200px;text-align:center;padding:24px 0px;">
|
|
|
<img src="./images/鼠标.png" alt="">
|
|
|
<br>
|
|
|
<span> </span>
|
|
|
是否进入全屏 ？
|
|
|
</div>
|
|
|
<div style="width:100%;height:100px;border-top:1px solid rgba(255,255,255,0.3)">
|
|
|
<div class="noFullScreen" style="float:left;width:99px;text-align:center;line-height:50px;float:left;">否
|
|
|
</div>
|
|
|
<div class="yesFullScreen"
|
|
|
style="float:left;width:99.5px;text-align:center;line-height:50px;float:right;">是</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
天空地一体化监测平台
|
|
|
<span id=localtime style=" font-size:14px; position: absolute; right: 80px; top:0px; "></span>
|
|
|
<span style="font-size:14px; position: absolute; right: 30px; top:0px;cursor:pointer;">
|
|
|
<img id="logoutButton" src="./images/back-management.png" alt="" width="18px;">
|
|
|
</span>
|
|
|
</header>
|
|
|
<div id="content">
|
|
|
|
|
|
<div class="content_left">
|
|
|
<div class="title">线索办理</div>
|
|
|
<div class="dtuplc">
|
|
|
<div class="dtu">
|
|
|
<div id="container" style="height: 110%;"></div>
|
|
|
</div>
|
|
|
<div class="plc">
|
|
|
<div id="container1" style="height: 240px;width:140px;position: relative;top:-34px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--
|
|
|
DTU和PLC完
|
|
|
-->
|
|
|
<div class="online">
|
|
|
<div class="title">线索线索统计</div>
|
|
|
<div class="online_con" id="container2">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="industry">
|
|
|
<div class="title">线索分类统计</div>
|
|
|
<div class="industry_con" id="container3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content_center">
|
|
|
<div class="center_top">
|
|
|
<div class="title"><img class="imgstyle_common" src="./images/drone.png" />无人机监测</div>
|
|
|
<div class="center_top_con" id="distribution_map">
|
|
|
<div class="left_menu">
|
|
|
<div class="center_top_con_but" data-layerName="monitorLayer" data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/jiance.png" />
|
|
|
<img class="centerimgActive" style="display: none;" src="./images/jiance-active.png" />
|
|
|
监测地图</span>
|
|
|
</div>
|
|
|
<div class="center_top_con_but" data-layerName="yingxiang">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/dianzimap.png" />
|
|
|
<img class="centerimgActive" style="display: none;"
|
|
|
src="./images/dianzimap-active.png" />
|
|
|
电子地图</span>
|
|
|
</div>
|
|
|
<div class="center_top_con_but" data-layerName="weixingditu">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/weixingmap.png" />
|
|
|
<img class="centerimgActive" style="display: none;"
|
|
|
src="./images/weixingmap-active.png" />
|
|
|
卫星地图</span>
|
|
|
</div>
|
|
|
<!-- <div class="center_top_con_but" data-layerName="countyLayer" data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/xianjie.png" />
|
|
|
<img class="centerimgActive" style="display: none;" src="./images/xianjie-active.png" />
|
|
|
县 界</span>
|
|
|
</div> -->
|
|
|
<div class="center_top_con_but" data-layerName="state-fills" data-isActive="true">
|
|
|
<span>
|
|
|
<img class="centerimg" style="display: none;" src="./images/xianjie.png" />
|
|
|
<img class="centerimgActive" src="./images/xianjie-active.png" />
|
|
|
行政区划</span>
|
|
|
</div>
|
|
|
<!-- <div class="center_top_con_but" data-layerName="villageLayer" data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/xianjie.png" />
|
|
|
<img class="centerimgActive" style="display: none;" src="./images/xianjie-active.png" />
|
|
|
村界</span>
|
|
|
</div> -->
|
|
|
<div class="center_top_con_but" data-layerName="monitorTwoLayer" data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/control.png" />
|
|
|
<img class="centerimgActive" style="display: none;" src="./images/control-active.png" />
|
|
|
监 控</span>
|
|
|
</div>
|
|
|
<!-- <div class="center_top_con_but" id="UAVView" data-layerName="UAVLayer" data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/drone.png" />
|
|
|
<img class="centerimgActive" style="display: none;" src="./images/drone-active.png" />
|
|
|
无人机</span>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="right_menu">
|
|
|
<div class="center_top_con_but newCaseLayer" data-layerName="newCaseLayer"
|
|
|
data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/newscase.png" />
|
|
|
<img class="centerimgActive" style="display: none;"
|
|
|
src="./images/newscase-active.png" />
|
|
|
最新线索</span>
|
|
|
</div>
|
|
|
<!-- <div class="center_top_con_but" data-layerName="uavLayer" data-isActive="false">
|
|
|
<span>无人机</span>
|
|
|
</div> -->
|
|
|
<div class="center_top_con_but historyCaseLayer" data-layerName="historyCaseLayer"
|
|
|
data-isActive="false">
|
|
|
<span>
|
|
|
<img class="centerimg" src="./images/historycase.png" />
|
|
|
<img class="centerimgActive" style="display: none;"
|
|
|
src="./images/historycase-active.png" />
|
|
|
历史线索</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="center_bot" style="position:relative;">
|
|
|
<div class="title">今日线索处理</div>
|
|
|
<div
|
|
|
style="position:absolute;left:0px;top:50px;height:25px;width:100%;overflow: hidden;overflow: auto;z-index:10;">
|
|
|
<table class="panel-table" bordercolor="#0d48e0" border="1">
|
|
|
<thead style="line-height:10px;padding-right:17px;">
|
|
|
<tr class="aaa" align="center">
|
|
|
<td v-for="item in factoryHeader"
|
|
|
style="color: #CFD5E5; background:#0a1739;font-size: 14px; padding: 5px 0;"
|
|
|
style="width: 20%;">
|
|
|
{{ item.categories }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="todayCaseDeal1" style="width:100%;height:120px;">
|
|
|
<tr v-for="y in factory" class="aaa click_pop2" :data-caseId="y.id" align="center"
|
|
|
style="font-size: 14px;">
|
|
|
<!-- <td>{{ y.caseinfo.createtime }}</td> -->
|
|
|
<td>{{ y.examine_time }}</td>
|
|
|
<td>{{ y.typename }}</td>
|
|
|
<td>{{ y.case_description }}</td>
|
|
|
<td>{{y.streetname}} {{y.communityname}}</td>
|
|
|
<td>{{y.result_name ? y.result_name :
|
|
|
'--'}}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div style="width:100%;height:25px;position:absolute;top:50px;left:0px;z-index:100;"></div>
|
|
|
<div style="height: 160px;overflow:auto;position: relative;top:-8px;">
|
|
|
<table class="panel-table" bordercolor="#0d48e0" border="1">
|
|
|
<thead style="line-height:10px;padding-right:17px;">
|
|
|
<tr class="aaa" align="center">
|
|
|
<td v-for="item in factoryHeader"
|
|
|
style="color: #CFD5E5; font-size: 14px; padding: 5px 0;">
|
|
|
{{ item.categories }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody id="todayCaseDeal2" style="width:100%;height:120px;padding-bottom:100px;">
|
|
|
<tr v-for="y in factory" class="aaa click_pop2" :data-caseId="y.id" align="center"
|
|
|
style="font-size: 14px;">
|
|
|
<!-- <td>{{ y.createtime }}</td> -->
|
|
|
<td>{{ y.examine_time }}</td>
|
|
|
<td>{{ y.typename }}</td>
|
|
|
<td>{{ y.case_description }}</td>
|
|
|
<td>{{y.streetname}} {{y.communityname}}</td>
|
|
|
<td>{{y.result_name ? y.result_name :
|
|
|
'--'}}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
<div class="noData"><span v-if="!factory.length">暂无数据</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content_right">
|
|
|
<div class="report">
|
|
|
<div class="title">今日办理</div>
|
|
|
<div class="flex row" style="height: 150px;">
|
|
|
<div style="width: 50%;height: 100%;" class="flex jc-c ai-c">
|
|
|
<div class="report1 flex ai-c jc-c">
|
|
|
<p><span></span>今日上报</p>
|
|
|
<small id="todayReport">{{alarm.reportCount}}条</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 50%;height: 100%;" class="flex jc-c ai-c">
|
|
|
<div class="report2 flex ai-c jc-c">
|
|
|
<p><span></span>今日处理</p>
|
|
|
<small id="todayDeal">{{alarm.dealCount}} 条</small>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="news_report">
|
|
|
<div class="title">最新上报</div>
|
|
|
<div class="news_list" id="wufeng">
|
|
|
<ul id="newestReport">
|
|
|
<li v-for="item in almMsg" class="li02" :data-caseId="item.id">
|
|
|
<span
|
|
|
style="width:240px;overflow: hidden;display: block;float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{
|
|
|
item.streetname }} {{ item.case_description }}</span>
|
|
|
<span style="float:right;font-size:12px;">{{item.rep_time}}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data_box">
|
|
|
<div class="title">数据记录</div>
|
|
|
<div class="togglebutton">
|
|
|
<span class="togglebutton_bat active">本周</span>
|
|
|
<span class="togglebutton_bat">本月</span>
|
|
|
</div>
|
|
|
<div class="data_con" id="container4">
|
|
|
</div>
|
|
|
<div class="data_con" id="container5" style="display: none;">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 遮罩层 -->
|
|
|
<div class="bgPop4">
|
|
|
<iframe id="iframe" name="child" ref="fIframe" scrolling="no" frameborder="0" width="100%" height="100%"
|
|
|
src="./camera/index.html" v-if="iframeVisble">
|
|
|
</iframe>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- 查看放大图片 -->
|
|
|
<div class="imgDetail">
|
|
|
<div class="imgContainers">
|
|
|
|
|
|
</div>
|
|
|
<div class="imageOperate">
|
|
|
<div class="rotateImg">
|
|
|
<img src="./images/旋转.png" alt="">
|
|
|
</div>
|
|
|
<div class="fangdaImg">
|
|
|
<img src="./images/放大.png" alt="">
|
|
|
</div>
|
|
|
<div class="suoxiaoImg">
|
|
|
<img src="./images/缩小.png" alt="">
|
|
|
</div>
|
|
|
<div class="closeImg">
|
|
|
<img src="./images/关闭.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--遮罩层-->
|
|
|
<div class="bgPop"></div>
|
|
|
<!--弹出框-->
|
|
|
<div class="pop">
|
|
|
<div class="pop-top">
|
|
|
报警记录
|
|
|
<span class="pop-close">Ｘ</span>
|
|
|
</div>
|
|
|
<div class="pop-content">
|
|
|
<table class="panel-table" bordercolor="#deefff" border="1">
|
|
|
<thead bgcolor="#971212" align="center">
|
|
|
<tr height="38">
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr class="aaa" style="font-size: 16px;padding:12px 0px;" align="center">
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
<td> </td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="pop-foot">
|
|
|
<input type="button" value="确定" class="pop-cancel pop-close">
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
function closePop4() {
|
|
|
console.log('closePop4')
|
|
|
$('.bgPop4').hide();
|
|
|
}
|
|
|
$(document).ready(function () {
|
|
|
$('.pop-close').click(function () {
|
|
|
$('.bgPop,.pop').hide();
|
|
|
});
|
|
|
$('.click_pop').click(function () {
|
|
|
$('.bgPop,.pop').show();
|
|
|
});
|
|
|
$('.togglebutton_bat').click(function () {
|
|
|
$('.togglebutton_bat').removeClass('active')
|
|
|
$(this).addClass('active')
|
|
|
if ($(this).index() == 1) {
|
|
|
$("#container5").show()
|
|
|
$("#container4").hide()
|
|
|
} else {
|
|
|
$("#container4").show()
|
|
|
$("#container5").hide()
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
function toPosition(lng, lat) {
|
|
|
|
|
|
}
|
|
|
$('.click_pop').click(function () {
|
|
|
$('.bgPop,.pop').show();
|
|
|
});
|
|
|
$(function () {
|
|
|
//获得当前<ul>
|
|
|
var $uList = $(".news_list ul");
|
|
|
var timer = null;
|
|
|
//触摸清空定时器
|
|
|
$uList.hover(function () {
|
|
|
clearInterval(timer);
|
|
|
},
|
|
|
function () { //离开启动定时器
|
|
|
timer = setInterval(function () {
|
|
|
scrollList($uList);
|
|
|
},
|
|
|
2000);
|
|
|
}).trigger("mouseleave"); //自动触发触摸事件
|
|
|
//滚动动画
|
|
|
function scrollList(obj) {
|
|
|
//获得当前<li>的高度
|
|
|
var scrollHeight = $("ul li:first").height();
|
|
|
//滚动出一个<li>的高度
|
|
|
$uList.stop().animate({
|
|
|
marginTop: -scrollHeight
|
|
|
},
|
|
|
600,
|
|
|
function () {
|
|
|
//动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
|
|
|
$uList.css({
|
|
|
marginTop: 0
|
|
|
}).find("li:first").appendTo($uList);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<!--遮罩层-->
|
|
|
<div class="bgPop2"></div>
|
|
|
<!--弹出框-->
|
|
|
<!-- <div class="pop2" style="height: 650px;"> -->
|
|
|
<div class="pop2">
|
|
|
<div class="pop-top">
|
|
|
线索详情
|
|
|
<span class="pop-close">Ｘ</span>
|
|
|
</div>
|
|
|
<!-- <div class="pop-content" style="height: 560px;"> -->
|
|
|
<div class="pop-content">
|
|
|
<table class="panel-table case-detail" bordercolor="#deefff" border="1">
|
|
|
<!-- <thead bgcolor="#10aaa5" align="center">
|
|
|
<tr height="38">
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
<th>字段</th>
|
|
|
</tr>
|
|
|
</thead> -->
|
|
|
<tbody style="line-height:40px;">
|
|
|
<tr class="aaa" style="font-size: 16px;height:30px;" align="center">
|
|
|
<td style="font-size: 16px;height:30px;width:100px;">线索编号</td>
|
|
|
<td class="caseinfoNo"></td>
|
|
|
<td>线索面积</td>
|
|
|
<td class="caseinfoArea"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>线索类型</td>
|
|
|
<td class="caseinfoType"> </td>
|
|
|
<td>线索描述</td>
|
|
|
<td class="caseinfoDesc"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>行政区划</td>
|
|
|
<td class="caseinfoZoing"> </td>
|
|
|
<td>详细地址</td>
|
|
|
<td class="caseinfoAddress"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>线索图片</td>
|
|
|
<td colspan="3" class="caseinfoImages" style="text-align: left;">
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>附近监控</td>
|
|
|
<td colspan="3" class="caseinfocameras" style="text-align: left;">
|
|
|
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="pop-foot">
|
|
|
<input type="button" value="确定" class="pop-cancel pop-close">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!--遮罩层-->
|
|
|
<div class="bgPop3"></div>
|
|
|
<!--弹出框-->
|
|
|
<div class="pop3">
|
|
|
<div class="pop-top">
|
|
|
线索处理信息
|
|
|
<span class="pop-close">Ｘ</span>
|
|
|
</div>
|
|
|
<div class="pop-content">
|
|
|
<table class="panel-table case-detail" bordercolor="#deefff" border="1">
|
|
|
<tbody style="line-height:40px;">
|
|
|
<tr class="aaa" style="font-size: 16px;height:30px;" align="center">
|
|
|
<td style="font-size: 16px;height:30px;width:100px;">线索编号</td>
|
|
|
<td class="caseinfoNo"></td>
|
|
|
<td>处理时间</td>
|
|
|
<td class="dealTime"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>线索类型</td>
|
|
|
<td class="caseinfoType"> </td>
|
|
|
<td>线索描述</td>
|
|
|
<td class="caseinfoDesc"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>行政区划</td>
|
|
|
<td class="caseinfoZoing"> </td>
|
|
|
<td>详细地址</td>
|
|
|
<td class="caseinfoAddress"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>处理结果</td>
|
|
|
<td colspan="3" class="dealResult"> </td>
|
|
|
</tr>
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>线索图片</td>
|
|
|
<td colspan="3" class="caseinfoImages" style="text-align: left;">
|
|
|
</td>
|
|
|
</tr>
|
|
|
<!-- 线索处理图片 -->
|
|
|
<tr class="aaa" style="font-size: 16px;" align="center">
|
|
|
<td>处理图片</td>
|
|
|
<td colspan="3" class="dealImages">
|
|
|
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="pop-foot">
|
|
|
<input type="button" value="确定" class="pop-cancel pop-close">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
var IMAGE_BASE_URL = "http://192.168.10.102:9023";
|
|
|
function lookImage() {
|
|
|
}
|
|
|
$('.pop-close').click(function () {
|
|
|
$('.bgPop2,.pop2').hide();
|
|
|
});
|
|
|
|
|
|
var rotate = 0;
|
|
|
$(".rotateImg").click(function () {
|
|
|
rotate -= 90
|
|
|
$(".imgContainers").css({ 'transform': "rotate(" + rotate + "deg)" })
|
|
|
})
|
|
|
|
|
|
var imgScale = 1;
|
|
|
$(".fangdaImg").click(function () {
|
|
|
imgScale += 0.3;
|
|
|
$(".imgContainers").find("img").css({ "transform": "scale(" + imgScale + ")" })
|
|
|
})
|
|
|
|
|
|
$(".suoxiaoImg").click(function () {
|
|
|
imgScale -= 0.3;
|
|
|
$(".imgContainers").find("img").css({ "transform": "scale(" + imgScale + ")" })
|
|
|
})
|
|
|
|
|
|
$(".closeImg").click(function () {
|
|
|
rotate = 0;
|
|
|
imgScale = 1;
|
|
|
$(".imgDetail").hide();
|
|
|
})
|
|
|
|
|
|
$('.click_pop2').click(function () {
|
|
|
if (window.audio) {
|
|
|
window.audio.pause();
|
|
|
}
|
|
|
//console.log($(this).attr("data-caseId"));
|
|
|
$('.bgPop3,.pop3').show();
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
|
|
|
dataType: "json",
|
|
|
headers: { "X-Token": localStorage.getItem("X-Token") },
|
|
|
data: { id: $(this).attr("data-caseId") },
|
|
|
async: false,
|
|
|
beforeSend: function (xhr) { },
|
|
|
success: function (data) {
|
|
|
if (data.code == 200) {
|
|
|
console.log(data.result.info)
|
|
|
$('.caseinfoNo').text(data.result.info.case_no);
|
|
|
$('.caseinfoDesc').text(data.result.info.case_description);
|
|
|
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
|
|
|
$('.caseinfoType').text(data.result.info.typename);
|
|
|
$('.caseinfoMarker').text(data.result.info.remark);
|
|
|
$(".caseinfoImages").empty();
|
|
|
console.log(data.result.info.casepic)
|
|
|
if(data.result.info.casepic){
|
|
|
var imgList = data.result.info.casepic.split(',')
|
|
|
for (var i = 0; i < imgList.length-1; i++) {
|
|
|
var url = IMAGE_BASE_URL + "/" + imgList[i];
|
|
|
var appendStr = "<img src='" + url + "' data-imgSrc='" + imgList[i] + "' class='caseInfoImg' style='width:230px;height:100px;margin:8px;'/>";
|
|
|
console.log('appendStr',appendStr)
|
|
|
$(".caseinfoImages").append(appendStr);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$(".caseInfoImg").click(function () {
|
|
|
$(".imgContainers").empty();
|
|
|
$(".imgDetail").show();
|
|
|
$(".imgDetail").css({ "display": "flex" });
|
|
|
var imgPath = $(this).attr("data-imgSrc");
|
|
|
var appendStrPath = "<img src='" + IMAGE_BASE_URL + "/" + imgPath + "' style='width:100%;height:100%;'/>";
|
|
|
$(".imgContainers").append(appendStrPath);
|
|
|
})
|
|
|
|
|
|
// 处理详情
|
|
|
$('.dealTime').text(data.result.info.examine_time);
|
|
|
$('.dealResult').text(data.result.info.result_name);
|
|
|
$(".dealImages").empty();
|
|
|
let picString = ""
|
|
|
Object.keys(data.result.info).forEach(key => {
|
|
|
if(key.indexOf('pic') !== -1 && key !== 'casepic'){
|
|
|
if(data.result.info[key]){
|
|
|
picString = picString + data.result.info[key]
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
let handleImgList = picString.split(',')
|
|
|
for (let i = 0; i < handleImgList.length-1; i++) {
|
|
|
let url = IMAGE_BASE_URL + "/" + handleImgList[i];
|
|
|
let appendStr = "<img src='" + url + "' class='caseInfoImg' data-imgSrc='" + handleImgList[i] + "' style='width:230px;height:100px;margin-right:15px;'/>"
|
|
|
$(".dealImages").append(appendStr);
|
|
|
}
|
|
|
$(".caseInfoImg").click(function () {
|
|
|
$(".imgContainers").empty();
|
|
|
$(".imgDetail").show();
|
|
|
$(".imgDetail").css({ "display": "flex" });
|
|
|
var imgPath = $(this).attr("data-imgSrc");
|
|
|
var appendStrPath = "<img src='" + IMAGE_BASE_URL + "/" + imgPath + "' style='width:100%;height:100%;'/>";
|
|
|
$(".imgContainers").append(appendStrPath);
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
var currentImageUrl = null;
|
|
|
// 最新上报点击查看详情
|
|
|
$(".li02").click(function () {
|
|
|
if (window.audio) {
|
|
|
window.audio.pause();
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: BASE_URL + "/api/DroneScreenDisplay/GetCaseInfo",
|
|
|
dataType: "json",
|
|
|
headers: { "X-Token": localStorage.getItem("X-Token") },
|
|
|
data: { id: $(this).attr("data-caseId") },
|
|
|
async: false,
|
|
|
beforeSend: function (xhr) { },
|
|
|
success: function (data) {
|
|
|
if (data.code == 200) {
|
|
|
$('.caseinfoNo').text(data.result.info.case_no);
|
|
|
$('.caseinfoDesc').text(data.result.info.case_description);
|
|
|
$('.caseinfoZoing').text(data.result.info.countyname + "/" + data.result.info.streetname + "/" + data.result.info.communityname);
|
|
|
$('.caseinfoType').text(data.result.info.typename);
|
|
|
$('.caseinfoMarker').text(data.result.info.remark);
|
|
|
$(".caseinfoAddress").text(data.result.info.address);
|
|
|
$(".caseinfoTime").text(data.result.info.createtime);
|
|
|
$(".caseinfoArea").text(data.result.info.area);
|
|
|
$(".caseinfoImages").empty();
|
|
|
if(data.result.info.casepic){
|
|
|
var imgList = data.result.info.casepic.split(',')
|
|
|
for (var i = 0; i < imgList.length-1; i++) {
|
|
|
var url = IMAGE_BASE_URL + "/" + imgList[i];
|
|
|
var appendStr = "<img src='" + url + "' class='caseInfoImg' data-imgSrc='" + url + "' style='width:230px;height:100px;margin-right:15px;'/>"
|
|
|
$(".caseinfoImages").append(appendStr);
|
|
|
}
|
|
|
}
|
|
|
getkmcamera(data.result)
|
|
|
}
|
|
|
$(".caseInfoImg").click(function () {
|
|
|
$(".imgContainers").empty();
|
|
|
$(".imgDetail").show();
|
|
|
$(".imgDetail").css({ "display": "flex" });
|
|
|
// var imgPath = $(this).context.currentSrc( :( ))
|
|
|
var imgPath = $(this).attr("data-imgSrc");
|
|
|
var appendStrPath = "<img src='" + imgPath + "' style='width:100%;height:100%;'/>";
|
|
|
$(".imgContainers").append(appendStrPath);
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
//console.log($(this).attr("data-caseId"));
|
|
|
$('.bgPop2,.pop2').show();
|
|
|
})
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
<!--遮罩层-->
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
$('.pop-close').click(function () {
|
|
|
$('.bgPop3,.pop3').hide();
|
|
|
$('.bgPop4,.pop4').hide();
|
|
|
$('.bgPop5,.pop5').hide();
|
|
|
childFlv.window.destroyVideo()
|
|
|
});
|
|
|
$('.click_pop3').click(function () {
|
|
|
|
|
|
});
|
|
|
|
|
|
$(".yesFullScreen").click(function () {
|
|
|
// documentElement 属性以一个元素对象返回一个文档的文档元素
|
|
|
var el = document.documentElement;
|
|
|
el.requestFullscreen || el.mozRequestFullScreen || el.webkitRequestFullscreen || el.msRequestFullScreen ?
|
|
|
el.requestFullscreen() || el.mozRequestFullScreen() || el.webkitRequestFullscreen() || el.msRequestFullscreen() : null;
|
|
|
$(".isFullScreen").hide();
|
|
|
var welcomeAudio = new Audio('./audio/welcome.mp3');
|
|
|
welcomeAudio.play();
|
|
|
})
|
|
|
$(".noFullScreen").click(function () {
|
|
|
var welcomeAudio = new Audio('./audio/welcome.mp3');
|
|
|
welcomeAudio.play();
|
|
|
$(".isFullScreen").hide();
|
|
|
})
|
|
|
|
|
|
function testAudio() {
|
|
|
var synth = window.speechSynthesis;
|
|
|
var msg = new SpeechSynthesisUtterance();
|
|
|
msg.text = "进入全屏"; // 文字内容
|
|
|
msg.lang = "zh-CN"; // 使用的语言:中文
|
|
|
msg.volume = 0; // 声音音量：0-1
|
|
|
msg.rate = 2.6; // 语速：0-10
|
|
|
msg.pitch = 0.7; // 音高：0-1
|
|
|
synth.speak(msg); // 播放
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- 无人机遮罩 -->
|
|
|
<div class="bgPop5"></div>
|
|
|
<div class="pop5" style="min-height: 450px; height: 450px;">
|
|
|
<div class="pop-top">
|
|
|
无人机画面
|
|
|
<span class="pop-close">Ｘ</span>
|
|
|
</div>
|
|
|
<div class="pop-content" style="height: 400px;overflow-y:hidden">
|
|
|
<!-- <video id="player-container-id" width="400" height="210" preload="auto" playsinliwebkit-playsinlinene autoplay="autoplay">
|
|
|
</video> -->
|
|
|
<iframe src="./flv.html" name="childFlv" frameborder="0" width="100%" height="100%"></iframe>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<script type="text/javascript" src="js/echarts.min.js"></script>
|
|
|
<script type="text/javascript" src="js/china.js"></script>
|
|
|
<script type="text/javascript" src="js/vue.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="js/middleMap.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="js/times.js"></script>
|
|
|
|
|
|
<!-- 腾讯云视频直播 -->
|
|
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
|
|
<!-- <script src="./js/uav.js"></script> -->
|
|
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
|
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
|
|
|
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
|
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
|
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
|
|
<!--播放器脚本文件-->
|
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |