代码提交
This commit is contained in:
parent
a5e2243cad
commit
9f4c0f9c76
|
|
@ -14,6 +14,7 @@
|
||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"three": "^0.164.1",
|
"three": "^0.164.1",
|
||||||
|
"uuid": "^11.0.4",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
|
|
@ -1390,6 +1391,18 @@
|
||||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
|
||||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||||
},
|
},
|
||||||
|
"node_modules/uuid": {
|
||||||
|
"version": "11.0.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-11.0.4.tgz",
|
||||||
|
"integrity": "sha512-IzL6VtTTYcAhA/oghbFJ1Dkmqev+FpQWnCBaKq/gUluLxliWvO8DPFWfIviRmYbtaavtSQe4WBL++rFjdcGWEg==",
|
||||||
|
"funding": [
|
||||||
|
"https://github.com/sponsors/broofa",
|
||||||
|
"https://github.com/sponsors/ctavan"
|
||||||
|
],
|
||||||
|
"bin": {
|
||||||
|
"uuid": "dist/esm/bin/uuid"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "4.4.11",
|
"version": "4.4.11",
|
||||||
"resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
|
"resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
|
||||||
|
|
@ -2374,6 +2387,11 @@
|
||||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
|
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
|
||||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
|
||||||
},
|
},
|
||||||
|
"uuid": {
|
||||||
|
"version": "11.0.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-11.0.4.tgz",
|
||||||
|
"integrity": "sha512-IzL6VtTTYcAhA/oghbFJ1Dkmqev+FpQWnCBaKq/gUluLxliWvO8DPFWfIviRmYbtaavtSQe4WBL++rFjdcGWEg=="
|
||||||
|
},
|
||||||
"vite": {
|
"vite": {
|
||||||
"version": "4.4.11",
|
"version": "4.4.11",
|
||||||
"resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
|
"resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz",
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
"less": "^4.2.0",
|
"less": "^4.2.0",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"three": "^0.164.1",
|
"three": "^0.164.1",
|
||||||
|
"uuid": "^11.0.4",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.5"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 3.7 KiB |
|
|
@ -325,7 +325,7 @@
|
||||||
funcName: "startPlayback",
|
funcName: "startPlayback",
|
||||||
argument: JSON.stringify({
|
argument: JSON.stringify({
|
||||||
cameraIndexCode: cameraIndex, //监控点编号
|
cameraIndexCode: cameraIndex, //监控点编号
|
||||||
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
|
startTimeStamp: Math.floor((startTimeStamp / 1000)).toString(), //录像查询开始时间戳，单位：秒
|
||||||
endTimeStamp: Math.floor((endTimeStamp / 1000) + 10).toString(), //录像结束开始时间戳，单位：秒
|
endTimeStamp: Math.floor((endTimeStamp / 1000) + 10).toString(), //录像结束开始时间戳，单位：秒
|
||||||
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
|
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
|
||||||
transMode: transMode, //传输协议：0-UDP，1-TCP
|
transMode: transMode, //传输协议：0-UDP，1-TCP
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,391 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>playback</title>
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playWnd {
|
||||||
|
/* margin: 30px 0 0 400px;
|
||||||
|
width: 1000px;
|
||||||
|
/*播放容器的宽和高设定*/
|
||||||
|
/* height: 600px;
|
||||||
|
border: 1px solid red; */
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left:73%;
|
||||||
|
top:56%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module {
|
||||||
|
float: left;
|
||||||
|
width: 340px;
|
||||||
|
/*min-height: 320px;*/
|
||||||
|
margin-left: 16px;
|
||||||
|
padding: 16px 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module .item {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module input[type="text"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 150px;
|
||||||
|
min-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.module .btn {
|
||||||
|
min-width: 80px;
|
||||||
|
min-height: 24px;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!--回放界面-->
|
||||||
|
<!-- <div id="operate" class="operate">
|
||||||
|
<div class="module">
|
||||||
|
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""></div>
|
||||||
|
<div class="item"><span class="label">回放开始时间：</span><input id="startTimeStamp" type="text"
|
||||||
|
placeholder="yyyy-MM-dd hh:mm:ss格式"></div>
|
||||||
|
<div class="item"><span class="label">回放结束时间：</span><input id="endTimeStamp" type="text"
|
||||||
|
placeholder="yyyy-MM-dd hh:mm:ss格式"></div>
|
||||||
|
<div class="item" style="margin-top: 20px;margin-left: -20px;">
|
||||||
|
|
||||||
|
<button style="width:90px;padding:0;margin:0;" id="startPlayback" class="btn">回放</button>
|
||||||
|
|
||||||
|
<button style="width:90px;padding:0;margin:0;" id="stopAllPlayback" class="btn">停止全部回放</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-left: 15px;">注意： 开始回放前请打开该文件的源代码，将appkey、录像存储位置等信息修改为实际项目中的信息</div> -->
|
||||||
|
|
||||||
|
<!--视频窗口展示-->
|
||||||
|
<div id="playWnd" class="playWnd"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<!--三个必要的js文件引入-->
|
||||||
|
<script src="jquery-1.12.4.min.js"></script>
|
||||||
|
<script src="jsencrypt.min.js"></script>
|
||||||
|
<script src="web-control_1.2.7.min.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
//页面加载时创建播放实例初始化
|
||||||
|
$(window).load(function () {
|
||||||
|
var palyer = document.querySelector('#playWnd')
|
||||||
|
playerWidth = palyer.offsetWidth - 10
|
||||||
|
playerHeight = palyer.offsetHeight - 10
|
||||||
|
initPlugin();
|
||||||
|
});
|
||||||
|
|
||||||
|
//声明公用变量
|
||||||
|
var initCount = 0;
|
||||||
|
var pubKey = '';
|
||||||
|
// if (self.frameElement) {
|
||||||
|
|
||||||
|
// var url = location.search.split("=")[1]
|
||||||
|
// console.log(url, 'aaa');
|
||||||
|
// var cameraIndex = url.split(',')[0]
|
||||||
|
|
||||||
|
// var startTime = url.split(',')[1]
|
||||||
|
// var endTime = url.split(',')[2]
|
||||||
|
// }
|
||||||
|
// 创建WebControl实例与启动插件
|
||||||
|
function initPlugin() {
|
||||||
|
oWebControl = new WebControl({
|
||||||
|
szPluginContainer: "playWnd", //指定容器id
|
||||||
|
iServicePortStart: 15900, //指定起止端口号，建议使用该值
|
||||||
|
iServicePortEnd: 15900,
|
||||||
|
cbConnectSuccess: function () {
|
||||||
|
// setCallbacks();
|
||||||
|
//实例创建成功后需要启动服务
|
||||||
|
oWebControl.JS_StartService("window", {
|
||||||
|
dllPath: "./VideoPluginConnect.dll"
|
||||||
|
}).then(function () {
|
||||||
|
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||||
|
cbIntegrationCallBack: cbIntegrationCallBack
|
||||||
|
});
|
||||||
|
|
||||||
|
oWebControl.JS_CreateWnd("playWnd", playerWidth, playerHeight).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||||
|
console.log("JS_CreateWnd success");
|
||||||
|
init(); //创建播放实例成功后初始化
|
||||||
|
});
|
||||||
|
}, function () {
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cbConnectError: function () {
|
||||||
|
console.log("cbConnectError");
|
||||||
|
oWebControl = null;
|
||||||
|
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||||
|
WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数，采用wakeup来启动程序
|
||||||
|
initCount++;
|
||||||
|
if (initCount < 3) {
|
||||||
|
setTimeout(function () {
|
||||||
|
initPlugin();
|
||||||
|
}, 3000)
|
||||||
|
} else {
|
||||||
|
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cbConnectClose: function () {
|
||||||
|
console.log("cbConnectClose");
|
||||||
|
oWebControl = null;
|
||||||
|
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||||
|
WebControl.JS_WakeUp("VideoWebPlugin://");
|
||||||
|
initCount++;
|
||||||
|
if (initCount < 3) {
|
||||||
|
setTimeout(function () {
|
||||||
|
initPlugin();
|
||||||
|
}, 3000)
|
||||||
|
} else {
|
||||||
|
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 推送消息
|
||||||
|
function cbIntegrationCallBack(oData) {
|
||||||
|
console.log(JSON.stringify(oData.responseMsg));
|
||||||
|
}
|
||||||
|
|
||||||
|
//初始化
|
||||||
|
function init() {
|
||||||
|
getPubKey(function () {
|
||||||
|
|
||||||
|
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||||
|
var appkey = "24603469"; //综合安防管理平台提供的appkey，必填
|
||||||
|
var secret = setEncrypt("ku1Y8R41fch9J5saqLB2"); //综合安防管理平台提供的secret，必填
|
||||||
|
var ip = "192.168.17.3"; //综合安防管理平台IP地址，必填
|
||||||
|
var playMode = 1; //初始播放模式：0-预览，1-回放
|
||||||
|
var port = 443; //综合安防管理平台端口，若启用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"; //自定义工具条按钮
|
||||||
|
//var reconnectTimes = 2; // 重连次数，回放异常情况下有效
|
||||||
|
//var reconnectTime = 4; // 每次重连的重连间隔 >= reconnectTime
|
||||||
|
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||||
|
|
||||||
|
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 //自定义工具条按钮
|
||||||
|
//reconnectTimes：reconnectTimes, //重连次数
|
||||||
|
//reconnectDuration：reconnectTime //重连间隔
|
||||||
|
})
|
||||||
|
}).then(function (oData) {
|
||||||
|
oWebControl.JS_Resize(playerWidth, playerHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取公钥
|
||||||
|
function getPubKey(callback) {
|
||||||
|
oWebControl.JS_RequestInterface({
|
||||||
|
funcName: "getRSAPubKey",
|
||||||
|
argument: JSON.stringify({
|
||||||
|
keyLength: 1024
|
||||||
|
})
|
||||||
|
}).then(function (oData) {
|
||||||
|
console.log(oData);
|
||||||
|
if (oData.responseMsg.data) {
|
||||||
|
pubKey = oData.responseMsg.data;
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
|
||||||
|
// startPlayBack()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// RSA加密
|
||||||
|
function setEncrypt(value) {
|
||||||
|
var encrypt = new JSEncrypt();
|
||||||
|
encrypt.setPublicKey(pubKey);
|
||||||
|
return encrypt.encrypt(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||||
|
$(window).resize(function () {
|
||||||
|
var palyer = document.querySelector('#playWnd')
|
||||||
|
playerWidth = palyer.offsetWidth - 10
|
||||||
|
playerHeight = palyer.offsetHeight - 10
|
||||||
|
if (oWebControl != null) {
|
||||||
|
oWebControl.JS_Resize(playerWidth, playerHeight);
|
||||||
|
// setWndCover();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||||
|
$(window).scroll(function () {
|
||||||
|
var palyer = document.querySelector('#playWnd')
|
||||||
|
playerWidth = palyer.offsetWidth
|
||||||
|
playerHeight = palyer.offsetHeight
|
||||||
|
if (oWebControl != null) {
|
||||||
|
oWebControl.JS_Resize(1000, 600);
|
||||||
|
// 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 > 1000) ? 1000 : iCoverLeft;
|
||||||
|
iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
|
||||||
|
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
|
||||||
|
iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;
|
||||||
|
|
||||||
|
oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
|
||||||
|
if (iCoverLeft != 0) {
|
||||||
|
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
|
||||||
|
}
|
||||||
|
if (iCoverTop != 0) {
|
||||||
|
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||||
|
}
|
||||||
|
if (iCoverRight != 0) {
|
||||||
|
oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
|
||||||
|
}
|
||||||
|
if (iCoverBottom != 0) {
|
||||||
|
oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//录像回放功能
|
||||||
|
$("#startPlayback").click(function () {
|
||||||
|
|
||||||
|
startPlayBack()
|
||||||
|
});
|
||||||
|
function setCover(){
|
||||||
|
oWebControl.JS_CuttingPartWindow(0,0,335,400);
|
||||||
|
}
|
||||||
|
function restoreCover(){
|
||||||
|
oWebControl.JS_RepairPartWindow(0,0,335,400);
|
||||||
|
}
|
||||||
|
function startPlayBack(startTime,endTime,cameraIndex) {
|
||||||
|
console.log(startTime, endTime, cameraIndex, '播放参数');
|
||||||
|
var cameraIndexCode = $("#cameraIndexCode").val(); //获取输入的监控点编号值，必填
|
||||||
|
var startTimeStamp = startTime; //回放开始时间戳，必填
|
||||||
|
var endTimeStamp = endTime; //回放结束时间戳，必填
|
||||||
|
// var startTimeStamp = new Date($("#startTimeStamp").val().replace('-', '/').replace('-', '/')).getTime(); //回放开始时间戳，必填
|
||||||
|
// var endTimeStamp = new Date($("#endTimeStamp").val().replace('-', '/').replace('-', '/')).getTime(); //回放结束时间戳，必填
|
||||||
|
var recordLocation = 0; //录像存储位置：0-中心存储，1-设备存储
|
||||||
|
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||||
|
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||||
|
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||||
|
|
||||||
|
oWebControl.JS_RequestInterface({
|
||||||
|
funcName: "startPlayback",
|
||||||
|
argument: JSON.stringify({
|
||||||
|
cameraIndexCode: cameraIndex, //监控点编号
|
||||||
|
startTimeStamp: Math.floor((startTimeStamp / 1000)).toString(), //录像查询开始时间戳，单位：秒
|
||||||
|
endTimeStamp: Math.floor((endTimeStamp / 1000)).toString(), //录像结束开始时间戳，单位：秒
|
||||||
|
recordLocation: recordLocation, //录像存储类型：0-中心存储，1-设备存储
|
||||||
|
transMode: transMode, //传输协议：0-UDP，1-TCP
|
||||||
|
gpuMode: gpuMode, //是否启用GPU硬解，0-不启用，1-启用
|
||||||
|
wndId: wndId,
|
||||||
|
layout: "1x1" //可指定播放窗口
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 停止回放
|
||||||
|
$("#stopAllPlayback").click(function () {
|
||||||
|
oWebControl.JS_RequestInterface({
|
||||||
|
funcName: "stopAllPlayback"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
//设置录像回放时间的默认值
|
||||||
|
// var endTime = dateFormat(new Date(), "yyyy-MM-dd 23:59:59");
|
||||||
|
// var startTime = dateFormat(new Date(), "yyyy-MM-dd 00:00:00");
|
||||||
|
// $("#startTimeStamp").val(startTime);
|
||||||
|
// $("#endTimeStamp").val(endTime);
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
function dateFormat(oDate, fmt) {
|
||||||
|
var o = {
|
||||||
|
"M+": oDate.getMonth() + 1, //月份
|
||||||
|
"d+": oDate.getDate(), //日
|
||||||
|
"h+": oDate.getHours(), //小时
|
||||||
|
"m+": oDate.getMinutes(), //分
|
||||||
|
"s+": oDate.getSeconds(), //秒
|
||||||
|
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
|
||||||
|
"S": oDate.getMilliseconds()//毫秒
|
||||||
|
};
|
||||||
|
if (/(y+)/.test(fmt)) {
|
||||||
|
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||||
|
}
|
||||||
|
for (var k in o) {
|
||||||
|
if (new RegExp("(" + k + ")").test(fmt)) {
|
||||||
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fmt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签关闭
|
||||||
|
$(window).unload(function () {
|
||||||
|
if (oWebControl != null) {
|
||||||
|
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
|
||||||
|
oWebControl.JS_Disconnect().then(function () { }, function () { });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -158,7 +158,7 @@
|
||||||
|
|
||||||
// 推送消息
|
// 推送消息
|
||||||
function cbIntegrationCallBack(oData) {
|
function cbIntegrationCallBack(oData) {
|
||||||
console.log(oData,'数据');
|
// console.log(oData,'数据');
|
||||||
}
|
}
|
||||||
|
|
||||||
//初始化
|
//初始化
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ export function getToken(params){
|
||||||
// 获取排班表数据
|
// 获取排班表数据
|
||||||
export function getScheduleList(params) {
|
export function getScheduleList(params) {
|
||||||
return request({
|
return request({
|
||||||
url: 'aps/Handler/GetScheduling.ashx',
|
url: '/aps/Handler/GetScheduling.ashx',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params
|
params
|
||||||
|
|
||||||
|
|
@ -29,7 +29,7 @@ export function getScheduleList(params) {
|
||||||
}
|
}
|
||||||
export function login(params) {
|
export function login(params) {
|
||||||
return request({
|
return request({
|
||||||
url: 'aps/Handler/Login.ashx',
|
url: '/aps/Handler/Login.ashx',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
|
|
@ -37,8 +37,34 @@ export function login(params) {
|
||||||
// 紧急报警数据获取
|
// 紧急报警数据获取
|
||||||
export function getEmergencyApi(params) {
|
export function getEmergencyApi(params) {
|
||||||
return request({
|
return request({
|
||||||
url: 'aps/Handler/GetAlarm.ashx',
|
url: '/aps/Handler/GetAlarm.ashx',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params
|
params
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 抽屉钥匙信息获取
|
||||||
|
export function getKeywordMsg(data) {
|
||||||
|
return request({
|
||||||
|
url: '/keyword/biz/info/terminal/drawerkey',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 钥匙领取记录获取
|
||||||
|
export function getTakeKeyword(data) {
|
||||||
|
return request({
|
||||||
|
url: '/keyword/biz/log/terminal/take',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 钥匙归还记录获取
|
||||||
|
export function getReturnKeyword(data) {
|
||||||
|
return request({
|
||||||
|
url: '/keyword/biz/log/terminal/return',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -44,10 +44,10 @@ getHikvision({
|
||||||
if (res.code == 0) {
|
if (res.code == 0) {
|
||||||
cameraIndexList.value = res.result.data.list;
|
cameraIndexList.value = res.result.data.list;
|
||||||
|
|
||||||
emit('openWebPlayer',cameraIndexList.value)
|
emit("openWebPlayer", cameraIndexList.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["openRealPlayer",'openWebPlayer']);
|
const emit = defineEmits(["openRealPlayer", "openWebPlayer"]);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init();
|
init();
|
||||||
createCamera();
|
createCamera();
|
||||||
|
|
@ -265,6 +265,30 @@ async function initIcon(pointList, type) {
|
||||||
doorGroup.name = "人脸门禁一体机";
|
doorGroup.name = "人脸门禁一体机";
|
||||||
initIconAble.visible = false;
|
initIconAble.visible = false;
|
||||||
scene.add(doorGroup);
|
scene.add(doorGroup);
|
||||||
|
} else if (type.indexOf("温湿度传感器") !== -1) {
|
||||||
|
let initIconAble;
|
||||||
|
initIconAble = createLableObj(
|
||||||
|
pointList[i].name,
|
||||||
|
pointList[i].position,
|
||||||
|
`heat.png`
|
||||||
|
);
|
||||||
|
pointList[i].visible = false;
|
||||||
|
heatGroup.add(initIconAble);
|
||||||
|
heatGroup.name = "温湿度探测器";
|
||||||
|
initIconAble.visible = false;
|
||||||
|
scene.add(heatGroup);
|
||||||
|
} else if (type.indexOf("烟感传感器") !== -1) {
|
||||||
|
let initIconAble;
|
||||||
|
initIconAble = createLableObj(
|
||||||
|
pointList[i].name,
|
||||||
|
pointList[i].position,
|
||||||
|
`yangan.png`
|
||||||
|
);
|
||||||
|
pointList[i].visible = false;
|
||||||
|
smokeGroup.add(initIconAble);
|
||||||
|
smokeGroup.name = "烟感探测器";
|
||||||
|
initIconAble.visible = false;
|
||||||
|
scene.add(smokeGroup);
|
||||||
} else {
|
} else {
|
||||||
let initIconAble;
|
let initIconAble;
|
||||||
if (noStore.indexOf(pointList[i].name) === -1) {
|
if (noStore.indexOf(pointList[i].name) === -1) {
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,31 @@
|
||||||
<div class="el-overlay">
|
<div class="el-overlay">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header">
|
<div class="box-header">
|
||||||
|
<div class="box-date" v-if="props.title == '视频回放'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="datePicker"
|
||||||
|
type="datetimerange"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
@visible-change="visibleChange"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
date-format="YYYY/MM/DD ddd"
|
||||||
|
time-format="A hh:mm:ss"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="box-title">{{ props.title }}</div>
|
<div class="box-title">{{ props.title }}</div>
|
||||||
<div class="box-btn" @click="close"></div>
|
<div class="box-btn" @click="close"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<div class="box-content-left">
|
<div class="box-content-left">
|
||||||
<el-tree :props="treeProps" :load="loadNode" lazy>
|
<el-tree
|
||||||
|
ref="tree"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
:props="treeProps"
|
||||||
|
:load="loadNode"
|
||||||
|
lazy
|
||||||
|
:highlight-current="true"
|
||||||
|
>
|
||||||
<template v-slot="{ node }">
|
<template v-slot="{ node }">
|
||||||
<span
|
<span
|
||||||
@dblclick="playCamera(node)"
|
@dblclick="playCamera(node)"
|
||||||
|
|
@ -19,11 +38,7 @@
|
||||||
</el-tree>
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-right">
|
<div class="box-content-right">
|
||||||
<iframe
|
<iframe id="realPlayer" src="" frameborder="0"></iframe>
|
||||||
id="realPlayer"
|
|
||||||
src="player/realPlayer.html"
|
|
||||||
frameborder="0"
|
|
||||||
></iframe>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-table :data="list" style="width: 100%">
|
<!-- <el-table :data="list" style="width: 100%">
|
||||||
<el-table-column prop="batchNum" label="批次号" width="180" />
|
<el-table-column prop="batchNum" label="批次号" width="180" />
|
||||||
|
|
@ -55,6 +70,10 @@ const treeProps = {
|
||||||
children: "children",
|
children: "children",
|
||||||
isLeaf: "leaf",
|
isLeaf: "leaf",
|
||||||
};
|
};
|
||||||
|
const datePicker = ref([
|
||||||
|
new Date().setHours(0, 0, 0, 0),
|
||||||
|
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1,
|
||||||
|
]);
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
{
|
||||||
batchNum: "YXZZP2303001",
|
batchNum: "YXZZP2303001",
|
||||||
|
|
@ -104,8 +123,6 @@ async function loadNode(node, resolve, reject) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nodeChildren.result.data.list.unshift(...address.result.data.list);
|
nodeChildren.result.data.list.unshift(...address.result.data.list);
|
||||||
nodeChildren.result.data.list.forEach((el) => {
|
nodeChildren.result.data.list.forEach((el) => {
|
||||||
if (el.leaf) {
|
if (el.leaf) {
|
||||||
|
|
@ -117,18 +134,73 @@ async function loadNode(node, resolve, reject) {
|
||||||
return resolve(nodeChildren.result.data.list);
|
return resolve(nodeChildren.result.data.list);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const currentNodeKey = ref([]);
|
||||||
|
const tree = ref(null);
|
||||||
|
function handleNodeClick(obj, node, self, event) {
|
||||||
|
// if (!obj.leaf) {
|
||||||
|
// nextTick(() => {
|
||||||
|
// node.isCurrent = false;
|
||||||
|
// tree.value.setCurrentKey(currentNodeKey.value, false);
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// currentNodeKey.value = obj.name;
|
||||||
|
}
|
||||||
// 播放监控画面
|
// 播放监控画面
|
||||||
function playCamera(node) {
|
function playCamera(node) {
|
||||||
let iframeRef = document.querySelector("#realPlayer");
|
let iframeRef = document.querySelector("#realPlayer");
|
||||||
// iframeRef.contentWindow.postMessage(node.data.cameraIndexCode,'*')
|
// iframeRef.contentWindow.postMessage(node.data.cameraIndexCode,'*')
|
||||||
iframeRef.contentWindow.startPlay(node.data.indexCode);
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.title === "视频监控") {
|
if (props.title === "视频监控") {
|
||||||
|
iframeRef.contentWindow.startPlay(node.data.indexCode);
|
||||||
|
} else if (props.title == "视频回放") {
|
||||||
|
console.log(datePicker.value);
|
||||||
|
iframeRef.contentWindow.startPlayBack(
|
||||||
|
datePicker.value[0],
|
||||||
|
datePicker.value[1],
|
||||||
|
node.data.indexCode
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function visibleChange(bool) {
|
||||||
|
let iframeRef = document.querySelector("#realPlayer");
|
||||||
|
if (bool) {
|
||||||
|
iframeRef.contentWindow.setCover();
|
||||||
|
} else {
|
||||||
|
iframeRef.contentWindow.restoreCover();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
let iframeRef = document.querySelector("#realPlayer");
|
||||||
|
if (props.title === "视频监控") {
|
||||||
|
iframeRef.src = "player/realPlayer.html";
|
||||||
|
} else if (props.title == "视频回放") {
|
||||||
|
iframeRef.src = "player/webPlayback.html";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-date-editor.el-input__wrapper) {
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||||
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
||||||
|
)
|
||||||
|
1 1;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor .el-range-input) {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor.el-input__wrapper) {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
:deep(.el-tree) {
|
:deep(.el-tree) {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -143,14 +215,22 @@ onMounted(() => {
|
||||||
// padding-left: vw(10) !important;
|
// padding-left: vw(10) !important;
|
||||||
height: vh(32);
|
height: vh(32);
|
||||||
}
|
}
|
||||||
|
:deep(
|
||||||
|
.el-tree--highlight-current
|
||||||
|
.el-tree-node.is-current
|
||||||
|
> .el-tree-node__content
|
||||||
|
) {
|
||||||
|
background-image: url("@/assets/images/camera-bg.png") !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
:deep(.el-tree-node__content:hover) {
|
:deep(.el-tree-node__content:hover) {
|
||||||
background-image: url('@/assets/images/camera-bg.png');
|
background-image: url("@/assets/images/camera-bg.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
// background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
// background-color: #fff !important;
|
// background-color: #fff !important;
|
||||||
}
|
}
|
||||||
:deep(.is-leaf:hover) {
|
:deep(.is-leaf:hover) {
|
||||||
|
|
||||||
}
|
}
|
||||||
.node-label {
|
.node-label {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -168,6 +248,11 @@ onMounted(() => {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-image: url("@/assets/images/dialog-bg.png");
|
background-image: url("@/assets/images/dialog-bg.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
&-date {
|
||||||
|
position: absolute;
|
||||||
|
left: vw(20);
|
||||||
|
top: vh(5);
|
||||||
|
}
|
||||||
&-header {
|
&-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: vh(60);
|
height: vh(60);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="nav-font">中国人民解放军73106部队</div>
|
<div class="nav-font">陆军防空第七十一旅弹药库</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,8 @@
|
||||||
<div class="box-btn" @click="close"></div>
|
<div class="box-btn" @click="close"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<iframe
|
<iframe v-if="videoList" id="realPlayer" src="" frameborder="0"></iframe>
|
||||||
id="realPlayer"
|
<img v-else :src="img" alt="" srcset="">
|
||||||
src="player/player_preview.html"
|
|
||||||
frameborder="0"
|
|
||||||
></iframe>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,6 +17,7 @@
|
||||||
import { onMounted, ref } from "vue";
|
import { onMounted, ref } from "vue";
|
||||||
import getPath from "@/utils/getPath";
|
import getPath from "@/utils/getPath";
|
||||||
const emit = defineEmits(["close"]);
|
const emit = defineEmits(["close"]);
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
videoList: {
|
videoList: {
|
||||||
default: null,
|
default: null,
|
||||||
|
|
@ -27,7 +25,11 @@ const props = defineProps({
|
||||||
title: {
|
title: {
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
|
img:{
|
||||||
|
default:''
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
console.log(props.img,'数值');
|
||||||
function close() {
|
function close() {
|
||||||
emit("close", false);
|
emit("close", false);
|
||||||
}
|
}
|
||||||
|
|
@ -52,7 +54,7 @@ onMounted(() => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}else {
|
} else if(props.videoList){
|
||||||
iframeRef.src = "player/playback.html?src=" + props.videoList;
|
iframeRef.src = "player/playback.html?src=" + props.videoList;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -89,6 +91,10 @@ onMounted(() => {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-btn {
|
&-btn {
|
||||||
background-image: url("@/assets/images/close.png");
|
background-image: url("@/assets/images/close.png");
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,149 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 钥匙柜记录 -->
|
<!-- 钥匙柜记录 -->
|
||||||
<div class="el-overlay" style="display:none">
|
<div class="el-overlay">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header">
|
<div class="box-header">
|
||||||
<div class="box-title">取还记录</div>
|
<div class="box-title">取还记录</div>
|
||||||
<div class="box-btn" @click="close"></div>
|
<div class="box-btn" @click="close"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
<el-table :data="recordList" :row-class-name="tableRowClassName" style="width: 100%">
|
<div class="box-date">
|
||||||
<el-table-column prop="userName" label="用户姓名" />
|
<el-date-picker
|
||||||
<el-table-column prop="keyCapturing" label="钥匙编号" align="center"/>
|
v-model="datePicker"
|
||||||
<el-table-column prop="keyState" label="存取状态" align="center"/>
|
type="datetimerange"
|
||||||
<el-table-column prop="accessDate" label="上报时间" align="right" />
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
date-format="YYYY/MM/DD ddd"
|
||||||
|
time-format="A hh:mm:ss"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
:data="recordList"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
<el-table-column label="用户姓名">
|
||||||
|
<template #default="scope">{{
|
||||||
|
scope.row.take_user_name || scope.row.return_user_name
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="approval_user_name" label="审批领导" align="center" />
|
||||||
|
<el-table-column
|
||||||
|
prop="key_name"
|
||||||
|
label="钥匙编号"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column prop="keyState" label="存取状态" align="center">
|
||||||
|
<template #default="scope">{{
|
||||||
|
scope.row.take_time?'取出':'存入'
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="accessDate" label="上报时间" align="right">
|
||||||
|
<template #default="scope">{{
|
||||||
|
scope.row.take_time || scope.row.return_time
|
||||||
|
}}</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import {ref,reactive,onMounted} from 'vue';
|
import { ref, reactive, onMounted } from "vue";
|
||||||
|
import { getTakeKeyword, getReturnKeyword } from "@/api/index";
|
||||||
|
import moment from "moment";
|
||||||
|
const emit = defineEmits(["close"]);
|
||||||
const recordList = ref([
|
const recordList = ref([
|
||||||
{
|
{
|
||||||
userName:'张三',
|
userName: "张三",
|
||||||
keyState:'取走',
|
keyState: "取走",
|
||||||
accessDate:'2024-11-21',
|
accessDate: "2024-11-21",
|
||||||
keyCapturing:'1'
|
keyCapturing: "1",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userName:'李四',
|
userName: "李四",
|
||||||
keyState:'取走',
|
keyState: "取走",
|
||||||
accessDate:'2024-11-21',
|
accessDate: "2024-11-21",
|
||||||
keyCapturing:'2'
|
keyCapturing: "2",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
userName:'王五',
|
userName: "王五",
|
||||||
keyState:'取走',
|
keyState: "取走",
|
||||||
accessDate:'2024-11-21',
|
accessDate: "2024-11-21",
|
||||||
keyCapturing:'3'
|
keyCapturing: "3",
|
||||||
},
|
},
|
||||||
])
|
]);
|
||||||
function tableRowClassName({ row, rowIndex }) {
|
function tableRowClassName({ row, rowIndex }) {
|
||||||
if (rowIndex % 2 === 0) {
|
if (rowIndex % 2 === 0) {
|
||||||
return 'even-row'
|
return "even-row";
|
||||||
} else {
|
} else {
|
||||||
return 'odd-row'
|
return "odd-row";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const datePicker = ref([
|
||||||
|
new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000 * 3,
|
||||||
|
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1,
|
||||||
|
]);
|
||||||
|
function close() {
|
||||||
|
emit("close", false);
|
||||||
|
}
|
||||||
|
const params = ref({
|
||||||
|
page_size: 1000,
|
||||||
|
page_no: 1,
|
||||||
|
id: "112323",
|
||||||
|
});
|
||||||
|
async function getKeywordRecord() {
|
||||||
|
let data = {
|
||||||
|
...params.value,
|
||||||
|
start_time: datePicker[0],
|
||||||
|
end_time: datePicker[1],
|
||||||
|
};
|
||||||
|
const takeList = await getTakeKeyword(data);
|
||||||
|
const takeReturn = await getReturnKeyword(data);
|
||||||
|
let list = [...takeList.data.list, ...takeReturn.data.list];
|
||||||
|
recordList.value = list.sort((a, b) => {
|
||||||
|
return (
|
||||||
|
moment(b.return_time || b.take_time).unix() -
|
||||||
|
moment(a.return_time || a.take_time).unix()
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
getKeywordRecord();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
|
:deep(.el-date-editor.el-input__wrapper) {
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||||
|
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
|
||||||
|
)
|
||||||
|
1 1;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper){
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor .el-range-input){
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
:deep(.el-table){
|
||||||
|
height: 86% !important;
|
||||||
|
}
|
||||||
:deep(.even-row) {
|
:deep(.even-row) {
|
||||||
background-image: url('@/assets/images/tableRow1.png');
|
background-image: url("@/assets/images/tableRow1.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
:deep(.odd-row) {
|
:deep(.odd-row) {
|
||||||
background-image: url('@/assets/images/tableRow2.png');
|
background-image: url("@/assets/images/tableRow2.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
width: vw(720);
|
width: vw(820);
|
||||||
height: vh(520);
|
height: vh(520);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -78,12 +164,15 @@ function tableRowClassName({row,rowIndex}){
|
||||||
&-title {
|
&-title {
|
||||||
line-height: vh(60);
|
line-height: vh(60);
|
||||||
}
|
}
|
||||||
|
&-date {
|
||||||
|
margin: vh(10) 0;
|
||||||
|
}
|
||||||
&-content {
|
&-content {
|
||||||
display: flex;
|
// display: flex;
|
||||||
padding: vh(10) vw(20);
|
padding: vh(10) vw(20);
|
||||||
height: vh(520 - 60);
|
height: vh(520 - 60);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
}
|
}
|
||||||
&-btn {
|
&-btn {
|
||||||
background-image: url("@/assets/images/close.png");
|
background-image: url("@/assets/images/close.png");
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,11 @@ import ElementPlus from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import router from "./router/router.js"
|
import router from "./router/router.js"
|
||||||
import bigScreenFit from '@enhances/bigscreen-fit-vue3';
|
import bigScreenFit from '@enhances/bigscreen-fit-vue3';
|
||||||
|
|
||||||
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||||
const app =createApp(App)
|
const app =createApp(App)
|
||||||
app.use(bigScreenFit, {
|
app.use(bigScreenFit, {
|
||||||
compress: false, // 不压缩
|
compress: false, // 不压缩
|
||||||
}).use(ElementPlus).use(router).mount('#app')
|
}).use(ElementPlus, {
|
||||||
|
locale: zhCn,
|
||||||
|
}).use(router).mount('#app')
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,9 @@
|
||||||
background-image: url("@/assets/images/box/box4.png");
|
background-image: url("@/assets/images/box/box4.png");
|
||||||
}
|
}
|
||||||
.box5{
|
.box5{
|
||||||
|
margin-top: vh(20);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
padding-bottom:vh(16);
|
padding-bottom:vh(16);
|
||||||
background-image: url("@/assets/images/box/box5.png");
|
background-image: url("@/assets/images/box/box5.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -17,7 +17,6 @@ const rules = reactive({
|
||||||
const ruleFormRef = ref();
|
const ruleFormRef = ref();
|
||||||
const passwordCheck = ref(false);
|
const passwordCheck = ref(false);
|
||||||
function submitForm(elForm) {
|
function submitForm(elForm) {
|
||||||
|
|
||||||
if (!elForm) return;
|
if (!elForm) return;
|
||||||
elForm.validate((valid) => {
|
elForm.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
|
@ -33,7 +32,8 @@ function submitForm(elForm) {
|
||||||
message: "登录成功",
|
message: "登录成功",
|
||||||
type: "success",
|
type: "success",
|
||||||
});
|
});
|
||||||
router.push('/home')
|
router.push("/home");
|
||||||
|
sessionStorage.setItem("token",res.data.token);
|
||||||
} else {
|
} else {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: "登录失败",
|
message: "登录失败",
|
||||||
|
|
@ -41,8 +41,6 @@ function submitForm(elForm) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -58,6 +56,13 @@ function checkSavePassword() {
|
||||||
passwordCheck.value = false;
|
passwordCheck.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loginEnter(event){
|
||||||
|
if(event.keyCode===13 || event.keyCode === 100){
|
||||||
|
submitForm(ruleFormRef.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 校验缓存中是否有用户密码
|
// 校验缓存中是否有用户密码
|
||||||
checkSavePassword();
|
checkSavePassword();
|
||||||
|
|
@ -80,6 +85,7 @@ onMounted(() => {
|
||||||
v-model="ruleForm.login_name"
|
v-model="ruleForm.login_name"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="请输入用户名"
|
placeholder="请输入用户名"
|
||||||
|
@keyup="loginEnter"
|
||||||
>
|
>
|
||||||
<!-- <template #prepend>-->
|
<!-- <template #prepend>-->
|
||||||
<!-- <div class="user-icon">-->
|
<!-- <div class="user-icon">-->
|
||||||
|
|
@ -95,6 +101,7 @@ onMounted(() => {
|
||||||
<el-input
|
<el-input
|
||||||
v-model="ruleForm.password"
|
v-model="ruleForm.password"
|
||||||
type="password"
|
type="password"
|
||||||
|
@keyup="loginEnter"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
>
|
>
|
||||||
<!-- <template #prepend>-->
|
<!-- <template #prepend>-->
|
||||||
|
|
@ -119,6 +126,9 @@ onMounted(() => {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-input__inner){
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
//提交按钮
|
//提交按钮
|
||||||
.submit {
|
.submit {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,11 @@ export default defineConfig({
|
||||||
target: 'http://192.168.17.4:8001/',
|
target: 'http://192.168.17.4:8001/',
|
||||||
changeOrigin: true, //是否跨域
|
changeOrigin: true, //是否跨域
|
||||||
rewrite: (path) => path.replace('/aps', '')
|
rewrite: (path) => path.replace('/aps', '')
|
||||||
|
},
|
||||||
|
'/keyword': {
|
||||||
|
target: 'http://192.168.17.8:8090/',
|
||||||
|
changeOrigin: true, //是否跨域
|
||||||
|
rewrite: (path) => path.replace('/keyword', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue