修改优化
parent
6531f95c9a
commit
fbb2a57e4a
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 9.4 KiB |
|
|
@ -0,0 +1,145 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
</head>
|
||||
<style>
|
||||
.hk-container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
/* top:120px;
|
||||
left:40px;
|
||||
z-index:9999; */
|
||||
}
|
||||
.playWnd {
|
||||
width: 100%; /*播放容器的宽和高设定*/
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hk-container">
|
||||
<!--视频窗口展示-->
|
||||
<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>
|
||||
|
||||
</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">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
|
||||
$("#carmerName").text(e.data[0])
|
||||
$("#carmerCard").text(e.data[1])
|
||||
$("#carmerAppKey").text(e.data[2])
|
||||
$("#carmerIp").text(e.data[3])
|
||||
$("#carmerPort").text(e.data[4])
|
||||
$("#appSecret").text(e.data[5])
|
||||
}
|
||||
}, false)
|
||||
|
||||
initPlugin();
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
// initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function 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", 360, 230).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
oWebControl.oDocOffset.top = 140;
|
||||
oWebControl.oDocOffset.left = 65;
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
// var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
// var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
// var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
|
||||
var appkey = $("#carmerAppKey").text(); //综合安防管理平台提供的appkey，必填
|
||||
var ip = $("#carmerIp").text(); //综合安防管理平台IP地址，必填
|
||||
var port = Number($("#carmerPort").text());
|
||||
var appSecret = $("#appSecret").text();
|
||||
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(412,300); // 初始化后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 //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
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 () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(420,280);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(420,280);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
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 > 600) ? 600 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 600) ? 600 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
|
||||
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 230); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, 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>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<!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; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
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;
|
||||
right: 20px;
|
||||
bottom: 130px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></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">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function 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", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
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 () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
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(180, 115); // 初始化后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 //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
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 () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
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 > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, 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>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<!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; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
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;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></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">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function 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", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
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 () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
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(180, 115); // 初始化后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 //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
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 () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
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 > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, 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
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 922 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -20,11 +20,10 @@
|
|||
<script type="text/javascript" src="./lib/mars3d/mars3d.js"></script>
|
||||
<link rel='stylesheet' type='text/css' href="./lib/mars3d/mars3d.css" />
|
||||
<link rel='stylesheet' type='text/css' href="./lib/Cesium/Widgets/widgets.css" />
|
||||
<title></title>
|
||||
<title>费县森林防灭火数据管理系统</title>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/shp.min.js"></script>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const CONFIG = {
|
||||
TITLE: "时空数字底座",
|
||||
TITLE: "费县森林防灭火数据管理系统",
|
||||
LOGO_URL: "/images/img25.png",
|
||||
BASE_API: "127.0.0.1",
|
||||
MAPBOX_OPTIONS: {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ service.interceptors.response.use(
|
|||
Message.error(res.msg)
|
||||
}
|
||||
// console.log('token过期或其他', res);
|
||||
return Promise.reject('error');
|
||||
return Promise.reject(response);
|
||||
} else {
|
||||
return response;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ export const saveData = (data) => {
|
|||
// 取消
|
||||
export const canelSave = (tableName) => {
|
||||
return request({
|
||||
url: '/geoserver/cancelSave/'+tableName,
|
||||
url: '/geoserver/cancelSave/' + tableName,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 测试接口
|
||||
export const publishLayer = (tableName) => {
|
||||
return request({
|
||||
url: '/geoserver/publishLayer/'+tableName,
|
||||
url: '/geoserver/publishLayer/' + tableName,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -47,6 +47,27 @@ export const saveLayerStyle = (params) => {
|
|||
return request({
|
||||
url: '/geoserver/saveLayerStyle',
|
||||
method: 'post',
|
||||
data:params
|
||||
data: params
|
||||
})
|
||||
}
|
||||
// 服务名校验
|
||||
export const checkServerName = (name) => {
|
||||
return request({
|
||||
url: '/geoserver/checkServerName/' + name,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 文件上传
|
||||
export const uploadFile = (formData) => {
|
||||
return request({
|
||||
url: '/geoserver/uploadFile',
|
||||
method: 'post',
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
},
|
||||
data: formData
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
export const globalApi = {
|
||||
BASE_URL: "http://192.168.10.136:8909", //测试 卢国栋
|
||||
GEOSERVER_URL:"http://192.168.10.136:8180",
|
||||
netBASE_URL: "http://123.132.248.154:9111", //测试.net
|
||||
|
||||
// BASE_URL: "http://192.168.10.135:8909"//测试 王玉磊
|
||||
// 本地测试
|
||||
// BASE_URL: "http://192.168.10.136:8909", //测试 卢国栋
|
||||
// GEOSERVER_URL: "http://192.168.10.136:8180",
|
||||
// netBASE_URL: "http://123.132.248.154:9111", //测试.net
|
||||
|
||||
// 测试服务器
|
||||
// BASE_URL: "http://123.132.248.154:9217", //测试 服务器
|
||||
// GEOSERVER_URL:"http://123.132.248.154:9205"
|
||||
// GEOSERVER_URL:"http://123.132.248.154:9205",
|
||||
// netBASE_URL: "http://123.132.248.154:9111", //测试.net
|
||||
|
||||
//正式环境
|
||||
BASE_URL: "http://223.99.16.253:9006", // java
|
||||
GEOSERVER_URL:"http://223.99.16.253:9007", // geoserver
|
||||
netBASE_URL: "http://223.99.16.253:9001", //.net
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,16 @@ export default {
|
|||
return false;
|
||||
} else {
|
||||
this.page_nav_index = index;
|
||||
this.$router.push(item.path);
|
||||
if (item.meta.name == "退出") {
|
||||
loginout().then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
localStorage.removeItem("X-Token");
|
||||
this.$router.push("/");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$router.push(item.path);
|
||||
}
|
||||
}
|
||||
},
|
||||
//选择二级菜单
|
||||
|
|
@ -297,7 +306,7 @@ export default {
|
|||
justify-content: center;
|
||||
background: #fafaff;
|
||||
}
|
||||
.sidebar-item:hover{
|
||||
.sidebar-item:hover {
|
||||
background: rgb(167, 167, 167);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export const constantRoutes = [
|
|||
name: "monitor",
|
||||
show: true,//在导航栏是否显示
|
||||
component: () => import('@/views/monitor/index'),
|
||||
meta: { name: "视频监控", iconfont: "/images/img7.png" },
|
||||
meta: { name: "监控中心", iconfont: "/images/img7.png" },
|
||||
},{
|
||||
path: "/upload_type_selected",
|
||||
name: "upload_type_selected",
|
||||
|
|
@ -116,19 +116,19 @@ export const constantRoutes = [
|
|||
meta: { name: "测试", iconfont: "/images/img9.png" },
|
||||
},
|
||||
{
|
||||
path: "/admin1",
|
||||
name: "admin1",
|
||||
path: "/loginout",
|
||||
name: "loginout",
|
||||
show: true,//在导航栏是否显示
|
||||
component: () => import('@/views/home/Home'),
|
||||
meta: { name: "首页", iconfont: "/images/img8.png" },
|
||||
children: [
|
||||
{
|
||||
path: "/loginout",
|
||||
name: "loginout",
|
||||
// component: () => import('@/views/home/Home'),
|
||||
meta: { name: "退出", iconfont: "/images/img9.png" },
|
||||
}
|
||||
]
|
||||
meta: { name: "退出", iconfont: "/images/img8.png" },
|
||||
// children: [
|
||||
// {
|
||||
// path: "/loginout",
|
||||
// name: "loginout",
|
||||
// // component: () => import('@/views/home/Home'),
|
||||
// meta: { name: "退出", iconfont: "/images/img9.png" },
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -105,13 +105,13 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="220">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button size="mini" type="success" @click="editd(row)"
|
||||
<el-button size="mini" type="success" @click.stop="editd(row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<!-- <el-button size="mini" type="success" @click="leadingout"
|
||||
>导出
|
||||
</el-button> -->
|
||||
<el-button size="mini" type="success" @click="dataCollect(row)"
|
||||
<el-button size="mini" type="danger" @click.stop="deleteServer(row)"
|
||||
>删除
|
||||
</el-button>
|
||||
<el-button size="mini" type="success" @click.stop="dataCollect(row)"
|
||||
>数据
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -272,6 +272,7 @@ import DItu from "./components/ditu.vue";
|
|||
import Fuwu from "./components/fuwu.vue";
|
||||
import { list, editsubmit } from "../../api/Datadetails";
|
||||
import { getDictone, getDicttwo } from "../../api/datamange";
|
||||
import { getMethodCommon } from '../../api/Api';
|
||||
export default {
|
||||
components: {
|
||||
DItu,
|
||||
|
|
@ -333,7 +334,6 @@ export default {
|
|||
this.loading = true;
|
||||
list({ pageSize: page.size, pageNum: page.current, ...form }).then(
|
||||
(res) => {
|
||||
console.log(res);
|
||||
if (res.data.code == 200) {
|
||||
this.page.total = res.data.total;
|
||||
this.tableData = res.data.rows;
|
||||
|
|
@ -357,7 +357,7 @@ export default {
|
|||
// 编辑提交
|
||||
editsubmit() {
|
||||
editsubmit(this.attributeform).then((res) => {
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.dialogVisibletwo = false;
|
||||
|
|
@ -367,8 +367,29 @@ export default {
|
|||
},
|
||||
// 数据编辑
|
||||
dataCollect(row) {
|
||||
|
||||
this.$router.push({ path: "/draw", query: row });
|
||||
},
|
||||
// 删除数据
|
||||
deleteServer(row){
|
||||
let that = this
|
||||
that.$confirm('确认删除？', '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
cancelButtonClass: 'btn-custom-cancel',
|
||||
type: 'warning'
|
||||
}).then(function(){
|
||||
getMethodCommon("/store/delete/"+row.id).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
that.$message.success('删除成功')
|
||||
that.onLoad(that.page, that.form);
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(function(){
|
||||
console.log("取消成功！");
|
||||
})
|
||||
},
|
||||
//导出
|
||||
leadingout() {
|
||||
this.dialogVisible = true;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<script>
|
||||
import mapboxgl from "mapbox-gl";
|
||||
import * as turf from "@turf/turf";
|
||||
import { globalApi } from "../../../api/urlPatterns.js";
|
||||
import { getLayer, getGeomData } from "../../../api/Datadetails";
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
|
|
@ -29,6 +29,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
onLoad() {
|
||||
// console.log(this.row);
|
||||
if(!this.row.tableRef){
|
||||
return;
|
||||
}
|
||||
getLayer({
|
||||
spaceType: this.row.spaceType,
|
||||
tableName: this.row.tableRef,
|
||||
|
|
@ -36,11 +40,11 @@ export default {
|
|||
// console.log("地图", res);
|
||||
if (res.data.code == 200) {
|
||||
getGeomData(this.row.tableRef).then((el) => {
|
||||
console.log(el);
|
||||
// console.log(el);
|
||||
if (el.data.code == 200) {
|
||||
let st = el.data.msg.slice(6, -1);
|
||||
st = st.split(" ");
|
||||
console.log([Number(st[0]),Number(st[1])]);
|
||||
// console.log([Number(st[0]), Number(st[1])]);
|
||||
this.initMap(res.data.data.data[2].url, st);
|
||||
}
|
||||
});
|
||||
|
|
@ -66,18 +70,15 @@ export default {
|
|||
// http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/ksp:shp_1681969689@EPSG:4326@png
|
||||
addGeoJsonLayer(url, jwd) {
|
||||
// console.log(Object(url));
|
||||
// console.log(url.slice(0, 26));
|
||||
this.map.addSource("wmsSource", {
|
||||
type: "raster",
|
||||
// tiles: [
|
||||
// "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
// ],
|
||||
tiles: [
|
||||
url.slice(0, 27) +
|
||||
"/geoserver/" +
|
||||
url.slice(60, 63) +
|
||||
"/wms?service=WMS&version=1.1.0&request=GetMap&layers=" +
|
||||
url.slice(60, 78) +
|
||||
globalApi.GEOSERVER_URL +
|
||||
"/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
|
||||
this.row.tableRef +
|
||||
"&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
],
|
||||
tileSize: 256,
|
||||
|
|
@ -92,7 +93,7 @@ export default {
|
|||
},
|
||||
});
|
||||
this.map.flyTo({
|
||||
center: [Number(jwd[0]),Number(jwd[1])],
|
||||
center: [Number(jwd[0]), Number(jwd[1])],
|
||||
zoom: 10,
|
||||
speed: 5,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -73,6 +73,9 @@ export default {
|
|||
methods: {
|
||||
onLoad() {
|
||||
// console.log(this.row);
|
||||
if(!this.row.tableRef){
|
||||
return;
|
||||
}
|
||||
getLayer({
|
||||
spaceType: this.row.spaceType,
|
||||
tableName: this.row.tableRef
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<img class="w300" src="/images/img5.png" alt="" />
|
||||
<span>监控中心</span>
|
||||
</div>
|
||||
<div class="item" @click="$router.push('/data-manage')">
|
||||
<div class="item" @click="$router.push('/upload_type_selected')">
|
||||
<img class="w300" src="/images/img6.png" alt="" />
|
||||
<span>数据上传</span>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
}
|
||||
|
||||
.dashboard-box {
|
||||
width: 1000px;
|
||||
width: 830px;
|
||||
height: 700px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="upload-icon-bg2"></div>
|
||||
<div class="upload-icon-bg">
|
||||
<p class="upload-iocn">
|
||||
<img src="/images/upload.webp" alt="">
|
||||
<img src="/images/upload.png" alt="">
|
||||
</p>
|
||||
<p class="upload-icon-text">只能选择后缀（.xlsx）格式模板文件<br/>（文件大小不能超过100MB）</p>
|
||||
<p>
|
||||
|
|
@ -24,31 +24,28 @@
|
|||
class="upload-demo"
|
||||
:action="''"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:before-upload="beforeUpload"
|
||||
:auto-upload="false"
|
||||
multiple
|
||||
:limit="1"
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:on-change="fileChange"
|
||||
>
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">选择文件</el-button>
|
||||
</el-upload>
|
||||
</p>
|
||||
<p style="margin-top:10px;color:#ccc;">{{file ? file.name : null}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="forms" :model="form" label-width="120px" size="small">
|
||||
<el-form-item label="服务名称">
|
||||
<el-form ref="forms" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form-item label="服务名称" prop="serverName">
|
||||
<el-input
|
||||
placeholder="请输入服务名称"
|
||||
style="width: 360px"
|
||||
v-model="form.serverName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间参考" label-width="">
|
||||
<el-form-item label="空间参考" label-width="" prop="spaceType">
|
||||
<el-select
|
||||
style="width: 360px;"
|
||||
v-model="form.spaceType"
|
||||
|
|
@ -64,7 +61,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item style="margin-top:165px;text-align:right;">
|
||||
<el-button type="default" @click="$router.push({'path':'/upload_type_selected'})">取消</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-check" @click.native="onSubmit">创建</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-check" @click.native="onSubmit('form')">创建</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
|
@ -98,6 +95,7 @@
|
|||
label="英文名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.en_name" size="mini"></el-input>
|
||||
<p style="color:#ff0000;font-size:12px;" v-if="!regExp.test(scope.row.en_name)">使用小写字母、数字、下划线的组合</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -106,6 +104,13 @@
|
|||
<el-input v-model="scope.row.cn_name" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="删除">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-delete" type="warning" @click="delColumn(scope)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="text-align:right;position:absolute;bottom:20px;width: calc( 100% - 160px);">
|
||||
|
|
@ -129,6 +134,7 @@
|
|||
<script>
|
||||
import axios from 'axios';
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
||||
import { globalApi } from '../../api/urlPatterns.js';
|
||||
export default {
|
||||
name: 'data_upload',
|
||||
data(){
|
||||
|
|
@ -150,13 +156,27 @@ import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
|||
"dictlabel": "EPSG:3857"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
serverName: [
|
||||
{ required: true, message: '请输入服务名称', trigger: 'blur' },
|
||||
],
|
||||
spaceType: [
|
||||
{ required: true, message: '请选择参考系', trigger: 'blur' },
|
||||
]
|
||||
},
|
||||
fileList:[],
|
||||
file:null,
|
||||
currentStep:1,
|
||||
tableHeader:[]
|
||||
tableHeader:[
|
||||
|
||||
],
|
||||
regExp:/^[a-z0-9_]+$/
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
delColumn(scope){
|
||||
this.tableHeader.splice(scope.$index,1);
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
|
|
@ -170,38 +190,21 @@ import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
|||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
fileChange(file){
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== 'xlsx') {
|
||||
this.$message.warning('只能上传后缀是.xlsx的文件')
|
||||
this.fileList = [];
|
||||
return false
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning('文件大小不得超过100Mb')
|
||||
this.fileList = [];
|
||||
return false
|
||||
}
|
||||
this.file = file;
|
||||
return true;
|
||||
},
|
||||
|
||||
beforeUpload(file) {
|
||||
console.log(file);
|
||||
this.file = file;
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== 'xlsx') {
|
||||
this.$message.warning('只能上传后缀是.xlsx的文件')
|
||||
this.file = null;
|
||||
return false
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning('文件大小不得超过100Mb')
|
||||
this.file = null;
|
||||
this.$message.warning('文件大小不得超过100M')
|
||||
return false
|
||||
}
|
||||
this.file = file;
|
||||
console.log("file111",this.file);
|
||||
return true;
|
||||
return false
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
let f = {...file}
|
||||
|
|
@ -213,43 +216,64 @@ import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
|||
this.$message({type:"warning",message:"请选择文件!"})
|
||||
return false;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append("file",this.file);
|
||||
formData.append("serverName",this.form.serverName)
|
||||
formData.append("spaceType",this.form.spaceType)
|
||||
// http://192.168.10.136:8909
|
||||
// http://123.132.248.154:9217
|
||||
|
||||
let _this = this;
|
||||
axios.post('http://192.168.10.136:8909/geoserver/uploadExcelFile', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
_this.tableName = res.data.data.tableName;
|
||||
let arr = res.data.data.heads;
|
||||
_this.tableHeader = [];
|
||||
arr.forEach((item,index)=>{
|
||||
let obj = {
|
||||
name:item.name,
|
||||
type:item.type,
|
||||
length:item.length,
|
||||
en_name:item.name,
|
||||
cn_name:item.name,
|
||||
this.$refs['forms'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("file",this.file);
|
||||
formData.append("serverName",this.form.serverName)
|
||||
formData.append("spaceType",this.form.spaceType)
|
||||
let _this = this;
|
||||
axios.post(globalApi.BASE_URL+'/geoserver/uploadExcelFile', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
_this.tableName = res.data.data.tableName;
|
||||
let arr = res.data.data.heads;
|
||||
_this.tableHeader = [];
|
||||
arr.forEach((item,index)=>{
|
||||
let obj = {
|
||||
name:item.name,
|
||||
type:item.type,
|
||||
length:item.length,
|
||||
en_name:item.name.toLowerCase(),
|
||||
cn_name:item.name,
|
||||
}
|
||||
_this.tableHeader.push(obj);
|
||||
})
|
||||
_this.currentStep = 2;
|
||||
}
|
||||
_this.tableHeader.push(obj);
|
||||
})
|
||||
_this.currentStep = 2;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
},
|
||||
createService(){
|
||||
// 英文字段验证
|
||||
let valid = [];
|
||||
this.tableHeader.forEach((item,index)=>{
|
||||
let isEn = this.regExp.test(item.en_name);
|
||||
valid.push(isEn);
|
||||
})
|
||||
let isEn = valid.find((item,index)=>{
|
||||
return item != true;
|
||||
})
|
||||
|
||||
if(isEn == false){
|
||||
return;
|
||||
}
|
||||
|
||||
let _this = this;
|
||||
let headerJsonString = {};
|
||||
let newHeader = [];
|
||||
this.tableHeader.forEach((item,index)=>{
|
||||
|
||||
|
||||
headerJsonString[item.en_name] = item.cn_name;
|
||||
let obj = {
|
||||
name:item.name,
|
||||
|
|
@ -290,6 +314,9 @@ import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
|||
console.log("response",response);
|
||||
this.tableName = response.msg;
|
||||
},
|
||||
deleateColumn(scope){
|
||||
console.log(scope);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -41,28 +41,27 @@
|
|||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select v-model="listQuery.keyWord" placeholder="查询字段" style="width:100px;" :clearable="true">
|
||||
<el-option
|
||||
v-for="item in columnData"
|
||||
v-show="item.value !='id'&&item.value !='geom'&&item.value !='creater_id'"
|
||||
:key="item.value"
|
||||
:label="layerInfo.nameRef[item.label]"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input v-model="listQuery.value" placeholder="关键字搜索" style="width:220px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
|
||||
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addData()">添加</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" @click="onSubmit">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
|
||||
<el-form-item>
|
||||
<el-select v-model="listQuery.keyWord" placeholder="查询字段" style="width:100px;" :clearable="true">
|
||||
<el-option
|
||||
v-for="item in columnData"
|
||||
v-show="item.value !='id'&&item.value !='geom'&&item.value !='creater_id'"
|
||||
:key="item.value"
|
||||
:label="layerInfo.nameRef[item.label]"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-input v-model="listQuery.value" placeholder="关键字搜索" style="width:220px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
|
||||
<el-button type="default" icon="el-icon-refresh-left" @click="listQuery.keyWord = null;listQuery.value = null;getList();">重置</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addData()">添加</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="list-container">
|
||||
|
|
@ -74,17 +73,14 @@
|
|||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
v-if="item.value !='id'&&item.value !='geom'&&item.value !='creater_id' && item.value !='create_time'"
|
||||
v-for="(item,index) in columnData"
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
:prop="item.value"
|
||||
:label="layerInfo.nameRef[item.label] ? layerInfo.nameRef[item.label] : item.label"
|
||||
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
|
|
@ -92,14 +88,6 @@
|
|||
label="操作"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<!-- <el-button
|
||||
icon="el-icon el-icon-edit"
|
||||
type="primary"
|
||||
size="mini">
|
||||
编辑
|
||||
</el-button> -->
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-top:6px;"
|
||||
|
|
@ -515,7 +503,7 @@ export default {
|
|||
this.geojson.coordinates = this.geojson.coordinates;
|
||||
}else if(this.layerInfo.dataType == '线'){
|
||||
this.geojson.type="LineString";
|
||||
this.geojson.coordinates = this.geojson.coordinates;
|
||||
this.geojson.coordinates = this.geojson.coordinates[0];
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -590,7 +578,7 @@ export default {
|
|||
})
|
||||
return ;
|
||||
}
|
||||
|
||||
// POLYGON MULTIPOLYGON LINESTRING MULTILINESTRING POINT MULTIPOINT
|
||||
let geom = WKT.convert(this.geojson);
|
||||
|
||||
this.formData.tableName = this.layerInfo.tableRef;
|
||||
|
|
@ -602,17 +590,19 @@ export default {
|
|||
}else if(this.layerInfo.dataType == '点'){
|
||||
|
||||
}else if(this.layerInfo.dataType == '线'){
|
||||
geom = geom.replace("LineString ","MultiLineString (");
|
||||
geom = geom.replace("LINESTRING ","MULTILINESTRING (");
|
||||
geom = geom+")"
|
||||
}
|
||||
this.formData.geom = geom;
|
||||
console.log(this.formData);
|
||||
|
||||
if(this.editType == "edit"){
|
||||
console.log("111",this.currentData);
|
||||
console.log("222",this.formData)
|
||||
postMethodCommon("/geoserver/updateLayerData",this.formData).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
let _this = this;
|
||||
|
||||
this.currentData = this.formData
|
||||
setTimeout(function(){
|
||||
_this.cancleDraw();
|
||||
_this.loadPBFLayer();
|
||||
|
|
@ -635,6 +625,7 @@ export default {
|
|||
_this.cancleDraw();
|
||||
_this.loadPBFLayer();
|
||||
_this.getList();
|
||||
|
||||
_this.$message({
|
||||
type:"success",
|
||||
message:"操作成功！"
|
||||
|
|
@ -662,7 +653,7 @@ export default {
|
|||
},
|
||||
getDetail(id){
|
||||
postMethodCommon("/geoserver/getSingleDate",{tableName:this.layerInfo.tableRef,id:id}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
console.log(res);
|
||||
if(res.data.code == 200){
|
||||
// this.formData = res.data.data;
|
||||
this.currentData = res.data.data;
|
||||
|
|
@ -672,7 +663,6 @@ export default {
|
|||
let center = this.getCenterPoint(this.geojson);
|
||||
if(center){
|
||||
this.mapFlyTo(center);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -686,7 +676,10 @@ export default {
|
|||
}else if(this.layerInfo.dataType == "点"){
|
||||
center = geojson.coordinates;
|
||||
}else if(this.layerInfo.dataType == "线"){
|
||||
|
||||
let point1 = turf.point(geojson.coordinates[0][0]);
|
||||
let point2 = turf.point(geojson.coordinates[0][geojson.coordinates[0].length-1]);
|
||||
let midpoint = turf.midpoint(point1, point2);
|
||||
center = midpoint.geometry.coordinates;
|
||||
}
|
||||
return center;
|
||||
},
|
||||
|
|
@ -708,16 +701,19 @@ export default {
|
|||
}
|
||||
postMethodCommon("/geoserver/deleteData",formData).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.$message({
|
||||
type:"success",
|
||||
message:"删除成功"
|
||||
})
|
||||
this.getList();
|
||||
let _this = this;
|
||||
setTimeout(function(){
|
||||
_this.$message({
|
||||
type:"success",
|
||||
message:"删除成功"
|
||||
})
|
||||
_this.isLook = false;
|
||||
_this.getList();
|
||||
},1500)
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteByContexmenu(){
|
||||
|
||||
let formData = {
|
||||
tableName:this.layerInfo.tableRef,
|
||||
id:this.attributeInfo.id
|
||||
|
|
@ -750,6 +746,7 @@ export default {
|
|||
this.tableData.push(item.properties);
|
||||
})
|
||||
},
|
||||
|
||||
// 创建地图
|
||||
initMap(){
|
||||
//mapbox 2.0以后的版本需要accessToken 到官网注册下载
|
||||
|
|
@ -820,7 +817,7 @@ export default {
|
|||
// 设置 popup 的位置和内容
|
||||
_this.popup.setLngLat(e.lngLat)
|
||||
.setHTML(`
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="getDetailByMap();">查看信息</div>
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="getDetail(${_this.attributeInfo.id})">查看信息</div>
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="editByMap();">编辑信息</div>
|
||||
<div style="color:#333;padding:3px 12px;cursor:pointer;" type="primary" icon="el-icon-search" onclick="deleteByContexmenu();">删除数据</div>`)
|
||||
.addTo(_this.globalMap);
|
||||
|
|
@ -844,7 +841,6 @@ export default {
|
|||
var feature = e.features[0];
|
||||
_this.geojson = feature.geometry;
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
// loadLayer(){
|
||||
|
|
@ -869,6 +865,9 @@ export default {
|
|||
// }
|
||||
// });
|
||||
// },
|
||||
/*
|
||||
|
||||
*/
|
||||
loadDianZiLayer(){
|
||||
this.globalMap.addLayer({
|
||||
'id': 'tiandituzhuji',
|
||||
|
|
@ -1111,7 +1110,7 @@ export default {
|
|||
.left-container{
|
||||
width:100%;
|
||||
height: calc(100% - 60px);
|
||||
background:hsl(212, 43%, 49%,0.5);
|
||||
background:#2b466580;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -1165,7 +1164,7 @@ export default {
|
|||
width:100%;
|
||||
height: calc( 100% - 60px);
|
||||
position:relative;
|
||||
background:hsl(212, 43%, 49%,0.5);
|
||||
background:#2b466580;
|
||||
}
|
||||
|
||||
.loader-container{
|
||||
|
|
@ -1263,7 +1262,7 @@ export default {
|
|||
bottom:15px;
|
||||
left:15px;
|
||||
padding:14px 10px;
|
||||
background:#385d91;
|
||||
background:#203b60;
|
||||
}
|
||||
.description-container{
|
||||
width:100%;
|
||||
|
|
@ -1280,7 +1279,7 @@ export default {
|
|||
top:-16px;
|
||||
left:15;
|
||||
/* transform: translate(-50%,0); */
|
||||
background: #385d91;
|
||||
background: #203b60;
|
||||
text-align: center;
|
||||
color:#fff;
|
||||
font-size:18px;
|
||||
|
|
@ -1400,7 +1399,7 @@ export default {
|
|||
padding:0px;
|
||||
height:40px;
|
||||
line-height:40px;
|
||||
background:hsl(212, 43%, 49%,0.5);
|
||||
/* background:hsl(212, 43%, 49%,0.5); */
|
||||
text-align:center;
|
||||
font-size:12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,580 @@
|
|||
<template>
|
||||
<div class="form-container">
|
||||
<div style="height:50px;margin-bottom:40px;font-size:16px;color:#fff;font-weight:bold;border-bottom:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="font-weight:1000;font-size:20px;cursor:pointer;" @click="$router.push({'path':'/upload_type_selected'})"><i class="el-icon el-icon-back"></i></span>
|
||||
导入ShpFile数据</div>
|
||||
<div class="title">
|
||||
<el-steps :active="currentStep" align-center>
|
||||
<el-step title="文件上传" description="选择ShpFile格式模板文件并配置服务基础信息"></el-step>
|
||||
<el-step title="信息配置" description="根据中文字段名称配置英文注释用于服务发布"></el-step>
|
||||
<el-step title="创建完成" description="服务创建完成在服务列表中查看服务"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="first-step" v-if="currentStep == 1">
|
||||
<div class="upload-iocn-box">
|
||||
<div class="upload-icon-bg2"></div>
|
||||
<div class="upload-icon-bg">
|
||||
<p class="upload-iocn">
|
||||
<img src="/images/upload.png" alt="">
|
||||
</p>
|
||||
<p class="upload-icon-text">只能选择后缀（.zip）格式压缩文件<br/>（文件大小不能超过50MB）</p>
|
||||
<p>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="''"
|
||||
:on-preview="handlePreview"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:limit="3"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">选择文件</el-button>
|
||||
</el-upload>
|
||||
</p>
|
||||
<p style="margin-top:10px;color:#ccc;">{{file ? file.name : null}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="forms" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form-item label="服务名称" prop="serverName">
|
||||
<el-input
|
||||
placeholder="请输入服务名称"
|
||||
style="width: 360px"
|
||||
v-model="form.serverName"
|
||||
p
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间参考" prop="spaceType">
|
||||
<el-select
|
||||
style="width: 360px"
|
||||
v-model="form.spaceType"
|
||||
placeholder="请选择空间参考"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in getDictone"
|
||||
:key="index"
|
||||
:label="item.dictlabel"
|
||||
:value="item.dictlabel"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型" prop="severType">
|
||||
<el-select
|
||||
style="width: 360px"
|
||||
v-model="form.severType"
|
||||
placeholder="请选择服务类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in getDicttwo"
|
||||
:key="index"
|
||||
:label="item.dictlabel"
|
||||
:value="item.dictlabel"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图层样式">
|
||||
<el-select v-model="form.styleName" style="width:280px;" placeholder="请选择图层样式">
|
||||
<el-option
|
||||
v-for="(value, key) in getDictthree"
|
||||
:key="key"
|
||||
:label="value"
|
||||
:value="value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="createStyle">创建样式</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="margin-top:60px;text-align:right;">
|
||||
<el-button type="default" @click="$router.push({'path':'/upload_type_selected'})">取消</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-check" @click.native="onSubmit('form')">创建</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="second-step" v-if="currentStep == 2">
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="tableHeader"
|
||||
height="320"
|
||||
border
|
||||
size="mini"
|
||||
style="width: 100%">
|
||||
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="原始字段名称"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="数据类型"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="length"
|
||||
label="数据长度">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="英文名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.en_name" size="mini"></el-input>
|
||||
<p style="color:#ff0000;font-size:12px;" v-if="!regExp.test(scope.row.en_name)">必须为英文且不能包含特殊字符</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="中文注释">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.cn_name" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="删除">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-delete" type="warning" @click="delColumn(scope)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
|
||||
<div style="text-align:right;position:absolute;bottom:20px;width: calc( 100% - 160px);">
|
||||
<el-button type="default" size="large" @click="$router.push({'path':'/upload_type_selected'})">取消</el-button>
|
||||
<el-button type="primary" size="large" icon="el-icon-check" @click.native="createService">创建</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="third-step" v-if="currentStep == 3">
|
||||
<el-result icon="success" title="服务创建成功" subTitle="服务创建成功，请在服务列表中心查看服务">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium" @click="$router.push({'path':'/ServiceList'})">服务列表</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<StyleConfig @yschange="styleUpdate" v-if="StyleConfigShow"></StyleConfig>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
||||
import { globalApi } from '../../api/urlPatterns.js';
|
||||
import StyleConfig from '../data_manage/yangshi'
|
||||
import {
|
||||
getDictone,
|
||||
getDicttwo,
|
||||
getLayerStyle,
|
||||
} from "../../api/datamange";
|
||||
|
||||
export default {
|
||||
name: 'data_upload',
|
||||
components:{
|
||||
StyleConfig
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
StyleConfigShow:false,
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
},
|
||||
form:{
|
||||
serverName:null,
|
||||
|
||||
},
|
||||
rules: {
|
||||
serverName: [
|
||||
{ required: true, message: '请输入服务名称', trigger: 'blur' },
|
||||
],
|
||||
spaceType: [
|
||||
{ required: true, message: '请选择参考系', trigger: 'blur' },
|
||||
],
|
||||
severType: [
|
||||
{ required: true, message: '请输选择服务类型', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
getDictone:[],
|
||||
getDicttwo:[],
|
||||
getDictthree:[],
|
||||
fileList:[],
|
||||
file:null,
|
||||
currentStep:1,
|
||||
tableHeader:[],
|
||||
regExp:/^[A-Za-z]+$/
|
||||
}
|
||||
},
|
||||
created(){
|
||||
getDictone().then((res) => {
|
||||
this.getDictone = res.data.data;
|
||||
});
|
||||
getDicttwo().then((res) => {
|
||||
this.getDicttwo = res.data.data;
|
||||
});
|
||||
getLayerStyle().then((res) => {
|
||||
this.getDictthree = res.data.data.style.names;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
delColumn(scope){
|
||||
this.tableHeader.splice(scope.$index,1);
|
||||
},
|
||||
styleUpdate(){
|
||||
getLayerStyle().then((res) => {
|
||||
this.getDictthree = res.data.data.style.names;
|
||||
});
|
||||
|
||||
this.StyleConfigShow = false
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${ file.name }？`);
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log(file);
|
||||
this.file = file;
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== 'zip') {
|
||||
this.$message.warning('只能上传后缀是.zip的文件')
|
||||
return false
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning('文件大小不得超过100M')
|
||||
return false
|
||||
}
|
||||
return false
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
let f = {...file}
|
||||
|
||||
},
|
||||
|
||||
onSubmit(){
|
||||
if(this.file == null){
|
||||
this.$message({type:"warning",message:"请选择文件!"})
|
||||
return false;
|
||||
}
|
||||
this.$refs['forms'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("file",this.file);
|
||||
formData.append("serverName",this.form.serverName)
|
||||
formData.append("spaceType",this.form.spaceType)
|
||||
formData.append("severType",this.form.severType)
|
||||
let _this = this;
|
||||
axios.post(globalApi.BASE_URL+'/geoserver/uploadFile', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
_this.tableName = res.data.data.tableName;
|
||||
_this.form.dataType = res.data.data.dataType;
|
||||
let arr = res.data.data.heads;
|
||||
_this.tableHeader = [];
|
||||
arr.forEach((item,index)=>{
|
||||
let obj = {
|
||||
name:item.name,
|
||||
type:item.type,
|
||||
length:item.length,
|
||||
en_name:item.name,
|
||||
cn_name:item.name,
|
||||
}
|
||||
_this.tableHeader.push(obj);
|
||||
})
|
||||
_this.currentStep = 2;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
createService(){
|
||||
let valid = [];
|
||||
this.tableHeader.forEach((item,index)=>{
|
||||
let isEn = this.regExp.test(item.en_name);
|
||||
valid.push(isEn);
|
||||
})
|
||||
let isEn = valid.find((item,index)=>{
|
||||
return item != true;
|
||||
})
|
||||
|
||||
if(isEn == false){
|
||||
return;
|
||||
}
|
||||
|
||||
let _this = this;
|
||||
let headerJsonString = {};
|
||||
let newHeader = [];
|
||||
this.tableHeader.forEach((item,index)=>{
|
||||
headerJsonString[item.en_name.toLowerCase()] = item.cn_name;
|
||||
let obj = {
|
||||
name:item.name,
|
||||
type:item.type,
|
||||
length:item.length,
|
||||
refName:item.en_name,
|
||||
}
|
||||
newHeader.push(obj);
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
let formData = {
|
||||
dataType:this.form.dataType,
|
||||
severType: this.form.severType,
|
||||
spaceType: this.form.spaceType,
|
||||
tableName: this.tableName,
|
||||
newHeads:newHeader,
|
||||
styleName: this.form.styleName,
|
||||
serverName: this.form.serverName,
|
||||
refRelation:JSON.stringify(headerJsonString),
|
||||
}
|
||||
|
||||
|
||||
postMethodCommon("/geoserver/saveData",formData).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
getMethodCommon("/geoserver/publishLayer/"+_this.tableName).then(response=>{
|
||||
_this.$message({
|
||||
type:"success",
|
||||
message:"上传服务成功"
|
||||
})
|
||||
_this.currentStep = 3;
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleSuccess(response, file, fileList){
|
||||
console.log("response",response);
|
||||
this.tableName = response.msg;
|
||||
},
|
||||
createStyle(){
|
||||
this.StyleConfigShow = true;
|
||||
// this.$router.push({'path':'/layer_style_config'})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.form-container{
|
||||
width:1200px;
|
||||
padding:20px 20px;
|
||||
height:700px;
|
||||
background:#162258;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.title{
|
||||
width:100%;
|
||||
height:160px;
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
color:#fff;
|
||||
text-indent:20px;
|
||||
}
|
||||
::v-deep .el-upload-dragger{
|
||||
background:none;
|
||||
border:1px solid #108eff;
|
||||
color:#fff;
|
||||
margin:20px auto;
|
||||
width:400px;
|
||||
padding:20px;
|
||||
}
|
||||
::v-deep .el-upload-dragger .el-upload__text{
|
||||
color:#ccc;
|
||||
}
|
||||
::v-deep .el-upload-list__item-name{
|
||||
height:30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner{
|
||||
background:none;
|
||||
border-radius: 0px;
|
||||
border-color: #108eff;
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
color:#ccc;
|
||||
}
|
||||
.form-box{
|
||||
width: calc( 50% - 100px);
|
||||
height: calc( 100% - 280px);
|
||||
float:left;
|
||||
margin-left:100px;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.table-container{
|
||||
width:1040px;
|
||||
margin:0px auto;
|
||||
}
|
||||
|
||||
.upload-iocn-box{
|
||||
width: calc( 50% - 280px);
|
||||
height: calc( 100% - 380px);
|
||||
float:left;
|
||||
text-align:center;
|
||||
position:relative;
|
||||
background:#162258;
|
||||
margin-top:25px;
|
||||
margin-left:120px;
|
||||
}
|
||||
|
||||
.upload-icon-bg{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:#162258;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
.upload-iocn-box::after{
|
||||
content:"";
|
||||
width:40px;
|
||||
height:40px;
|
||||
background:#108eff;
|
||||
position:absolute;
|
||||
top:-3px;
|
||||
left:-3px;
|
||||
z-index:1;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.upload-iocn-box::before{
|
||||
content:"";
|
||||
width:40px;
|
||||
height:40px;
|
||||
background:#108eff;
|
||||
position:absolute;
|
||||
top:-3px;
|
||||
right:-3px;
|
||||
border-radius: 1px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::after{
|
||||
content:"";
|
||||
width:40px;
|
||||
height:40px;
|
||||
background:#108eff;
|
||||
position:absolute;
|
||||
bottom:-3px;
|
||||
left:-3px;
|
||||
border-radius: 1px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::before{
|
||||
content:"";
|
||||
width:40px;
|
||||
height:40px;
|
||||
background:#108eff;
|
||||
position:absolute;
|
||||
bottom:-3px;
|
||||
right:-3px;
|
||||
border-radius: 1px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.upload-iocn-box img{
|
||||
width:140px;
|
||||
}
|
||||
.upload-iocn{
|
||||
margin-top:10px;
|
||||
}
|
||||
.upload-icon-text{
|
||||
font-size:14px;
|
||||
color:#ccc;
|
||||
margin:20px 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-button{
|
||||
border-radius:0px;
|
||||
}
|
||||
::v-deep .el-step__icon-inner{
|
||||
text-align:center;
|
||||
text-indent:0px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-process{
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-step__description.is-process{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table{
|
||||
background:none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-form-item{
|
||||
margin-bottom:25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-result__title p{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-result__subtitle p{
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
}
|
||||
|
||||
::v-deep .el-table th.el-table__cell{
|
||||
background:#162258;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table tr{
|
||||
background:#162258;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table .el-table__body tr:hover>td{
|
||||
background-color: rgba(255,255, 255,.1)!important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr.current-row>td{
|
||||
background-color: rgba(255,255, 255,.1)!important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -9,7 +9,7 @@
|
|||
<el-button type="primary" icon="el-icon-upload" size="small" @click="$router.push({'path':'/shp_data_upload'})">开始上传</el-button>
|
||||
</p>
|
||||
<p class="upload-icon">
|
||||
<img src="/images/shp-file.webp" alt="">
|
||||
<img src="/images/shp-file.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="upload-item box1">
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<el-button type="primary" size="small" icon="el-icon-upload" @click="$router.push({'path':'/excel_data_upload'})">开始上传</el-button>
|
||||
</p>
|
||||
<p class="upload-icon">
|
||||
<img src="/images/excel-file.webp" alt="">
|
||||
<img src="/images/excel-file.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="tuceng_ys">
|
||||
<div class="tuceng_ys_son">
|
||||
<p>图层样式配置</p>
|
||||
<el-form ref="forms" :model="form" label-width="80px">
|
||||
<el-form ref="forms" :model="form" label-width="80px" size="mini">
|
||||
<el-form-item label="样式名称">
|
||||
<el-input style="width: 300px" v-model="form.styleName"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
v-model="form.type"
|
||||
placeholder="请选择数据格式"
|
||||
>
|
||||
<el-option label="点" value="0"></el-option>
|
||||
<!-- <el-option label="点" value="0"></el-option> -->
|
||||
<el-option label="线" value="1"></el-option>
|
||||
<el-option label="面" value="2"></el-option>
|
||||
</el-select>
|
||||
|
|
@ -69,11 +69,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
form: {
|
||||
type: "0",
|
||||
type: "1",
|
||||
styleName: "",
|
||||
fillColor: "#FFFFFF",
|
||||
fillColor: "",
|
||||
fillOpacity: "",
|
||||
strokeColor: "#fff",
|
||||
strokeColor: "",
|
||||
strokeWidth: "",
|
||||
},
|
||||
};
|
||||
|
|
@ -85,6 +85,7 @@ export default {
|
|||
saveLayerStyle(this.form).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("创建成功");
|
||||
this.loading = true
|
||||
this.$emit("yschange");
|
||||
} else {
|
||||
this.$message.error("创建失败");
|
||||
|
|
@ -101,7 +102,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.data-upload {
|
||||
width: 500px;
|
||||
width: 100%;
|
||||
position:absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -109,16 +110,16 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background:#162258;
|
||||
z-index:99999999999;
|
||||
}
|
||||
.tuceng_ys {
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
border-color: #1da1f2;
|
||||
height: calc( 100% - 60px);
|
||||
}
|
||||
.tuceng_ys .tuceng_ys_son {
|
||||
width: 500px;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid #10a2e1;
|
||||
border-radius: 10px;
|
||||
padding: 10px 10px 10px 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@
|
|||
!-->
|
||||
<template>
|
||||
<div class="mars3dbox">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="服务名称">
|
||||
<el-input v-model="page.severName" placeholder="服务名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="info" @click="qingkong">清空</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="18"
|
||||
><div class="bg-purple1">
|
||||
|
|
@ -226,7 +235,14 @@
|
|||
<el-option label="否" :value="false"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.popup" label="弹窗">
|
||||
<el-form-item label="弹窗样式">
|
||||
<el-radio-group v-model="resource" style="margin-top: 12px">
|
||||
<el-radio style="color: #fff" label="样式一"></el-radio>
|
||||
<el-radio style="color: #fff" label="样式二"></el-radio>
|
||||
<el-radio style="color: #fff" label="样式三"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.popup" label="弹窗数据">
|
||||
<el-button @click="tableBtnadd" type="primary">添加行</el-button>
|
||||
<el-table
|
||||
:data="form.popup"
|
||||
|
|
@ -376,6 +392,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
resource: "样式一",
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
},
|
||||
|
|
@ -391,54 +408,6 @@ export default {
|
|||
pitch: "",
|
||||
roll: "",
|
||||
},
|
||||
zhnachazhan: {
|
||||
pid: 10040,
|
||||
type: "geojson",
|
||||
name: "检查站",
|
||||
url: "http://175.27.168.120:8080/geoserver/pingyixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pingyixian%3A86fanghuozhan&maxFeatures=5000&outputFormat=application%2Fjson",
|
||||
noCenter: true,
|
||||
symbol: {
|
||||
styleOptions: {
|
||||
image:
|
||||
"https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684688400&t=eabd99a5c519c28ced283c3cf62e6f4c",
|
||||
scale: 0.25,
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 20000,
|
||||
scaleByDistance_farValue: 0.5,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
verticalOrigin: 1,
|
||||
horizontalOrigin: 0,
|
||||
clampToGround: true,
|
||||
label: {
|
||||
text: "{name}",
|
||||
font_size: 15,
|
||||
color: "#ffffff",
|
||||
outline: true,
|
||||
outlineColor: "#000000",
|
||||
pixelOffsetY: 10,
|
||||
scaleByDistance: true,
|
||||
scaleByDistance_far: 80000,
|
||||
scaleByDistance_farValue: 0.5,
|
||||
scaleByDistance_near: 1000,
|
||||
scaleByDistance_nearValue: 1,
|
||||
distanceDisplayCondition: true,
|
||||
distanceDisplayCondition_far: 80000,
|
||||
distanceDisplayCondition_near: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
popup: [],
|
||||
center: {
|
||||
lat: 35.376128,
|
||||
lng: 118.036717,
|
||||
alt: 2779,
|
||||
heading: 1.3,
|
||||
pitch: -20.5,
|
||||
},
|
||||
show: false,
|
||||
flyTo: true,
|
||||
},
|
||||
form: {},
|
||||
tubiaourl: [],
|
||||
// 页面数据
|
||||
|
|
@ -453,6 +422,7 @@ export default {
|
|||
total: 100, //总数量
|
||||
size: 10, //每页数量
|
||||
current: 1, //当前页
|
||||
severName: "",
|
||||
},
|
||||
// 树结构数据
|
||||
treeptions: [],
|
||||
|
|
@ -495,6 +465,14 @@ export default {
|
|||
|
||||
// 方法实现
|
||||
methods: {
|
||||
// 查询
|
||||
onSubmit() {
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
qingkong() {
|
||||
this.page.severName = "";
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
// 获取弹窗数据
|
||||
listData(tableRef) {
|
||||
listData({
|
||||
|
|
@ -557,7 +535,11 @@ export default {
|
|||
},
|
||||
// 获取图层列表
|
||||
onLoad(page) {
|
||||
list({ pageSize: page.size, pageNum: page.current }).then((res) => {
|
||||
list({
|
||||
pageSize: page.size,
|
||||
pageNum: page.current,
|
||||
severName: page.severName,
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.page.total = res.data.total;
|
||||
this.tableData = res.data.rows;
|
||||
|
|
@ -687,20 +669,100 @@ export default {
|
|||
},
|
||||
// 图层修改提交
|
||||
submit() {
|
||||
this.form.center = this.marsform;
|
||||
update({
|
||||
id: this.tucengId,
|
||||
style: JSON.stringify(this.form),
|
||||
type: 2,
|
||||
updateName: this.form.name,
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.getApplicationInfo();
|
||||
this.fenleidilong = false;
|
||||
let proper = "";
|
||||
if (this.form.popup) {
|
||||
proper = this.form.popup;
|
||||
}
|
||||
if (this.resource == "样式一") {
|
||||
this.form.center = this.marsform;
|
||||
this.form.popupOptions = "";
|
||||
update({
|
||||
id: this.tucengId,
|
||||
style: JSON.stringify(this.form),
|
||||
type: 2,
|
||||
updateName: this.form.name,
|
||||
properties: JSON.stringify(proper),
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.getApplicationInfo();
|
||||
this.fenleidilong = false;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
} else if (this.resource == "样式二") {
|
||||
if (this.form.popupOptions == "") {
|
||||
this.form.popupOptions = {
|
||||
offsetY: -30,
|
||||
template: "",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
};
|
||||
}
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.form.center = this.marsform;
|
||||
this.form.popupOptions.template =
|
||||
"<div class='marsBlackPanel animation-spaceInDown'><div class='marsBlackPanel-text'>{content}</div><span class='mars3d-popup-close-button closeButton' >×</span></div>";
|
||||
let st = `<div class="popup-container"><div class="popup-title">${this.form.name}</div>`;
|
||||
for (let index = 0; index < this.form.popup.length; index++) {
|
||||
st += `<div class="popup-item">${this.form.popup[index].name}:{${this.form.popup[index].field}}</div>`;
|
||||
}
|
||||
st += `</div>`;
|
||||
this.form.popup = st;
|
||||
update({
|
||||
id: this.tucengId,
|
||||
style: JSON.stringify(this.form),
|
||||
type: 2,
|
||||
updateName: this.form.name,
|
||||
properties: JSON.stringify(proper),
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.getApplicationInfo();
|
||||
this.fenleidilong = false;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
} else if (this.resource == "样式三") {
|
||||
if (this.form.popupOptions == "") {
|
||||
this.form.popupOptions = {
|
||||
offsetY: -30,
|
||||
template: "",
|
||||
horizontalOrigin: "Cesium.HorizontalOrigin.LEFT",
|
||||
verticalOrigin: "Cesium.VerticalOrigin.CENTER",
|
||||
};
|
||||
}
|
||||
this.form.center = this.marsform;
|
||||
this.form.popupOptions.template = "{content}";
|
||||
let st = `<div class='marsTiltPanel marsTiltPanel-theme-blue'><div class='marsTiltPanel-wrap'><div class='area'>
|
||||
<div class='arrow-lt'></div>
|
||||
<div class='b-t'></div>
|
||||
<div class='b-r'></div>
|
||||
<div class='b-b'></div>
|
||||
<div class='b-l'></div>
|
||||
<div class='arrow-rb'></div>
|
||||
<div class='label-wrap'>
|
||||
<div class='title'>${this.form.name}</div><div class='label-content'>`;
|
||||
for (let index = 0; index < this.form.popup.length; index++) {
|
||||
st += `<div class='data-li'><div class='data-label'>${this.form.popup[index].name}:</div><div class='data-value'>{${this.form.popup[index].field}}</div></div>`;
|
||||
}
|
||||
st += `</div></div></div><div class='b-t-l'></div><div class='b-b-r'></div></div><div class='arrow'></div></div>`;
|
||||
this.form.popup = st;
|
||||
// console.log(this.form);
|
||||
update({
|
||||
id: this.tucengId,
|
||||
style: JSON.stringify(this.form),
|
||||
type: 2,
|
||||
updateName: this.form.name,
|
||||
properties: JSON.stringify(proper),
|
||||
}).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.getApplicationInfo();
|
||||
this.fenleidilong = false;
|
||||
}
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
},
|
||||
// 创建树结构
|
||||
classification() {
|
||||
|
|
@ -776,6 +838,11 @@ export default {
|
|||
this.listData(res.data.data.tableRef);
|
||||
});
|
||||
this.form = JSON.parse(res.data.data.attribute);
|
||||
console.log("获取的样式", res.data.data);
|
||||
console.log("attribute", this.form);
|
||||
if (this.form.popup) {
|
||||
this.form.popup = JSON.parse(res.data.data.properties) || [];
|
||||
}
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.initMap(this.form);
|
||||
|
|
@ -915,7 +982,7 @@ export default {
|
|||
}
|
||||
::v-deep.mars3dbox .el-form-item__label {
|
||||
color: #00b2ff;
|
||||
line-height: 1.875rem;
|
||||
line-height: 40px;
|
||||
}
|
||||
::v-deep.mars3dbox .el-button--small {
|
||||
padding: 10px 40px;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,65 @@
|
|||
<template>
|
||||
<div class="monitor-list-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="17">
|
||||
<el-col :span="6" style="background:#072e69;padding:30px;position:absolute;top:15px;left:30px;z-index:99;" v-if="monitorShow">
|
||||
<div class="video-play-container">
|
||||
<monitor v-if="monitorShow" :monitorInfo="currentMonitor" :key="monitorKey"></monitor>
|
||||
</div>
|
||||
<p class="monitor-desc-item">监控名称：{{currentMonitor.cameraname}}</p>
|
||||
<p class="monitor-desc-item">设备编号：{{currentMonitor.cameraindexcode}}</p>
|
||||
<p class="monitor-desc-item">设备类型：{{currentMonitor.cameratypename}}</p>
|
||||
<p class="monitor-desc-item">设备通道：{{currentMonitor.channelno}}</p>
|
||||
<p class="monitor-desc-item">设备位置：{{currentMonitor.longitude}},{{currentMonitor.latitude}}</p>
|
||||
<p class="monitor-desc-item">更新时间：{{currentMonitor.updatetime}}</p>
|
||||
<p style="text-align:center;margin-top:280px;margin-bottom:20px;">
|
||||
<el-button type="primary" style="width:160px;border-radius:25px;" size="small" icon="el-icon-location-information" round @click="flyToPosition(currentMonitor)">位置</el-button>
|
||||
<el-button type="warning" style="width:160px;border-radius:25px;" size="small" icon="el-icon-close" round @click="monitorShow = false">关闭</el-button>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="map-container" id="mapContainer">
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7" style="background:#072e69;padding:15px;">
|
||||
<el-col :span="6" style="background:#072e69;padding:15px;">
|
||||
<div class="search-container">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
|
||||
<el-form-item label="">
|
||||
<el-input v-model="listQuery.value" placeholder="请输入设备名称" style="width:220px;"></el-input>
|
||||
<el-input v-model="listQuery.querystr" placeholder="请输入设备名称" style="width:220px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" >查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
|
||||
|
||||
<el-button type="primary" icon="el-icon-plus" >重置</el-button>
|
||||
<el-button type="" icon="el-icon-refresh-left" @click="listQuery.querystr = null;getList()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="monitor-box">
|
||||
<div class="monitor-item" v-for="(item,index) in tableData" :key="index" >
|
||||
<div class="monitor-item" v-for="(item,index) in tableData" :key="index" @click="getDetail(item);" >
|
||||
<div class="monitor-image">
|
||||
<div class="play-button"></div>
|
||||
<p class="monitor-desc" style="position:absolute;bottom:6px;left:5px;">{{item.updatetime}}</p>
|
||||
</div>
|
||||
<div class="monitor-info">
|
||||
<p class="monitor-name">{{item.cameraname}}</p>
|
||||
<p class="monitor-desc">设备编码：{{item.cameraindexcode}}</p>
|
||||
<p class="monitor-desc">设备类型：{{item.cameratypename}}</p>
|
||||
<p class="monitor-desc">更新时间：{{item.updatetime}}</p>
|
||||
<p class="monitor-position"> <i class="el-icon el-icon-location-information"></i> {{parseFloat(item.longitude).toFixed(4)+","+parseFloat(item.latitude).toFixed(4)}}</p>
|
||||
<p class="monitor-desc">编码：{{item.cameraindexcode}}</p>
|
||||
<p class="monitor-desc">类型：{{item.cameratypename}}</p>
|
||||
|
||||
<p class="monitor-position"> <i class="el-icon el-icon-location-information"></i> {{(item.longitude ? parseFloat(item.longitude).toFixed(6) : '暂无') +","+ (item.latitude ? parseFloat(item.latitude).toFixed(6):'暂无')}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pageer-container">
|
||||
<el-pagination
|
||||
:page-size="20"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:total="totle">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<el-table
|
||||
v-if="false"
|
||||
:data="tableData"
|
||||
|
|
@ -68,7 +96,7 @@
|
|||
label="位置"
|
||||
width="">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.longitude}} {{scope.row.latitude}}
|
||||
{{scope.row.longitude!=NaN ? scope.row.longitude :'无'}} {{scope.row.latitude!=NaN ? scope.row.latitude : '无'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
|
@ -86,7 +114,8 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -94,19 +123,32 @@
|
|||
<script>
|
||||
import { getMethodCommon } from '../../api/Api'
|
||||
import {getMonitorList} from "@/api/monitor.js";
|
||||
import monitor from './monitor'
|
||||
export default {
|
||||
name: 'index',
|
||||
components:{
|
||||
monitor
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
monitorKey:1000,
|
||||
monitorShow:false,
|
||||
formInline:{},
|
||||
listQuery:{},
|
||||
listQuery:{
|
||||
querystr:null,
|
||||
pageIndex:1,
|
||||
pageSize:20,
|
||||
},
|
||||
tableData: [],
|
||||
globalMap:null,
|
||||
|
||||
totle:0,
|
||||
currentMonitor:{},
|
||||
serviceName:"",
|
||||
serviceId:"",
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList();
|
||||
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
|
@ -114,14 +156,16 @@ import {getMonitorList} from "@/api/monitor.js";
|
|||
},
|
||||
methods:{
|
||||
getList(){
|
||||
getMonitorList({pageIndex: 2,pageSize: 20}).then(res=>{
|
||||
getMonitorList(this.listQuery).then(res=>{
|
||||
if(res.data.code == 200){
|
||||
this.tableData = res.data.data;
|
||||
this.totle = res.data.count;
|
||||
this.handleGeoJson();
|
||||
}
|
||||
})
|
||||
},
|
||||
initMap(){
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
this.globalMap = new this.$mapboxgl.Map({
|
||||
container:"mapContainer",
|
||||
center:[118.0075,35.42222222],
|
||||
|
|
@ -131,13 +175,159 @@ import {getMonitorList} from "@/api/monitor.js";
|
|||
pitch:0,
|
||||
// style:"mapbox://styles/mapbox/satellite-v9"
|
||||
// style:"mapbox://styles/mapbox/streets-v11"
|
||||
style:"mapbox://styles/mapbox/dark-v10"
|
||||
|
||||
style:"mapbox://styles/xujingliang/cli9pwr6x00y601q1a2w47kwg"
|
||||
});
|
||||
let _this = this;
|
||||
_this.globalMap.on("load",function(){
|
||||
_this.globalMap.loadImage('/images/monitor-icon.png', function(error, image) {
|
||||
if (error) throw error;
|
||||
_this.globalMap.addImage('my-image', image);
|
||||
});
|
||||
_this.loadGaoQingLayer();
|
||||
_this.loadDianZiLayer();
|
||||
_this.loadXianJieLayer();
|
||||
_this.getList();
|
||||
})
|
||||
},
|
||||
handleGeoJson(){
|
||||
|
||||
}
|
||||
let geojson = {
|
||||
"type": "FeatureCollection",
|
||||
"features": []
|
||||
}
|
||||
|
||||
this.tableData.forEach((item,index)=>{
|
||||
let obj = {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [parseFloat(item.longitude),parseFloat(item.latitude)]
|
||||
},
|
||||
"properties": item
|
||||
}
|
||||
geojson.features.push(obj);
|
||||
})
|
||||
|
||||
this.addMonitorLayer(geojson);
|
||||
|
||||
},
|
||||
addMonitorLayer(geojson){
|
||||
let _this = this;
|
||||
if(this.globalMap.getLayer('editorLayer')){
|
||||
this.globalMap.getSource('myData').setData(geojson);
|
||||
}else{
|
||||
this.globalMap.addSource('myData', {
|
||||
type: 'geojson',
|
||||
data: geojson
|
||||
});
|
||||
|
||||
this.globalMap.addLayer({
|
||||
id: 'editorLayer',
|
||||
type: 'symbol',
|
||||
source: 'myData',
|
||||
|
||||
layout: {
|
||||
'icon-image': 'my-image', // 图标名称
|
||||
'icon-size': 0.6, // 图标大小
|
||||
'text-field': '{cameraname}',
|
||||
'text-size': 14,
|
||||
'text-offset':[0,2],
|
||||
},
|
||||
paint: {
|
||||
'text-halo-color': '#fff',
|
||||
'text-halo-width': 2,
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
this.globalMap.on("click","editorLayer",function(e){
|
||||
console.log("eee",e.features[0]);
|
||||
_this.getDetail(e.features[0].properties);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
getDetail(item){
|
||||
this.currentMonitor = item;
|
||||
if(item.longitude && item.latitude){
|
||||
this.globalMap.flyTo({
|
||||
center:[parseFloat(item.longitude),parseFloat(item.latitude)],
|
||||
zoom:18
|
||||
})
|
||||
}
|
||||
this.monitorKey = Math.random()*1000;
|
||||
if(!this.monitorShow){
|
||||
this.monitorShow = true;
|
||||
}
|
||||
|
||||
},
|
||||
flyToPosition(item){
|
||||
if(item.longitude && item.latitude){
|
||||
this.globalMap.flyTo({
|
||||
center:[parseFloat(item.longitude),parseFloat(item.latitude)],
|
||||
zoom:18
|
||||
})
|
||||
}
|
||||
},
|
||||
handleSizeChange(e){
|
||||
this.listQuery.pageSize = e;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(e){
|
||||
this.listQuery.pageIndex = e;
|
||||
this.getList();
|
||||
|
||||
},
|
||||
loadDianZiLayer(){
|
||||
this.globalMap.addLayer({
|
||||
'id': 'tiandituzhuji',
|
||||
'type': 'raster',
|
||||
'source':{
|
||||
"type": "raster",
|
||||
"tiles": ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
|
||||
"tileSize": 256,
|
||||
},
|
||||
'layout':{
|
||||
'visibility':'visible'
|
||||
},
|
||||
})
|
||||
},
|
||||
loadGaoQingLayer(){
|
||||
this.globalMap.addLayer({
|
||||
'id': 'gaoqingyingxiang',
|
||||
'type': 'raster',
|
||||
'source': {
|
||||
'type': 'raster',
|
||||
'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
|
||||
'tileSize': 256
|
||||
},
|
||||
'layout':{
|
||||
'visibility':'visible'
|
||||
},
|
||||
'paint': {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
loadXianJieLayer(){
|
||||
this.globalMap.addLayer({
|
||||
id: 'xianjie',
|
||||
type: 'line',
|
||||
layout:{
|
||||
"visibility":"visible"
|
||||
},
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: 'http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson'
|
||||
},
|
||||
paint: {
|
||||
'line-width': 2,
|
||||
'line-color': 'orange'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -150,34 +340,65 @@ import {getMonitorList} from "@/api/monitor.js";
|
|||
width: calc( 100% - 0px);
|
||||
padding:30px;
|
||||
}
|
||||
|
||||
.map-container{
|
||||
width:100%;
|
||||
height: calc( 100% - 80px);
|
||||
}
|
||||
.video-play-container{
|
||||
width:100%;
|
||||
height:300px;
|
||||
background:rgba(255,255,255,0.4);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.monitor-desc-item{
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
.monitor-box{
|
||||
height: calc( 100% - 160px);
|
||||
|
||||
height: calc( 100% - 190px);
|
||||
overflow: auto;
|
||||
}
|
||||
.monitor-item{
|
||||
width:100%;
|
||||
height:160px;
|
||||
height:135px;
|
||||
background:#062553;
|
||||
padding:15px;
|
||||
margin-bottom:15px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.monitor-item .monitor-image{
|
||||
width:160px;
|
||||
height:130px;
|
||||
background:rgba(0,0,0,0.4);
|
||||
height:105px;
|
||||
background:rgba(0,0,0,0.2);
|
||||
float:left;
|
||||
background-image:url(/images/monitor.webp);
|
||||
background-size:100% 100%;
|
||||
background-image:url(/images/monitor-icon-2.png);
|
||||
background-size:60% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position:50% 0;
|
||||
position:relative;
|
||||
transition-delay: all 0.35s;
|
||||
}
|
||||
.monitor-item .monitor-image:hover .play-button{
|
||||
display:block;
|
||||
}
|
||||
.monitor-item .monitor-image .play-button{
|
||||
width:160px;
|
||||
height:105px;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
background:rgba(0,0,0,0.6);
|
||||
background-image:url(/images/play-button.png);
|
||||
background-repeat:no-repeat;
|
||||
background-position:50% 26%;
|
||||
display:none;
|
||||
transition-delay: all 0.35s;
|
||||
}
|
||||
.monitor-item .monitor-info{
|
||||
float:left;
|
||||
width: calc( 100% - 210px);
|
||||
width: calc( 100% - 175px);
|
||||
margin-left:15px;
|
||||
}
|
||||
.monitor-item .monitor-info .monitor-name{
|
||||
|
|
@ -191,14 +412,43 @@ import {getMonitorList} from "@/api/monitor.js";
|
|||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
color:#ccc;
|
||||
font-size:13px;
|
||||
width:100%;
|
||||
}
|
||||
.monitor-item .monitor-info .monitor-position{
|
||||
font-size:16px;
|
||||
font-weight: bold;
|
||||
color:yellow;
|
||||
margin-top:12px;
|
||||
text-align:right;
|
||||
width:100%;
|
||||
text-align:right;
|
||||
}
|
||||
.pageer-container{
|
||||
width:100%;
|
||||
height:50px;
|
||||
padding-top:15px;
|
||||
text-align:center;
|
||||
}
|
||||
::v-deep .el-pager li{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination button:disabled{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-next{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-pagination .btn-prev{
|
||||
background:none;
|
||||
color:#fff;
|
||||
}
|
||||
::v-deep .el-pager li.active{
|
||||
color:#00b2ff;
|
||||
}
|
||||
::v-deep .el-table__fixed-right::before, .el-table__fixed::before{
|
||||
height:0px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<iframe
|
||||
id = "iframe"
|
||||
ref="fIframe"
|
||||
scrolling="no"
|
||||
frameborder ="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src="/hk/index.html"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'monitor',
|
||||
props:["monitorInfo"],
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let arr = [
|
||||
this.monitorInfo.cameraindexcode,
|
||||
this.monitorInfo.cameraindexcode,
|
||||
"23604396",
|
||||
"221.2.83.54",
|
||||
1443,
|
||||
"NZJ8L3bxCOOV6rtTFjsx"
|
||||
]
|
||||
|
||||
let _this = this;
|
||||
|
||||
this.$refs.fIframe.onload = function () {
|
||||
_this.$refs.fIframe.contentWindow.postMessage(arr)
|
||||
}
|
||||
|
||||
window.addEventListener('message', (e)=>{
|
||||
this.$emit("closeMonitor")
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue