merge
parent
230990c852
commit
dae1d875f7
|
|
@ -8,8 +8,11 @@ VITE_PUBLIC_PATH = /
|
|||
#VITE_GLOB_API_URL=/basic-api
|
||||
#财源
|
||||
# VITE_GLOB_API_URL= http://192.168.10.102:9500
|
||||
|
||||
VITE_GLOB_API_URL = http://192.168.10.131:8989
|
||||
|
||||
#基础框架
|
||||
VITE_GLOB_API_URL=http://123.132.248.154:9104
|
||||
# VITE_GLOB_API_URL=http://123.132.248.154:9104
|
||||
|
||||
# File upload address， optional
|
||||
# It can be forwarded by nginx or write the actual address directly
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@
|
|||
"mapbox-extensions":"^1.3.38",
|
||||
"terraformer-wkt-parser": "^1.2.1",
|
||||
"@terraformer/wkt":"2.1.2",
|
||||
"vue3-print-nb":"0.1.4",
|
||||
"ceel-json-editor":"^0.0.3",
|
||||
"@originjs/vite-plugin-commonjs":"^1.0.3",
|
||||
"mars3d": "^3.7.0",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,145 +0,0 @@
|
|||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nowrap{
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row{
|
||||
flex-direction: row;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
.auto{
|
||||
overflow: auto;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.ai-e{
|
||||
align-items: end;
|
||||
}
|
||||
.jc-se{
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.jc-sa{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-e{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.mt-1{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt-2{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mt-3{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ml-1{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.ml-2{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.ml-3{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.mb-1{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mb-2{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mb-3{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.mr-1{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mr-2{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mr-3{
|
||||
margin-right: 30px;
|
||||
}
|
||||
.ta-c{
|
||||
text-align: center;
|
||||
}
|
||||
.ta-l{
|
||||
text-align: left;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.pos-r{
|
||||
position: relative;
|
||||
}
|
||||
.pos-a{
|
||||
position: absolute;
|
||||
}
|
||||
.pos-f{
|
||||
position: fixed;
|
||||
}
|
||||
.max-w{
|
||||
width: 100%;
|
||||
}
|
||||
.max-h{
|
||||
height: 100%;
|
||||
}
|
||||
.fz-12{
|
||||
font-size: 12px;
|
||||
}
|
||||
.fz-14{
|
||||
font-size: 14px;
|
||||
}
|
||||
.fz-16{
|
||||
font-size: 16px;
|
||||
}
|
||||
.fz-18{
|
||||
font-size: 18px;
|
||||
}
|
||||
.fz-20{
|
||||
font-size: 20px;
|
||||
}
|
||||
.fz-22{
|
||||
font-size: 22px;
|
||||
}
|
||||
.fz-24{
|
||||
font-size: 24px;
|
||||
}
|
||||
.fz-26{
|
||||
font-size: 26px;
|
||||
}
|
||||
.fz-28{
|
||||
font-size: 28px;
|
||||
}
|
||||
.fc-w{
|
||||
color: white;
|
||||
}
|
||||
.fc-b{
|
||||
color: black;
|
||||
}
|
||||
.fc-r{
|
||||
color: red;
|
||||
}
|
||||
.fw-b{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,397 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="./common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.camera-dia {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.camera-box {
|
||||
width: 514px;
|
||||
height: 370px;
|
||||
background: rgba(19, 21, 35, .9);
|
||||
box-shadow: 0 0 0.0625rem 0.3125rem hsl(0deg 0% 100% / 10%);
|
||||
border: 1px solid #386df5;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
|
||||
.camera-header {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.camera-header img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.camera-body {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
border: 1px solid #fff;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.camera-footer {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
color: #4371ec;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.camera-footer span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 460px;
|
||||
/*播放容器的宽和高设定*/
|
||||
height: 330px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14" id="box">
|
||||
<div class="camera-header flex jc-sb mr-1 mb-1 ai-c">
|
||||
<span class="fz-16" id="carmerName"></span>
|
||||
<span class="pop-close" style="cursor: pointer;">Ｘ</span>
|
||||
</div>
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd" ></div>
|
||||
</div>
|
||||
<div class="camera-footer mt-1" style="display: none;">
|
||||
设备编号：<span id="carmerCard"></span>
|
||||
</div>
|
||||
<!-- <div style="display: none;" id="carmerAppKey"></div>
|
||||
<div style="display: none;" id="carmerIp"></div>
|
||||
<div style="display: none;" id="carmerPort"></div>
|
||||
<div style="display: none;" id="appSecret"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
var monitorTwoLayerData
|
||||
window.onload = () => {
|
||||
monitorTwoLayerData = JSON.parse(localStorage.getItem("monitorTwoLayerData"))
|
||||
$("#carmerName").text(monitorTwoLayerData.deviceName)
|
||||
$("#carmerCard").text(monitorTwoLayerData.deviceNum)
|
||||
initPlugin();
|
||||
|
||||
window.addEventListener('click', function (e) {
|
||||
window.parent.closePop4()
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
})
|
||||
// cameraindexcode 监控ID；channelno 设备通道；
|
||||
|
||||
// $("#carmerAppKey").text(e.data[2])
|
||||
// $("#carmerIp").text(e.data[3])
|
||||
// $("#carmerPort").text(e.data[4])
|
||||
// $("#appSecret").text(e.data[5])
|
||||
}
|
||||
function childFunction(){
|
||||
monitorTwoLayerData = JSON.parse(localStorage.getItem("monitorTwoLayerData"))
|
||||
$("#carmerName").text(monitorTwoLayerData.deviceName)
|
||||
$("#carmerCard").text(monitorTwoLayerData.deviceNum)
|
||||
initPlugin();
|
||||
}
|
||||
$("#closeBtn").click(function () {
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin() {
|
||||
console.log('initPlugin')
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 460, 330).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount++;
|
||||
console.log(initCount)
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init() {
|
||||
getPubKey(function () {
|
||||
// "Hik": {
|
||||
// "Url": "221.2.83.54",
|
||||
// "Port": 1443,
|
||||
// "AppKey": "23604396",
|
||||
// "SecretKey": "NZJ8L3bxCOOV6rtTFjsx"
|
||||
// },
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
// var appkey = "23604396"; //综合安防管理平台提供的appkey，必填
|
||||
// var ip = "221.2.83.54"; //综合安防管理平台IP地址，必填
|
||||
// var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
// var appSecret = 'NZJ8L3bxCOOV6rtTFjsx';
|
||||
|
||||
var appkey = monitorTwoLayerData.appKey; //综合安防管理平台提供的appkey，必填
|
||||
var ip = monitorTwoLayerData.ip; //综合安防管理平台IP地址，必填
|
||||
var port = monitorTwoLayerData.port;
|
||||
var appSecret = monitorTwoLayerData.appSecret;
|
||||
console.log(appkey, ip, port, appSecret)
|
||||
// var secret = setEncrypt("tGJdjmKxKxVWtzp1M6px"); //综合安防管理平台提供的secret，必填
|
||||
var secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
|
||||
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(460, 330); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId: wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
// var box = document.getElementById("playWnd")
|
||||
// console.log('div到左边的偏移量:' + box.getBoundingClientRect().Top)
|
||||
// console.log('div到顶部的偏移量:' + box.offsetTop)
|
||||
|
||||
// var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
// console.log(oDivRect.left)
|
||||
// console.log(oDivRect.top)
|
||||
// oWebControl.oDocOffset.top = oDivRect.top+16;
|
||||
// oWebControl.oDocOffset.left = oDivRect.left+116;
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey(callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt(value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
consol.log("resize")
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(460, 330);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
consol.log("scroll")
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(460, 330);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
console.log(oDivRect.left)
|
||||
console.log(oDivRect.top)
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
iCoverLeft = (iCoverLeft > 460) ? 460 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 330) ? 330 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 460) ? 460 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 330) ? 330 : iCoverBottom;
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 330); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 330);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(460 - iCoverRight, 0, iCoverRight, 330);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 330 - iCoverBottom, 460, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode: cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId: wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功
|
||||
},
|
||||
function () { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,339 +0,0 @@
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #000;
|
||||
background-size: cover;
|
||||
font-size: 10px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background-image: url('../images/login-bg.jpg');
|
||||
padding-top:200px;
|
||||
}
|
||||
body{
|
||||
/* background-image: url('../images/login-bg.jpg'); */
|
||||
}
|
||||
/* =========================================
|
||||
Stark Industries Logo
|
||||
========================================= */
|
||||
#logo {
|
||||
animation: logo-entry 4s ease-in;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
h1.hogo {
|
||||
animation: text-glow 2s ease-out infinite alternate;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
color: #024daf;
|
||||
font-size: 48px;
|
||||
font-size: 4.8rem;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
|
||||
top: 50px;
|
||||
}
|
||||
h1.hogo:before {
|
||||
animation: before-glow 2s ease-out infinite alternate;
|
||||
border-left: 535px solid transparent;
|
||||
border-bottom: 10px solid #024daf;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: -74px;
|
||||
top: -10px;
|
||||
width: 0;
|
||||
}
|
||||
h1.hogo:after {
|
||||
animation: after-glow 2s ease-out infinite alternate;
|
||||
border-left: 100px solid transparent;
|
||||
border-top: 16px solid #024daf;
|
||||
content: ' ';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: -85px;
|
||||
top: 24px;
|
||||
transform: rotate(-47deg);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Log in form
|
||||
========================================= */
|
||||
#fade-box {
|
||||
animation: input-entry 3s ease-in;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.stark-login form {
|
||||
animation: form-entry 3s ease-in-out;
|
||||
background: #111;
|
||||
background: linear-gradient(#004746, #111111);
|
||||
border: 6px solid #024daf;
|
||||
box-shadow: 0 0 15px #00fffd;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
height: 240px;
|
||||
margin: 200px auto 0;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 500px;
|
||||
transition: 1s all;
|
||||
}
|
||||
.stark-login form:hover {
|
||||
border: 6px solid #00fffd;
|
||||
box-shadow: 0 0 25px #00fffd;
|
||||
transition: 1s all;
|
||||
}
|
||||
.stark-login input {
|
||||
background: #222;
|
||||
background: linear-gradient(#333333, #222222);
|
||||
border: 1px solid #444;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 0 #000;
|
||||
color: #888;
|
||||
display: block;
|
||||
font-family: 'Cabin', helvetica, arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-size: 1.3rem;
|
||||
height: 40px;
|
||||
margin: 20px auto 10px;
|
||||
padding: 0 10px;
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
width: 400px;
|
||||
}
|
||||
.stark-login input:focus {
|
||||
animation: box-glow 1s ease-out infinite alternate;
|
||||
background: #0B4252;
|
||||
background: linear-gradient(#333933, #222922);
|
||||
border-color: #00fffc;
|
||||
box-shadow: 0 0 5px rgba(0, 255, 253, 0.2), inset 0 0 5px rgba(0, 255, 253, 0.1), 0 2px 0 #000;
|
||||
color: #efe;
|
||||
outline: none;
|
||||
}
|
||||
.stark-login input:invalid {
|
||||
border: 2px solid #024daf;
|
||||
box-shadow: 0 0 5px rgba(255, 0, 0, 0.2), inset 0 0 5px rgba(255, 0, 0, 0.1), 0 2px 0 #000;
|
||||
}
|
||||
.stark-login button {
|
||||
animation: input-entry 3s ease-in;
|
||||
background: #222;
|
||||
background: linear-gradient(#333333, #222222);
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #444;
|
||||
border-left-color: #000;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 0 #000;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-family: 'Cabin', helvetica, arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin: 20px auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-shadow: 0 -1px 0 #000;
|
||||
width: 400px;
|
||||
transition: 1s all;
|
||||
}
|
||||
.stark-login button:hover,
|
||||
.stark-login button:focus {
|
||||
background: #0C6125;
|
||||
background: linear-gradient(#393939, #292929);
|
||||
color: #00fffc;
|
||||
outline: none;
|
||||
transition: 1s all;
|
||||
}
|
||||
.stark-login button:active {
|
||||
background: #292929;
|
||||
background: linear-gradient(#393939, #292929);
|
||||
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Spinner
|
||||
========================================= */
|
||||
#circle1 {
|
||||
animation: circle1 4s linear infinite, circle-entry 6s ease-in-out;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
border: 10px solid #024daf;
|
||||
box-shadow: 0 0 0 2px black, 0 0 0 6px #00fffc;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
left: 50%;
|
||||
margin-left: -250px;
|
||||
overflow: hidden;
|
||||
opacity: 0.4;
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
#inner-cirlce1 {
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
border: 36px solid #00fffc;
|
||||
height: 460px;
|
||||
width: 460px;
|
||||
margin: 10px;
|
||||
}
|
||||
#inner-cirlce1:before {
|
||||
content: ' ';
|
||||
width: 240px;
|
||||
height: 480px;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
#inner-cirlce1:after {
|
||||
content: ' ';
|
||||
width: 480px;
|
||||
height: 240px;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Hexagon Mesh
|
||||
========================================= */
|
||||
.hexagons {
|
||||
animation: logo-entry 4s ease-in;
|
||||
color: #000;
|
||||
font-size: 52px;
|
||||
font-size: 5.1rem;
|
||||
letter-spacing: -0.2em;
|
||||
line-height: 0.7;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 6px #00fffc;
|
||||
top: 310px;
|
||||
width: 100%;
|
||||
transform: perspective(600px) rotateX(60deg) scale(1.4);
|
||||
z-index: -3;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
Animation Keyframes
|
||||
========================================= */
|
||||
@keyframes logo-entry {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes circle-entry {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
@keyframes input-entry {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes form-entry {
|
||||
0% {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
}
|
||||
20% {
|
||||
height: 0;
|
||||
border: 1px solid #024daf;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
}
|
||||
40% {
|
||||
width: 0;
|
||||
height: 220px;
|
||||
border: 6px solid #024daf;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
}
|
||||
100% {
|
||||
height: 220px;
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
@keyframes box-glow {
|
||||
0% {
|
||||
border-color: #00b8b6;
|
||||
box-shadow: 0 0 5px rgba(0, 255, 253, 0.2), inset 0 0 5px rgba(0, 255, 253, 0.1), 0 2px 0 #000;
|
||||
}
|
||||
100% {
|
||||
border-color: #00fffc;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 253, 0.6), inset 0 0 10px rgba(0, 255, 253, 0.4), 0 2px 0 #000;
|
||||
}
|
||||
}
|
||||
@keyframes text-glow {
|
||||
0% {
|
||||
color: #024daf;
|
||||
text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000, 0 0 40px #000, 0 0 50px #000, 0 0 60px #000, 0 0 70px #000;
|
||||
}
|
||||
100% {
|
||||
color: #00fffc;
|
||||
text-shadow: 0 0 20px rgba(0, 255, 253, 0.6), 0 0 10px rgba(0, 255, 253, 0.4), 0 2px 0 #000;
|
||||
}
|
||||
}
|
||||
@keyframes before-glow {
|
||||
0% {
|
||||
border-bottom: 10px solid #024daf;
|
||||
}
|
||||
100% {
|
||||
border-bottom: 10px solid #00fffc;
|
||||
}
|
||||
}
|
||||
@keyframes after-glow {
|
||||
0% {
|
||||
border-top: 16px solid #024daf;
|
||||
}
|
||||
100% {
|
||||
border-top: 16px solid #00fffc;
|
||||
}
|
||||
}
|
||||
@keyframes circle1 {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,442 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "微软雅黑";
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0b122e;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse:collapse;
|
||||
}
|
||||
img{vertical-align: middle;}
|
||||
ul { margin: 0; padding: 0;}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.row{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
header{width:100%; height: 90px; background: url(../images/bg_top.png) center no-repeat ; text-align: center; font-size: 36px; color: #CFD5E5; line-height: 90px; margin: 0 auto;}
|
||||
#content{width: 1860px; height: 100%; margin: 20px auto 0 auto;}
|
||||
#content .content_left{width: 385px; height: 100%; float: left;}
|
||||
.imgstyle_common{width: 20px;height: 20px;margin-right: 5px;}
|
||||
.content_left .dtuplc{width: 355px; height: 220px; padding: 15px 15px 0 15px; background: url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.dtu{width: 207px; height: 180px; float: left;}
|
||||
.plc{width: 147px; height: 180px; float: left;}
|
||||
.content_left .online{width: 385px; height: 310px;margin-top: 10px; float: left; background: url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.content_left .title{width: 272px; height: 33px; float: left; color: #CFD5E5; font-size: 16px; line-height: 33px; background:url(../images/title.png) no-repeat;background-size: 100% 100%;margin: 15px 0 10px 13px;padding-left: 40px; }
|
||||
.content_left .title img{vertical-align: middle;}
|
||||
.online .online_con{width: 365px; height: 230px; padding: 10px; float: left;}
|
||||
.content_left .industry{width: 385px; height: 390px;margin-top: 10px; float: left; background: url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.industry .industry_con{width: 365px; height: 325px; padding: 0 10px; float: left;}
|
||||
#content .content_center{width: 1050px; height: 100%; float: left; margin-left: 20px;}
|
||||
.content_center .center_top{width: 1060px; height: 710px; float: left; background: url(../images/center01.png) no-repeat;background-size: 100% 100%;}
|
||||
.content_center .title{width: 530px; height: 38px;margin: 15px auto 5px;line-height: 38px;text-align: center; color: #CFD5E5; font-size: 16px; background:url(../images/centerdronbg.png) no-repeat; background-size: 100% 100%;}
|
||||
.content_center .title img{vertical-align: middle;}
|
||||
.content_center .center_top_con{ height: 550px; width: 1000px; padding: 10px; float: left;position: relative;}
|
||||
.content_center .center_top_con .left_menu{width:100px;height:400px;position:absolute;top:30px;left:14px;z-index:9;}
|
||||
.content_center .center_top_con .right_menu{width:100px;height:400px;position:absolute;top:30px;right:14px;z-index:9;}
|
||||
.content_center .center_top_con .center_top_con_but{width: 113px;height: 33px;margin-top:8px;line-height:33px;z-index: 9;cursor: pointer;background: url(../images/buttonbg.png);background-size: 100% 100%;}
|
||||
.content_center .center_top_con .center_top_con_but span{display: block;width: 100%;height: 100%;text-align: left;font-size: 14px;margin-left: 12px;}
|
||||
.content_center .center_top_con .center_top_con_but img{width: 17px;height: 17px;margin-top: -4px;margin-right: 6px;}
|
||||
|
||||
.panel-table {text-align: left;color: #ccc;margin: 0 auto !important;width: 96%;padding: 0.5rem 0 !important;font-size: 1.2rem;}
|
||||
.case-detail tbody tr{
|
||||
padding: 8px 0px !important;
|
||||
overflow: scroll;
|
||||
}
|
||||
.case-detail tbody tr,.panel-table tbody td{
|
||||
height:30px;
|
||||
padding:8px 0px !important;
|
||||
}
|
||||
|
||||
.content_center .center_bot{width: 1060px; height: 240px;margin-top: 10px; float: left; background: url(../images/center02.png) no-repeat; background-size: 100% 100%;}
|
||||
.center_bot .title{width: 272px; height: 33px;text-align: left ;color: #CFD5E5; font-size: 16px; line-height: 33px; background:url(../images/title.png) no-repeat;background-size: 100% 100%;margin: 15px 0 10px 13px;padding-left: 40px; }
|
||||
|
||||
|
||||
tr.aaa:hover{background: #1d3152; cursor: pointer;}
|
||||
.b1{width: 70px; height: 25px; background: #FF0000; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
|
||||
.b2{width: 70px; height: 25px; background: #2897c4; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
|
||||
.b3{width: 70px; height: 25px; background: #36791a; cursor: pointer; color: #FFFFFF; border: none; border-radius:3px ;}
|
||||
#content .content_right{width: 385px; height: 100%; float: right;}
|
||||
.content_right .report{width: 385px; height: 220px; line-height: 20px; float: left; background:url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.report1{width: 120px;position: relative;margin-top: 20px; height: 120px; background: url(../images/report01.png) center no-repeat; float: left; text-align: center;background-size: 100% 100%;}
|
||||
.report2{width: 120px;position: relative;margin-top: 20px; height: 120px; background: url(../images/report02.png) center no-repeat; float: right; text-align: center;background-size: 100% 100%;}
|
||||
.report p{ font-weight: bold;position: absolute; font-size: 14px; color: #CFD5E5;top: -44px;left: 0;}
|
||||
.report p span{display: inline-block;width: 10px;height: 10px;margin-right: 5px;}
|
||||
.report1 p span{background-color: #FF9D12;}
|
||||
.report2 p span{background-color: #0B74FF;}
|
||||
.report small{font-size: 24px;}
|
||||
.content_right .news_report{width: 385px; height: 310px; margin-top: 10px; float: left; background: url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.content_right .title{width: 272px; height: 33px;text-align: left ;color: #CFD5E5; font-size: 16px; line-height: 33px; background:url(../images/title.png) no-repeat;background-size: 100% 100%;margin: 15px 0 10px 13px;padding-left: 40px; }
|
||||
.content_right .title img{vertical-align: middle;}
|
||||
.news_list{width: 350px; height: 210px; padding: 10px; font-size: 16px; float: left;position: relative;overflow-y:scroll;overflow-x:hidden;}
|
||||
.news_list ul{list-style: none;position: absolute;left: 0;top: 0;width: 100%;padding-left: 10px;}
|
||||
.news_list ul li{width: 85%; height: 38px; float: left; line-height: 38px; padding-left: 40px;}
|
||||
.li01{background: url(../images/new_list01.png) left center no-repeat;}
|
||||
.li02{background: url(../images/new_list02.png) 20px center no-repeat;font-size: 16px; color: #FFDC1C;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
|
||||
.content_right .data_box{width: 385px; height: 410px; margin-top: 10px; float: left; background: url(../images/containerbg.png) no-repeat;background-size: 100% 100%;}
|
||||
.data_con{width: 365px; height: 280px; float: left; padding: 10px;}
|
||||
/*弹窗*/
|
||||
.pop,.pop2,.pop3 ,.pop4,.pop5{display: none; width: 800px; min-height: 570px; max-height: 750px; height:570px; position: absolute; left: 0; right: 0; margin:auto; padding: 25px; z-index: 130; border-radius: 3px; background-color: #23509a; border: #fff solid 1px; box-shadow: 0 5px 18px rgba(100, 0, 0, .5); }
|
||||
.pop-top{ text-align: center; font-size: 20px; font-weight:bold; color: #ff6f05; height:40px; width:100%; background: url(../images/line.png) no-repeat bottom center;}
|
||||
.pop-top span{ float: right; cursor: pointer; color: #fff; font-weight: bold; display:black}
|
||||
.pop-foot{ height:50px; line-height:50px; width:100%; border-top: 1px #5682dc solid; text-align: right; }
|
||||
.pop-cancel{ padding:8px 15px; margin:15px 5px; border: none; border-radius: 5px; background-color: #ff6f05; color: #fff; cursor:pointer; }
|
||||
.pop-content{ height: 480px;overflow-y:scroll;}
|
||||
.bgPop,.bgPop2,.bgPop3,.bgPop4,.bgPop5{ display: none; position: absolute; z-index: 129; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.2);}
|
||||
.togglebutton{
|
||||
padding: 10px 0 5px 0 ;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.togglebutton span{
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
background: url(../images/btnbg.png) no-repeat;background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.togglebutton span.active{
|
||||
background: url(../images/btnactive.png) no-repeat;background-size: 100% 100%;
|
||||
}
|
||||
.noData{
|
||||
width: 96%;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.imgDetail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.imgContainers{
|
||||
width: 800px;
|
||||
/* position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%); */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.imageOperate{
|
||||
width:400px;
|
||||
height:100px;
|
||||
position:absolute;
|
||||
bottom:140px;
|
||||
left:50%;
|
||||
margin-left:-200px;
|
||||
}
|
||||
.imageOperate div{
|
||||
width:100px;
|
||||
height:100px;
|
||||
line-height:100px;
|
||||
text-align: center;
|
||||
float:left;
|
||||
}
|
||||
.imageOperate div img{
|
||||
width:32px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width:5px;
|
||||
height: 5px;
|
||||
}
|
||||
/* 滚动槽 */
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: #2897c4;
|
||||
border-radius:10px;
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius:10px;
|
||||
background: #2897c4;
|
||||
-webkit-box-shadow: ;
|
||||
}
|
||||
|
||||
|
||||
#marker {
|
||||
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
|
||||
background-size: cover;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mapboxgl-popup {
|
||||
max-width: 200px;
|
||||
}
|
||||
.mapboxgl-control-container{
|
||||
background:rgba(0,0,255,0.5);
|
||||
}
|
||||
|
||||
.mapboxgl-ctrl-logo{
|
||||
display: none !important;
|
||||
}
|
||||
.uavimgCon{
|
||||
width:24px;
|
||||
height:24px;
|
||||
}
|
||||
|
||||
.POSIRIONImg{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:100;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background-image: url("../images/position.png");
|
||||
background-size:24px 24px;
|
||||
}
|
||||
.HISTORyImg{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:100;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background-image: url("../images/history.png");
|
||||
background-size:24px 24px;
|
||||
}
|
||||
|
||||
.UAVImg{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
z-index:100;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background-image: url("../images/UAV.png");
|
||||
background-size:24px 24px;
|
||||
}
|
||||
.marker {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
cursor: pointer;
|
||||
/* background: green; */
|
||||
border-radius: 50%;
|
||||
/* pointer-events:none; */
|
||||
margin-left:5px;
|
||||
margin-top:5px;
|
||||
}
|
||||
.point, .point::before, .point::after {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.point::before {
|
||||
animation: scale 1.2s infinite;
|
||||
}
|
||||
|
||||
.point::after {
|
||||
animation: scale2 1.2s infinite;
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: .9
|
||||
}
|
||||
100% {
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale2 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: .9;
|
||||
}
|
||||
100% {
|
||||
transform: scale(6);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.point, .point::before, .point::after { /* 设置颜色 */
|
||||
background-color: rgba(240, 103, 100, 0.9);
|
||||
}
|
||||
.img-container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.4);
|
||||
|
||||
z-index:99999999999;
|
||||
}
|
||||
|
||||
|
||||
.townshipParent {
|
||||
width:50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
/* background:red; */
|
||||
/* background:red; */
|
||||
}
|
||||
.townshipChildren {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left:25px;
|
||||
transform: translateX(-25px);
|
||||
transition: all 1s;
|
||||
animation: jump 1.5s ease-in-out infinite alternate;
|
||||
/* background-image: url("http://v.bootstrapmb.com/2021/10/esrpm11383/images/5.png"); */
|
||||
/* background-image:url("http://v.bootstrapmb.com/2021/10/gc8bg11382/images/4.png"); */
|
||||
background-image:url("../images/historycase\ \(2\).png");
|
||||
background-size:20px 60px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.townshipName{
|
||||
font-size:12px;
|
||||
position:absolute;
|
||||
top:-40px;
|
||||
left:-30px;
|
||||
width:100px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
from { top: -20px; }
|
||||
to { top: 0px }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.newestParent {
|
||||
width:50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
/* background:red; */
|
||||
/* background:red; */
|
||||
}
|
||||
.newestChildren {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
left:25px;
|
||||
transform: translateX(-25px);
|
||||
transition: all 1s;
|
||||
animation: jump2 1.5s ease-in-out infinite alternate;
|
||||
/* background-image: url("http://v.bootstrapmb.com/2021/10/esrpm11383/images/5.png"); */
|
||||
background-image:url("../images/news-case.png");
|
||||
/* background-image:url("http://v.bootstrapmb.com/2021/10/gc8bg11382/images/1.png"); */
|
||||
background-size:23px 50px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.newestName{
|
||||
font-size:12px;
|
||||
position:absolute;
|
||||
top:-40px;
|
||||
left:-30px;
|
||||
width:100px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
@keyframes jump2 {
|
||||
from { top: -20px; }
|
||||
to { top: 0px }
|
||||
}
|
||||
|
||||
.isFullScreen{
|
||||
width:100%;
|
||||
height:120vh;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.1);
|
||||
z-index:1000;
|
||||
|
||||
|
||||
}
|
||||
.isFullScreen .tishi{
|
||||
width:200px;
|
||||
height:300px;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
border-radius: 20px;
|
||||
border:1px solid rgba(255,255,255,0.5);
|
||||
background:rgba(0,0,0,0.3);
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.yesFullScreen{
|
||||
border-left:1px solid rgba(255,255,255,0.2)
|
||||
}
|
||||
.yesFullScreen:hover{
|
||||
opacity: 0.8;
|
||||
background:rgba(255,255,255,0.4);
|
||||
cursor:pointer;
|
||||
}
|
||||
.noFullScreen:hover{
|
||||
opacity:0.8;
|
||||
background:rgba(255,255,255,0.4);
|
||||
cursor:pointer;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 843 B |
|
|
@ -1,117 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
/* // // 播放按钮 */
|
||||
#videoDeom::-webkit-media-controls-play-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* // 当前播放时间 */
|
||||
#videoDeom::-webkit-media-controls-current-time-display {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* // 剩余时间 */
|
||||
#videoDeom::-webkit-media-controls-time-remaining-display {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* // 音量按钮 */
|
||||
#videoDeom::-webkit-media-controls-volume-control-container {
|
||||
/* display: none !important; */
|
||||
}
|
||||
|
||||
/* // 全屏 */
|
||||
#videoDeom::-webkit-media-controls-fullscreen-button {
|
||||
/* display: none !important; */
|
||||
}
|
||||
|
||||
/* // 时间轴 */
|
||||
#videoDeom::-webkit-media-controls-timeline {
|
||||
/* display: none !important; */
|
||||
}
|
||||
|
||||
/* // 更多选项 --然而并不生效 */
|
||||
#videoDeom::-internal-media-controls-overflow-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* #videoDeom {
|
||||
pointer-events: none;
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- <video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
||||
autoplay="autoplay" v-if="videoType == 'UAV'">
|
||||
</video>
|
||||
<video id="videoDeom" autoplay controls controlslist="nodownload" disablePictureInPicture
|
||||
oncontextmenu="return false" v-else style="width: 95vw; height: 95vh;margin-left:2vw;object-fit: fill">
|
||||
<source src="./audio/DJI_0042.MP4" type="video/mp4" />
|
||||
</video> -->
|
||||
<video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
||||
autoplay="autoplay">
|
||||
</video>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="./js/vue.min.js"></script>
|
||||
<script>
|
||||
|
||||
var vm = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
videoType: 'VIDEO',
|
||||
TCPlayerVideo:null
|
||||
},
|
||||
})
|
||||
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
|
||||
function childFunction() {
|
||||
var flvStr = localStorage.getItem("flvStr")
|
||||
console.log(flvStr)
|
||||
if (flvStr == '17853305028') {
|
||||
vm.videoType = 'VIDEO'
|
||||
const videoDiv = document.getElementById('videoDeom')
|
||||
videoDiv.load()
|
||||
videoDiv.play()
|
||||
const myDiv = document.getElementById('videoDeom')
|
||||
console.log(myDiv)
|
||||
myDiv.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
});
|
||||
} else {
|
||||
console.log('UAV')
|
||||
vm.videoType = 'UAV'
|
||||
player.src(flvStr); // url 播放地址
|
||||
}
|
||||
}
|
||||
function destroyVideo() {
|
||||
// player.dispose()
|
||||
player.pause()
|
||||
// const videoDiv = document.getElementById('videoDeom')
|
||||
// videoDiv.pause()
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 638 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 420 B |
Binary file not shown.
|
Before Width: | Height: | Size: 365 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 619 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 739 B |
Binary file not shown.
|
Before Width: | Height: | Size: 561 B |
Binary file not shown.
|
Before Width: | Height: | Size: 743 B |
Binary file not shown.
|
Before Width: | Height: | Size: 809 B |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 671 B |
Binary file not shown.
|
Before Width: | Height: | Size: 732 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 712 B |
Binary file not shown.
|
Before Width: | Height: | Size: 776 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 938 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 227 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 584 B |
Binary file not shown.
|
Before Width: | Height: | Size: 638 B |
Binary file not shown.
|
Before Width: | Height: | Size: 849 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 755 B |
Binary file not shown.
|
Before Width: | Height: | Size: 821 B |
Binary file not shown.
|
Before Width: | Height: | Size: 557 B |
Binary file not shown.
|
Before Width: | Height: | Size: 608 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
|
|
@ -1,827 +0,0 @@
|
|||
<!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>
|
||||
<!--引入cesium基础lib-->
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
|
||||
<script src="https://unpkg.com/@turf/turf/turf.min.js"></script> -->
|
||||
|
||||
<!--引入mars3d库lib-->
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script> -->
|
||||
<!-- <link href="./lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
|
||||
<script src="./lib/mars3d/mars3d.js" type="text/javascript" ></script> -->
|
||||
|
||||
<!-- <link href="./lib/ol/ol.css" rel="stylesheet" type="text/css" />
|
||||
<script src="./lib/ol/ol.js" type="text/javascript" charset='utf-8'></script> -->
|
||||
|
||||
<!-- <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet">
|
||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script> -->
|
||||
|
||||
<!-- mapbox库 -->
|
||||
<link href="./lib/mapboxgl/mapbox-gl.css" rel="stylesheet">
|
||||
<script src="./lib/mapboxgl/mapbox-gl.js"></script>
|
||||
|
||||
<script src="js/xianjie.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://60.213.14.14:6050";
|
||||
// var BASE_URL = "http://192.168.10.124:9020";
|
||||
var APP_URL = "http://60.213.14.14:6080";
|
||||
localStorage.setItem("X-Token","b4089ac2");
|
||||
console.log(localStorage.getItem("X-Token"))
|
||||
if (localStorage.getItem("X-Token") == null || localStorage.getItem("X-Token") == "") {
|
||||
// window.location.href = "login.html";
|
||||
window.location.href= APP_URL;
|
||||
} else {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: BASE_URL + "/api/Check/GetStatus",
|
||||
dataType: "json",
|
||||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||||
async: false,
|
||||
beforeSend: function (xhr) { },
|
||||
success: function (data) {
|
||||
if (data.result == false) {
|
||||
// window.location.href = "login.html";
|
||||
window.location.href= APP_URL;
|
||||
}
|
||||
},
|
||||
error: function (error) {
|
||||
window.location.href= APP_URL;
|
||||
// window.location.href = "login.html";
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
</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.caseinfo.id" align="center"
|
||||
style="font-size: 14px;">
|
||||
<!-- <td>{{ y.caseinfo.createtime }}</td> -->
|
||||
<td>{{ y.deal.createtime }}</td>
|
||||
<td>{{ y.caseinfo.typename }}</td>
|
||||
<td>{{ y.caseinfo.case_description }}</td>
|
||||
<td>{{y.caseinfo.streetname}} {{y.caseinfo.communityname}}</td>
|
||||
<td>{{y.deal.result_name ? y.deal.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.caseinfo.id" align="center"
|
||||
style="font-size: 14px;">
|
||||
<!-- <td>{{ y.caseinfo.createtime }}</td> -->
|
||||
<td>{{ y.deal.createtime }}</td>
|
||||
<td>{{ y.caseinfo.typename }}</td>
|
||||
<td>{{ y.caseinfo.case_description }}</td>
|
||||
<td>{{y.caseinfo.streetname}} {{y.caseinfo.communityname}}</td>
|
||||
<td>{{y.deal.result_name ? y.deal.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">
|
||||
<!-- <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="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://60.213.14.14:6070";
|
||||
function lookImage() {
|
||||
alert(1);
|
||||
}
|
||||
$('.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) {
|
||||
$('.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();
|
||||
for (var i = 0; i < data.result.pic_list.length; i++) {
|
||||
|
||||
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_list[i] + "' data-imgSrc='" + data.result.pic_list[i] + "' class='caseInfoImg' style='width:230px;height:100px;margin:8px;'/>";
|
||||
$(".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);
|
||||
})
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
|
||||
url: "http://60.213.14.14:6050/api/DroneCaseinfo/GetDroneCaseDeal?X-Token=bc249a62&caseid=" + $(this).attr("data-caseId"),
|
||||
// url: "http://192.168.10.124:9020/api/DroneCaseinfo/GetDroneCaseDeal?X-Token=bc249a62&caseid=" + $(this).attr("data-caseId"),
|
||||
dataType: "json",
|
||||
headers: { "X-Token": localStorage.getItem("X-Token") },
|
||||
// data:{id:,
|
||||
async: false,
|
||||
beforeSend: function (xhr) { },
|
||||
success: function (data) {
|
||||
if (data.code == 200) {
|
||||
$('.dealTime').text(data.result.info.createtime);
|
||||
$('.dealResult').text(data.result.info.result_name);
|
||||
$(".dealImages").empty();
|
||||
for (var i = 0; i < data.result.pic_info_list.length; i++) {
|
||||
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_info_list[i].filePath + "' data-imgSrc='" + data.result.pic_info_list[i].filePath + "' class='caseInfoImg' style='width:230px;height:100px;margin:8px;'/>";
|
||||
$(".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();
|
||||
for (var i = 0; i < data.result.pic_list.length; i++) {
|
||||
var url = IMAGE_BASE_URL + "/" + data.result.pic_list[i];
|
||||
var appendStr = "<img src='" + IMAGE_BASE_URL + "/S_" + data.result.pic_list[i] + "' 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>
|
||||
|
||||
|
||||
|
||||
<!-- Echarts图表数据 -->
|
||||
<!-- <script type="text/javascript" src="js/DTU.js"></script>
|
||||
<script type="text/javascript" src="js/PLC.js"></script>
|
||||
<script type="text/javascript" src="js/online.js"></script>
|
||||
<script type="text/javascript" src="js/industry.js"></script>
|
||||
<script type="text/javascript" src="js/data.js"></script>
|
||||
<script type="text/javascript" src="js/data-month.js"></script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// $(function() {
|
||||
|
||||
// });
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +0,0 @@
|
|||
$(function() {
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$(function() {
|
||||
|
||||
|
||||
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,3 +0,0 @@
|
|||
$(function() {
|
||||
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,165 +0,0 @@
|
|||
$(function () {
|
||||
var worldMapContainer1 = document.getElementById('distribution_map');
|
||||
var mapOptions = {
|
||||
scene: {
|
||||
center: {lat: 35.274526, lng: 117.981585, alt: 20000, heading: 0, pitch: -90},
|
||||
showSun: true,
|
||||
showMoon: true,
|
||||
showSkyBox: true,
|
||||
showSkyAtmosphere: false, //关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
||||
fog: true,
|
||||
fxaa: true,
|
||||
infoBox: false,
|
||||
globe: {
|
||||
showGroundAtmosphere: false, //关闭大气（球表面白蒙蒙的效果）
|
||||
depthTestAgainstTerrain: false,
|
||||
baseColor: "#546a53",
|
||||
},
|
||||
cameraController: {
|
||||
zoomFactor: 3.0,
|
||||
minimumZoomDistance: 1,
|
||||
maximumZoomDistance: 50000000,
|
||||
enableRotate: true,
|
||||
enableZoom: true,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
// baseLayerPicker: true, //basemaps底图切换按钮
|
||||
// homeButton: true, //视角复位按钮
|
||||
// sceneModePicker: true, //二三维切换按钮
|
||||
// navigationHelpButton: true, //帮助按钮
|
||||
// fullscreenButton: true, //全屏按钮
|
||||
// defaultContextMenu: true, //右键菜单
|
||||
},
|
||||
basemaps: [
|
||||
{
|
||||
name: "天地图影像",
|
||||
icon: "img/basemaps/tdt_img.png",
|
||||
type: "tdt",
|
||||
layer: "img_d",
|
||||
key: ["9ae78c51a0a28f06444d541148496e36"],
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: "天地图注记",
|
||||
type: "tdt",
|
||||
layer: "vec_z",
|
||||
key: ["9ae78c51a0a28f06444d541148496e36"],
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
layers:[
|
||||
{
|
||||
pid:0,
|
||||
name: "镇界",
|
||||
type: "wms",
|
||||
url: "http://175.27.168.120:8080/geoserver/feixian/wms",
|
||||
layers: "feixian:zhenjie",
|
||||
crs: "EPSG:4326",
|
||||
parameters: { transparent: "true", format: "image/png" },
|
||||
show: true,
|
||||
flyTo: true,
|
||||
},
|
||||
// {
|
||||
// name: "县界",
|
||||
// type: "wms",
|
||||
// url: "http://175.27.168.120:8080/geoserver/feixian/wms",
|
||||
// layers: "feixian:xianjie",
|
||||
// crs: "EPSG:4326",
|
||||
// parameters: { "transparent": "true", "format": "image/png" },
|
||||
// showClickFeature: false,
|
||||
// // center: { "lat": 35.014426, "lng": 118.167223, "alt": 3710, "heading": 359.2, "pitch": -90, "roll": 360 },
|
||||
// show: false,
|
||||
// flyTo: true
|
||||
// },
|
||||
// {
|
||||
// name: "历史案件",
|
||||
// type: "wms",
|
||||
// url: "http://175.27.168.120:8080/geoserver/feixian/wms",
|
||||
// layers: "tanyizhen:anjianjilu",
|
||||
// crs: "EPSG:4326",
|
||||
// parameters: { "transparent": "true", "format": "image/png" },
|
||||
// // center: { "lat": 35.014426, "lng": 118.167223, "alt": 3710, "heading": 359.2, "pitch": -90, "roll": 360 },
|
||||
// show: true,
|
||||
// // flyTo: true
|
||||
// },
|
||||
],
|
||||
}
|
||||
var map = new mars3d.Map('distribution_map', mapOptions)
|
||||
// arcGisLayer = new mars3d.layer.ArcGisLayer({
|
||||
// name: "合肥建筑物",
|
||||
// url: "//server.mars3d.cn/arcgis/rest/services/mars/guihua/MapServer",
|
||||
// highlight: {
|
||||
// clampToGround: true,
|
||||
// fill: true,
|
||||
// color: "#2deaf7",
|
||||
// opacity: 0.6,
|
||||
// outline: true,
|
||||
// outlineWidth: 3,
|
||||
// outlineColor: "#e000d9",
|
||||
// outlineOpacity: 1.0
|
||||
// },
|
||||
// popup: "all",
|
||||
// flyTo: false
|
||||
// })
|
||||
// map.addLayer(arcGisLayer)
|
||||
|
||||
|
||||
$('.click_pop3').click(function () {
|
||||
map.flyToPoint([$(this).attr("data-lng"),$(this).attr("data-lat")],{radius:300});
|
||||
});
|
||||
|
||||
var graphicLayer = new mars3d.layer.GraphicLayer()
|
||||
map.addLayer(graphicLayer)
|
||||
roamLine = new mars3d.graphic.RoamLine({
|
||||
name: "空中漫游",
|
||||
timeField: "datatime",
|
||||
positions: [
|
||||
{ lng: 117.676845, lat: 35.039753, alt: 650, datatime: "2021/3/25 0:01:00" },
|
||||
{ lng: 117.98615, lat: 35.271007, alt: 650, datatime: "2021/3/25 0:010:30" },
|
||||
{ lng: 118.060026, lat: 35.458449, alt: 650, datatime: "2021/3/25 0:20:10" }
|
||||
],
|
||||
camera: {
|
||||
type: "dy",
|
||||
followedX: 50,
|
||||
followedZ: 80
|
||||
},
|
||||
clockLoop: true, // 是否循环播放
|
||||
interpolation: true // setInterpolationOptions插值
|
||||
})
|
||||
graphicLayer.addGraphic(roamLine)
|
||||
|
||||
// 开始漫游
|
||||
roamLine.stop()
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: BASE_URL + "/api/DroneScreenDisplay/GetDroneGeoJson",
|
||||
dataType: "json",
|
||||
async:false,
|
||||
beforeSend: function(xhr) {},
|
||||
success: function(data){
|
||||
var historyLayer =new mars3d.layer.GeoJsonLayer({
|
||||
data:data.result.features,
|
||||
symbol: {
|
||||
type:"polygon",
|
||||
styleOptions: {
|
||||
fill: false,
|
||||
fillColor:"#ff0000",
|
||||
opacity: 0,
|
||||
outline: true,
|
||||
outlineColor: "#ff0000",
|
||||
outlineWidth: 2,
|
||||
outlineOpacity: 1,
|
||||
perPositionHeight: false,
|
||||
clampToGround: true,
|
||||
}
|
||||
}
|
||||
})
|
||||
map.addLayer(historyLayer);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue