HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
CaiYuanYiTiHua/public/bigScreen/index.html

773 lines
37 KiB
HTML
Raw Normal View History

bigscreen
2024-06-22 13:29:42 +08:00
<!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>
合并代码
2024-06-24 08:21:31 +08:00
var BASE_URL = "http://123.132.248.154:9104";
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
var APP_URL = "http://123.132.248.154:9103";
bigscreen
2024-06-22 13:29:42 +08:00
if (localStorage.getItem("X-Token") == null || localStorage.getItem("X-Token") == "") {
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
window.location.href = APP_URL;
bigscreen
2024-06-22 13:29:42 +08:00
}
</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>&nbsp;</span>
是否进入全屏&nbsp;？
</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">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<div class="title">线索线索统计</div>
bigscreen
2024-06-22 13:29:42 +08:00
<div class="online_con" id="container2">
</div>
</div>
<div class="industry">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<div class="title">线索分类统计</div>
bigscreen
2024-06-22 13:29:42 +08:00
<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" />
修改基础信息
2024-06-24 09:30:05 +08:00
行政区划</span>
bigscreen
2024-06-22 13:29:42 +08:00
</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>
修改基础信息
2024-06-24 09:30:05 +08:00
<!-- <div class="center_top_con_but" id="UAVView" data-layerName="UAVLayer" data-isActive="false">
bigscreen
2024-06-22 13:29:42 +08:00
<span>
<img class="centerimg" src="./images/drone.png" />
<img class="centerimgActive" style="display: none;" src="./images/drone-active.png" />
无人机</span>
修改基础信息
2024-06-24 09:30:05 +08:00
</div> -->
bigscreen
2024-06-22 13:29:42 +08:00
</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" />
图斑 => 线索
2025-07-21 15:38:00 +08:00
最新线索</span>
bigscreen
2024-06-22 13:29:42 +08:00
</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" />
图斑 => 线索
2025-07-21 15:38:00 +08:00
历史线索</span>
bigscreen
2024-06-22 13:29:42 +08:00
</div>
</div>
</div>
</div>
<div class="center_bot" style="position:relative;">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<div class="title">今日线索处理</div>
bigscreen
2024-06-22 13:29:42 +08:00
<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;">
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
<tr v-for="y in factory" class="aaa click_pop2" :data-caseId="y.id" align="center"
bigscreen
2024-06-22 13:29:42 +08:00
style="font-size: 14px;">
<!-- <td>{{ y.caseinfo.createtime }}</td> -->
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
<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 :
bigscreen
2024-06-22 13:29:42 +08:00
'--'}}
</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;">
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
<tr v-for="y in factory" class="aaa click_pop2" :data-caseId="y.id" align="center"
bigscreen
2024-06-22 13:29:42 +08:00
style="font-size: 14px;">
大屏修改后的接口对接
2024-06-24 14:45:40 +08:00
<!-- <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 :
bigscreen
2024-06-22 13:29:42 +08:00
'--'}}
</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 }}&nbsp;{{ 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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</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">
图斑 => 线索
2025-07-21 15:38:00 +08:00
线索详情
bigscreen
2024-06-22 13:29:42 +08:00
<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">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td style="font-size: 16px;height:30px;width:100px;">线索编号</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoNo"></td>
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索面积</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoArea">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索类型</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoType">&nbsp;</td>
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索描述</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoDesc">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>行政区划</td>
<td class="caseinfoZoing">&nbsp;</td>
<td>详细地址</td>
<td class="caseinfoAddress">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索图片</td>
bigscreen
2024-06-22 13:29:42 +08:00
<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">
图斑 => 线索
2025-07-21 15:38:00 +08:00
线索处理信息
bigscreen
2024-06-22 13:29:42 +08:00
<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">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td style="font-size: 16px;height:30px;width:100px;">线索编号</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoNo"></td>
<td>处理时间</td>
<td class="dealTime">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索类型</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoType">&nbsp;</td>
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索描述</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td class="caseinfoDesc">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>行政区划</td>
<td class="caseinfoZoing">&nbsp;</td>
<td>详细地址</td>
<td class="caseinfoAddress">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
<td>处理结果</td>
<td colspan="3" class="dealResult">&nbsp;</td>
</tr>
<tr class="aaa" style="font-size: 16px;" align="center">
图斑 => 线索
2025-07-21 15:38:00 +08:00
<td>线索图片</td>
bigscreen
2024-06-22 13:29:42 +08:00
<td colspan="3" class="caseinfoImages" style="text-align: left;">
</td>
</tr>
图斑 => 线索
2025-07-21 15:38:00 +08:00
<!-- 线索处理图片 -->
bigscreen
2024-06-22 13:29:42 +08:00
<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>