添加事件批量删除按钮与前方的间隔

This commit is contained in:
shijing 2024-02-20 10:02:55 +08:00
parent 65a4795721
commit 06f87adc45
16 changed files with 5881 additions and 91 deletions

BIN
dist.rar Normal file

Binary file not shown.

440
public/demo/cn/demo.html Normal file
View File

@ -0,0 +1,440 @@
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<script>
document.write("<link type='text/css' href='../demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
</script>
</head>
<body style="
width: 100%;
height: 100%;
overflow: hidden;
">
<div class="left">
<div id="divPlugin" class="plugin"></div>
<fieldset class="login">
<legend>登录</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">IP地址</td>
<td><input id="loginip" type="text" class="txt" value="10.14.97.136" /></td>
<!-- <td><input id="loginip" type="text" class="txt" value="10.41.203.83" /></td> -->
<td class="tt">端口号</td>
<td><input id="port" type="text" class="txt" value="80" /></td>
</tr>
<tr>
<td class="tt">用户名</td>
<td><input id="username" type="text" class="txt" value="admin" /></td>
<td class="tt">密码</td>
<td><input id="password" type="password" class="txt" value="1111111q" /></td>
<!-- <td><input id="password" type="password" class="txt" value="abcd1234" /></td> -->
</tr>
<tr>
<td class="tt">设备端口</td>
<td colspan="2"><input id="deviceport" type="text" class="txt" />(可选参数)</td>
<td>
窗口分割数&nbsp;
<select class="sel2" onchange="changeWndNum(this.value);">
<option value="1" selected>1x1</option>
<option value="2">2x2</option>
<option value="3">3x3</option>
<option value="4">4x4</option>
</select>
</td>
</tr>
<tr>
<td class="tt">RTSP端口</td>
<td colspan="3"><input id="rtspport" type="text" class="txt" />(可选参数)</td>
</tr>
<tr>
<td colspan="4">
<input type="button" class="btn" value="登录" onclick="clickLogin();" />
<input type="button" class="btn" value="退出" onclick="clickLogout();" />
<input type="button" class="btn2" value="获取基本信息" onclick="clickGetDeviceInfo();" />
</td>
</tr>
<tr>
<td class="tt">已登录设备</td>
<td>
<select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
</td>
<td class="tt">通道列表</td>
<td>
<select id="channels" class="sel"></select>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn2" value="开始预览" onclick="clickStartRealPlay();" />
</td>
<td>
<input type="button" class="btn2" value="停止预览" onclick="clickStopRealPlay();" />
</td>
<td>
<input type="button" class="btn2" value="设置文本叠加" onclick="setTextOverlay();" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="ipchannel">
<legend>数字通道</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td><input type="button" class="btn" value="获取数字通道列表" onclick="clickGetDigitalChannelInfo();" /></td>
</tr>
<tr>
<td>
<div class="digitaltdiv">
<table id="digitalchannellist" class="digitalchannellist" cellpadding="0" cellspacing="0" border="0"></table>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="localconfig">
<legend>本地配置</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">播放性能</td>
<td>
<select id="netsPreach" name="netsPreach" class="sel">
<option value="0">最短延时</option>
<option value="1">实时性好</option>
<option value="2">均衡</option>
<option value="3">流畅性好</option>
</select>
</td>
<td class="tt">图像尺寸</td>
<td>
<select id="wndSize" name="wndSize" class="sel">
<option value="0">充满</option>
<option value="1">4:3</option>
<option value="2">16:9</option>
</select>
</td>
</tr>
<tr>
<td class="tt">规则信息</td>
<td>
<select id="rulesInfo" name="rulesInfo" class="sel">
<option value="1">启用</option>
<option value="0">禁用</option>
</select>
</td>
<td class="tt">抓图文件格式</td>
<td>
<select id="captureFileFormat" name="captureFileFormat" class="sel">
<option value="0">JPEG</option>
<option value="1">BMP</option>
</select>
</td>
</tr>
<tr>
<td class="tt">录像文件打包大小</td>
<td>
<select id="packSize" name="packSize" class="sel">
<option value="0">256M</option>
<option value="1">512M</option>
<option value="2">1G</option>
</select>
</td>
<td class="tt">协议类型</td>
<td>
<select id="protocolType" name="protocolType" class="sel">
<option value="0">TCP</option>
<option value="2">UDP</option>
</select>
</td>
</tr>
<tr>
<td class="tt">码流秘钥</td>
<td colspan="3">
<input id="secretKey" type="password" class="txt"/>
</td>
</tr>
<tr>
<td class="tt">录像文件保存路径</td>
<td colspan="3"><input id="recordPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('recordPath', 0);" /></td>
</tr>
<tr>
<td class="tt">回放下载保存路径</td>
<td colspan="3"><input id="downloadPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('downloadPath', 0);" /></td>
</tr>
<tr>
<td class="tt">预览抓图保存路径</td>
<td colspan="3"><input id="previewPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('previewPicPath', 0);" /></td>
</tr>
<tr>
<td class="tt">回放抓图保存路径</td>
<td colspan="3"><input id="playbackPicPath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('playbackPicPath', 0);" /></td>
</tr>
<tr>
<td class="tt">回放剪辑保存路径</td>
<td colspan="3"><input id="playbackFilePath" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('playbackFilePath', 0);" /></td>
</tr>
<tr>
<td colspan="4"><input type="button" class="btn" value="获取" onclick="clickGetLocalCfg();" />&nbsp;<input type="button" class="btn" value="设置" onclick="clickSetLocalCfg();" />&nbsp;&nbsp;修改参数后,需要刷新界面后生效。</td>
</tr>
</table>
</fieldset>
</div>
<div class="left">
<fieldset class="preview">
<legend>预览</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">码流类型</td>
<td>
<select id="streamtype" class="sel">
<option value="1">主码流</option>
<option value="2">子码流</option>
<option value="3">第三码流</option>
<option value="4">转码码流</option>
</select>
</td>
</tr>
<tr>
<td class="tt">音量</td>
<td>
<input type="text" id="volume" class="txt" value="50" maxlength="3" />&nbsp;<input type="button" class="btn" value="设置" onclick="clickSetVolume();" />范围0~100
</td>
<td>
<input type="button" class="btn" value="打开声音" onclick="clickOpenSound();" />
<input type="button" class="btn" value="关闭声音" onclick="clickCloseSound();" />
</td>
</tr>
<tr>
<td class="tt">对讲通道</td>
<td>
<select id="audiochannels" class="sel">
</select>
<input type="button" class="btn" value="获取通道" onclick="clickGetAudioInfo();" />
</td>
<td>
<input type="button" class="btn" value="开始对讲" onclick="clickStartVoiceTalk();" />
<input type="button" class="btn" value="停止对讲" onclick="clickStopVoiceTalk();" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="btn" value="抓图" onclick="clickCapturePic('preview');" />
<input type="button" class="btn" value="抓图上传" onclick="clickCapturePicData();" />
<input type="button" class="btn" value="开始录像" onclick="clickStartRecord('realplay');" />
<input type="button" class="btn" value="停止录像" onclick="clickStopRecord('realplay');" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="btn2" value="启用电子放大" onclick="clickEnableEZoom();" />
<input type="button" class="btn2" value="禁用电子放大" onclick="clickDisableEZoom();" />
<input type="button" class="btn2" value="启用3D放大" onclick="clickEnable3DZoom();" />
<input type="button" class="btn2" value="禁用3D放大" onclick="clickDisable3DZoom();" />
<input id="fullbtn" type="button" class="btn" value="全屏" onclick="clickFullScreen();" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="draw">
<legend>绘图</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td>
<input type="button" class="btn" value="启用绘制" onclick="clickEnableDraw();" />
<input type="button" class="btn" value="禁用绘制" onclick="clickDisableDraw();" />
</td>
</tr>
<tr>
<td>
图形ID<input id="snapId" type="text" class="txt" />
名称:<input id="snapName" type="text" class="txt" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="添加图形" onclick="clickAddSnapPolygon()" />
<input type="button" class="btn" value="删除图形" onclick="clickDelSnapPolygon()" />
<input type="button" class="btn" value="获取图形" onclick="clickGetSnapPolygon()" />
<input type="button" class="btn" value="设置图形" onclick="clickSetSnapPolygon()" />
<input type="button" class="btn" value="清空图形" onclick="clickDelAllSnapPolygon()" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="ptz">
<legend>云台控制</legend>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td>
<input type="button" class="btn" value="左上" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="上" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="右上" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="左" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);" />
<input type="button" class="btn" value="右" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="左下" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="右下" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td class="tt">云台速度</td>
<td>
<select id="ptzspeed" class="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>
<tr>
<td class="tt">预置点号</td>
<td><input id="preset" type="text" class="txt" value="1" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn" value="设置" onclick="clickSetPreset();" />
<input type="button" class="btn" value="调用" onclick="clickGoPreset();" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()"></td>
<td><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()"></td>
</tr>
<tr>
<td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn()" onmouseup="PTZFoucusStop()"></td>
<td><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()"></td>
</tr>
<tr>
<td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="PTZIrisIn()" onmouseup="PTZIrisStop()"></td>
<td><input type="button" class="btn2" value="光圈-" onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()"></td>
</tr>
</table>
</fieldset>
<fieldset class="playback">
<legend>回放</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">码流类型</td>
<td>
<select id="record_streamtype" class="sel">
<option value="1">主码流</option>
<option value="2">子码流</option>
</select>
</td>
</tr>
<tr>
<td class="tt">开始时间</td>
<td>
<input id="starttime" type="text" class="txt" value="2013-12-10 00:00:00" />时间格式2013-11-11 12:34:56
</td>
</tr>
<tr>
<td class="tt">结束时间</td>
<td>
<input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59" />
<input type="button" class="btn" value="搜索" onclick="clickRecordSearch(0);" />
<input type="button" class="btn" value="停止下载" onclick="clickStopDownload();" />
</td>
</tr>
<tr>
<td class="tt">按时间下载开始时间</td>
<td>
<input id="downloadstarttime" type="text" class="txt" value="2013-12-10 00:00:00" />时间格式2013-11-11 12:34:56
</td>
</tr>
<tr>
<td class="tt">按时间下载结束时间</td>
<td>
<input id="downloadendtime" type="text" class="txt" value="2013-12-11 23:59:59" />
<input type="button" class="btn" value="下载" onclick="clickStartDownloadRecordByTime();" />(相机不支持)
</td>
</tr>
<tr>
<td colspan="2">
<div id="searchdiv" class="searchdiv">
<table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn2" value="开始回放" onclick="clickStartPlayback();" />
<input type="button" class="btn2" value="停止回放" onclick="clickStopPlayback();" />
<input id="btnReverse" type="button" class="btn" value="倒放" onclick="clickReversePlayback();" />
<input type="button" class="btn" value="单帧" onclick="clickFrame();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn" value="暂停" onclick="clickPause();" />
<input type="button" class="btn" value="恢复" onclick="clickResume();" />
<input type="button" class="btn" value="慢放" onclick="clickPlaySlow();" />
<input type="button" class="btn" value="快放" onclick="clickPlayFast();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn" value="抓图" onclick="clickCapturePic('playback');" />
<input type="button" class="btn2" value="开始剪辑" onclick="clickStartRecord('playback');" />
<input type="button" class="btn2" value="停止剪辑" onclick="clickStopRecord('playback');" />
<input type="button" class="btn2" value="OSD时间" onclick="clickGetOSDTime();" />&nbsp;<input id="osdtime" type="text" class="txt" readonly />
</td>
</tr>
</table>
</fieldset>
<fieldset class="maintain">
<legend>系统维护</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td>
<input type="button" id="checkVersion" class="btn2" value="检查插件版本" onclick="clickCheckPluginVersion();" />
<input type="button" class="btn2" value="恢复默认参数" onclick="clickRestoreDefault();" />
</td>
</tr>
<tr>
<td>
<input id="upgradeFile" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="浏览" onclick="clickOpenFileDlg('upgradeFile', 1);" />&nbsp;<input type="button" class="btn2" value="升级" onclick="clickStartUpgrade();" />
</td>
</tr>
</table>
</fieldset>
</div>
<div class="left">
<fieldset class="operate">
<legend>操作信息</legend>
<div id="opinfo" class="opinfo"></div>
</fieldset>
<fieldset class="callback">
<legend>事件回调信息</legend>
<div id="cbinfo" class="cbinfo"></div>
</fieldset>
</div>
</body>
<script src="../jquery-1.7.1.min.js"></script>
<script id="videonode" src="../codebase/webVideoCtrl.js"></script>
<script src="demo.js"></script>
</html>

1969
public/demo/cn/demo.js Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

405
public/demo/demo.css Normal file
View File

@ -0,0 +1,405 @@
@charset "utf-8";
*
{
margin:0;
padding:0;
}
html
{
width:100%;
height:100%;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
background:#FFFFFF;
}
body
{
padding:5px;
}
select
{
height:20px;
line-height:20px;
}
.left
{
float:left;
}
.freeze
{
position:absolute;
text-align:center;
background:#343434;
color:#FFFFFF;
font-size:26px;
font-weight:bold;
filter:alpha(opacity=60);
opacity:0.6;
}
.vtop
{
vertical-align:middle;
margin-top:-1px;
}
/*插件*/
.plugin
{
/* width:100%;
height:100%; */
width:500px;
height:300px;
}
fieldset
{
display:block;
}
/*本地配置*/
.localconfig
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.localconfig .tt
{
width:125px;
}
.localconfig .txt
{
width:310px;
}
.localconfig .txt2
{
width:300px;
}
.localconfig .btn
{
width:45px;
height:22px;
line-height:18px;
}
.localconfig .sel
{
width:120px;
}
/*登录*/
.login
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.login .tt
{
width:100px;
}
.login .txt
{
width:130px;
}
.login .btn
{
width:45px;
height:22px;
line-height:18px;
}
.login .btn2
{
width:100px;
height:22px;
line-height:18px;
}
.login .sel
{
width:130px;
}
.login .sel2
{
width:65px;
}
/*数字通道*/
.ipchannel
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.ipchannel .btn
{
width:130px;
height:22px;
line-height:18px;
}
.ipchannel .digitaltdiv
{
height:100px;
overflow:hidden;
overflow-y:auto;
border:1px solid #7F9DB9;
font-size:11px;
}
.ipchannel .digitalchannellist th, .ipchannel .digitalchannellist td
{
padding:2px;
border:1px solid #7F9DB9;
border-collapse:collapse;
white-space:nowrap;
}
/*预览*/
.preview
{
width:450px;
padding:10px;
padding-top:0;
margin-left:10px;
border:1px solid #7F9DB9;
}
.preview .tt
{
width:60px;
}
.preview .txt
{
width:30px;
}
.preview .btn
{
width:70px;
height:22px;
line-height:18px;
}
.preview .btn2
{
width:90px;
height:22px;
line-height:18px;
}
.preview .sel
{
width:105px;
}
/*云台*/
.ptz
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.ptz .tt
{
width:60px;
}
.ptz .txt
{
width:60px;
}
.ptz .btn
{
width:45px;
height:22px;
line-height:18px;
}
.ptz .btn2
{
width:60px;
height:22px;
line-height:18px;
}
.ptz .sel
{
width:65px;
}
/*视频参数*/
.videoparam
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.videoparam .tt
{
width:60px;
}
.videoparam .txt
{
width:60px;
}
.videoparam .btn
{
width:45px;
height:22px;
line-height:18px;
}
.videoparam .sel
{
width:65px;
}
/*回放*/
.playback
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.playback .tt
{
width:60px;
}
.playback .txt
{
width:140px;
}
.playback .btn
{
min-width:45px;
height:22px;
line-height:18px;
}
.playback .btn2
{
width:70px;
height:22px;
line-height:18px;
}
.playback .sel
{
width:142px;
}
.playback .searchdiv
{
height:100px;
overflow:hidden;
overflow-y:auto;
border:1px solid #7F9DB9;
font-size:11px;
}
.playback .searchlist th, .playback .searchlist td
{
padding:2px;
border:1px solid #7F9DB9;
border-collapse:collapse;
white-space:nowrap;
}
/*系统维护*/
.maintain
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.maintain .tt
{
width:60px;
}
.maintain .txt
{
width:280px;
}
.maintain .btn
{
width:45px;
height:22px;
line-height:18px;
}
.maintain .btn2
{
width:100px;
height:22px;
line-height:18px;
}
.maintain .sel
{
width:65px;
}
/*操作信息*/
.operate
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.operate .opinfo
{
height:150px;
border:1px solid #7F9DB9;
overflow:auto;
}
/*事件回调*/
.callback
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.callback .cbinfo
{
height:114px;
border:1px solid #7F9DB9;
overflow:auto;
}
/*IP解析*/
.ipparse
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.ipparse .tt
{
width:85px;
}
.ipparse .txt
{
width:130px;
}
.ipparse .btn
{
width:90px;
height:22px;
line-height:18px;
}
.ipparse .sel
{
width:130px;
}
/*绘图*/
.draw
{
width:450px;
padding:10px;
padding-top:0;
margin-left:10px;
border:1px solid #7F9DB9;
}
.draw .tt
{
width:60px;
}
.draw .txt
{
width:140px;
}
.draw .btn
{
width:70px;
height:22px;
line-height:18px;
}
.draw .btn2
{
width:100px;
height:22px;
line-height:18px;
}
.draw .sel
{
width:105px;
}

405
public/demo/demo_en.css Normal file
View File

@ -0,0 +1,405 @@
@charset "utf-8";
*
{
margin:0;
padding:0;
}
html
{
width:100%;
height:100%;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
-webkit-text-size-adjust:none;
background:#FFFFFF;
}
body
{
padding:5px;
}
select
{
height:20px;
line-height:20px;
}
.left
{
float:left;
}
.freeze
{
position:absolute;
text-align:center;
background:#343434;
color:#FFFFFF;
font-size:26px;
font-weight:bold;
filter:alpha(opacity=60);
opacity:0.6;
}
.vtop
{
vertical-align:middle;
margin-top:-1px;
}
/*插件*/
.plugin
{
/* width:100%;
height:100%; */
width:500px;
height:300px;
}
fieldset
{
display:block;
}
/*本地配置*/
.localconfig
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.localconfig .tt
{
width:125px;
}
.localconfig .txt
{
width:310px;
}
.localconfig .txt2
{
width:285px;
}
.localconfig .btn
{
width:60px;
height:22px;
line-height:18px;
}
.localconfig .sel
{
width:120px;
}
/*登录*/
.login
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.login .tt
{
width:100px;
}
.login .txt
{
width:130px;
}
.login .btn
{
width:45px;
height:22px;
line-height:18px;
}
.login .btn2
{
width:100px;
height:22px;
line-height:18px;
}
.login .sel
{
width:130px;
}
.login .sel2
{
width:65px;
}
/*数字通道*/
.ipchannel
{
width:480px;
padding:10px;
border:1px solid #7F9DB9;
}
.ipchannel .btn
{
width:130px;
height:22px;
line-height:18px;
}
.ipchannel .digitaltdiv
{
height:100px;
overflow:hidden;
overflow-y:auto;
border:1px solid #7F9DB9;
font-size:11px;
}
.ipchannel .digitalchannellist th, .ipchannel .digitalchannellist td
{
padding:2px;
border:1px solid #7F9DB9;
border-collapse:collapse;
white-space:nowrap;
}
/*预览*/
.preview
{
width:450px;
padding:10px;
padding-top:0;
margin-left:10px;
border:1px solid #7F9DB9;
}
.preview .tt
{
width:60px;
}
.preview .txt
{
width:30px;
}
.preview .btn
{
width:70px;
height:22px;
line-height:18px;
}
.preview .btn2
{
width:108px;
height:22px;
line-height:18px;
}
.preview .sel
{
width:105px;
}
/*云台*/
.ptz
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.ptz .tt
{
width:60px;
}
.ptz .txt
{
width:60px;
}
.ptz .btn
{
width:86px;
height:22px;
line-height:18px;
}
.ptz .btn2
{
width:60px;
height:22px;
line-height:18px;
}
.ptz .sel
{
width:65px;
}
/*视频参数*/
.videoparam
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.videoparam .tt
{
width:60px;
}
.videoparam .txt
{
width:60px;
}
.videoparam .btn
{
width:45px;
height:22px;
line-height:18px;
}
.videoparam .sel
{
width:65px;
}
/*回放*/
.playback
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.playback .tt
{
width:60px;
}
.playback .txt
{
width:140px;
}
.playback .btn
{
min-width:45px;
height:22px;
line-height:18px;
}
.playback .btn2
{
width:70px;
height:22px;
line-height:18px;
}
.playback .sel
{
width:142px;
}
.playback .searchdiv
{
height:100px;
overflow:hidden;
overflow-y:auto;
border:1px solid #7F9DB9;
font-size:11px;
}
.playback .searchlist th, .playback .searchlist td
{
padding:2px;
border:1px solid #7F9DB9;
border-collapse:collapse;
white-space:nowrap;
}
/*系统维护*/
.maintain
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.maintain .tt
{
width:60px;
}
.maintain .txt
{
width:280px;
}
.maintain .btn
{
width:60px;
height:22px;
line-height:18px;
}
.maintain .btn2
{
width:200px;
height:22px;
line-height:18px;
}
.maintain .sel
{
width:65px;
}
/*操作信息*/
.operate
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.operate .opinfo
{
height:150px;
border:1px solid #7F9DB9;
overflow:auto;
}
/*事件回调*/
.callback
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.callback .cbinfo
{
height:114px;
border:1px solid #7F9DB9;
overflow:auto;
}
/*IP解析*/
.ipparse
{
width:450px;
padding:10px;
margin-left:10px;
border:1px solid #7F9DB9;
}
.ipparse .tt
{
width:85px;
}
.ipparse .txt
{
width:130px;
}
.ipparse .btn
{
width:90px;
height:22px;
line-height:18px;
}
.ipparse .sel
{
width:130px;
}
/*绘图*/
.draw
{
width:450px;
padding:10px;
padding-top:0;
margin-left:10px;
border:1px solid #7F9DB9;
}
.draw .tt
{
width:60px;
}
.draw .txt
{
width:140px;
}
.draw .btn
{
width:70px;
height:22px;
line-height:18px;
}
.draw .btn2
{
width:108px;
height:22px;
line-height:18px;
}
.draw .sel
{
width:105px;
}

442
public/demo/en/demo.html Normal file
View File

@ -0,0 +1,442 @@
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
<script>
document.write("<link type='text/css' href='../demo_en.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
</script>
</head>
<body style="
width: 100%;
height: 100%;
overflow: hidden;
">
<div class="left">
<div id="divPlugin" class="plugin"></div>
<fieldset class="login">
<legend>Login</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">IP address</td>
<td><input id="loginip" type="text" class="txt" value="10.18.37.111" /></td>
<td class="tt">Port</td>
<td><input id="port" type="text" class="txt" value="80" /></td>
</tr>
<tr>
<td class="tt">User name</td>
<td><input id="username" type="text" class="txt" value="admin" /></td>
<td class="tt">Password</td>
<td><input id="password" type="password" class="txt" value="hik12345" /></td>
</tr>
<tr>
<td class="tt">Device port</td>
<td colspan="2"><input id="deviceport" type="text" class="txt" />optional</td>
<td>
Split screen&nbsp;
<select class="sel2" onchange="changeWndNum(this.value);">
<option value="1" selected>1x1</option>
<option value="2">2x2</option>
<option value="3">3x3</option>
<option value="4">4x4</option>
</select>
</td>
</tr>
<tr>
<td class="tt">RTSP port</td>
<td colspan="3"><input id="rtspport" type="text" class="txt" />optional</td>
</tr>
<tr>
<td colspan="4">
<input type="button" class="btn" value="Login" onclick="clickLogin();" />
<input type="button" class="btn" value="Logout" onclick="clickLogout();" />
<input type="button" class="btn2" value="Get basic info" onclick="clickGetDeviceInfo();" />
</td>
</tr>
<tr>
<td class="tt">Logined devices</td>
<td>
<select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
</td>
<td class="tt">Channel list</td>
<td>
<select id="channels" class="sel"></select>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn2" value="Start preview" onclick="clickStartRealPlay();" />
</td>
<td>
<input type="button" class="btn2" value="Stop preview" onclick="clickStopRealPlay();" />
</td>
<td>
<input type="button" class="btn2" value="set osd" onclick="setTextOverlay();" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="ipchannel">
<legend>Digital channel</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td><input type="button" class="btn" value="Get digital channel list" onclick="clickGetDigitalChannelInfo();" /></td>
</tr>
<tr>
<td>
<div class="digitaltdiv">
<table id="digitalchannellist" class="digitalchannellist" cellpadding="0" cellspacing="0" border="0"></table>
</div>
</td>
</tr>
</table>
</fieldset>
<fieldset class="localconfig">
<legend>Local configuration</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">Play performance</td>
<td>
<select id="netsPreach" name="netsPreach" class="sel">
<option value="0">Shortest delay</option>
<option value="1">Real-time</option>
<option value="2">Balance</option>
<option value="3">Smooth</option>
</select>
</td>
<td class="tt">Image size</td>
<td>
<select id="wndSize" name="wndSize" class="sel">
<option value="0">Full</option>
<option value="1">4:3</option>
<option value="2">16:9</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Rules</td>
<td>
<select id="rulesInfo" name="rulesInfo" class="sel">
<option value="1">Enable</option>
<option value="0">Disable</option>
</select>
</td>
<td class="tt">Snapshot format</td>
<td>
<select id="captureFileFormat" name="captureFileFormat" class="sel">
<option value="0">JPEG</option>
<option value="1">BMP</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Package size</td>
<td>
<select id="packSize" name="packSize" class="sel">
<option value="0">256M</option>
<option value="1">512M</option>
<option value="2">1G</option>
</select>
</td>
<td class="tt">Protocol</td>
<td>
<select id="protocolType" name="protocolType" class="sel">
<option value="0">TCP</option>
<option value="2">UDP</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Save record files to</td>
<td colspan="3"><input id="recordPath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('recordPath', 0);" /></td>
</tr>
<tr>
<td class="tt">Save downloaded files to</td>
<td colspan="3"><input id="downloadPath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('downloadPath', 0);" /></td>
</tr>
<tr>
<td class="tt">Save snapshots in live view to</td>
<td colspan="3"><input id="previewPicPath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('previewPicPath', 0);" /></td>
</tr>
<tr>
<td class="tt">Save snapshots when playback to</td>
<td colspan="3"><input id="playbackPicPath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('playbackPicPath', 0);" /></td>
</tr>
<tr>
<td class="tt">Save clips to</td>
<td colspan="3"><input id="playbackFilePath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('playbackFilePath', 0);" /></td>
</tr>
<tr>
<td class="tt">Save device snapshots to</td>
<td colspan="3"><input id="devicePicPath" type="text" class="txt2" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('devicePicPath', 0);" /></td>
</tr>
<tr>
<td colspan="4"><input type="button" class="btn" value="Get" onclick="clickGetLocalCfg();" />&nbsp;<input type="button" class="btn" value="Set" onclick="clickSetLocalCfg();" /></td>
</tr>
</table>
</fieldset>
</div>
<div class="left">
<fieldset class="preview">
<legend>Browse</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">Stream type</td>
<td>
<select id="streamtype" class="sel">
<option value="1">Main stream</option>
<option value="2">Sub stream</option>
<option value="3">Third stream</option>
<option value="4">Transcode stream</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Volume</td>
<td>
<input type="text" id="volume" class="txt" value="50" maxlength="3" />&nbsp;<input type="button" class="btn" value="Set" onclick="clickSetVolume();" />(Range0~100)
</td>
<td>
<input type="button" class="btn" value="Audio On" onclick="clickOpenSound();" />
<input type="button" class="btn" value="Audio Off" onclick="clickCloseSound();" />
</td>
</tr>
<tr>
<td class="tt">Voice channel</td>
<td>
<select id="audiochannels" class="sel">
</select>
<input type="button" class="btn" value="Get channel" onclick="clickGetAudioInfo();" />
</td>
<td>
<input type="button" class="btn" value="Voice Talk" onclick="clickStartVoiceTalk();" />
<input type="button" class="btn" value="Stop Voice Talk" onclick="clickStopVoiceTalk();" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="btn2" value="Capture" onclick="clickCapturePic();" />
<input type="button" class="btn2" value="Capture onload" onclick="clickCapturePicData();" />
<input type="button" class="btn2" value="Start recording" onclick="clickStartRecord('realplay');" />
<input type="button" class="btn2" value="Stop recording" onclick="clickStopRecord('realplay');" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="btn2" value="Enable Ezoom" onclick="clickEnableEZoom();" />
<input type="button" class="btn2" value="Disable Ezoom" onclick="clickDisableEZoom();" />
<input type="button" class="btn2" value="Enable 3D zoom" onclick="clickEnable3DZoom();" />
<input type="button" class="btn2" value="Disable 3D zoom" onclick="clickDisable3DZoom();" />
<input type="button" class="btn2" value="Full screen" onclick="clickFullScreen();" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="draw">
<legend>drawing</legend>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
<td>
<input type="button" class="btn2" value="Enable drawing" onclick="clickEnableDraw();" />
<input type="button" class="btn2" value="Disable drawing" onclick="clickDisableDraw();" />
</td>
</tr>
<tr>
<td>
Graph ID<input id="snapId" type="text" class="txt" />
Name<input id="snapName" type="text" class="txt" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn2" value="Add the graph" onclick="clickAddSnapPolygon()" />
<input type="button" class="btn2" value="Delete the graph" onclick="clickDelSnapPolygon()" />
<input type="button" class="btn2" value="Get the graph" onclick="clickGetSnapPolygon()" />
<input type="button" class="btn2" value="Set the graph" onclick="clickSetSnapPolygon()" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn2" value="Clear the graph" onclick="clickDelAllSnapPolygon()" />
</td>
</tr>
</table>
</fieldset>
<fieldset class="ptz">
<legend>PTZ control</legend>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td>
<input type="button" class="btn" value="Up-left" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="Up" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="Up-right" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="Left" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="Auto" onclick="mouseDownPTZControl(9);" />
<input type="button" class="btn" value="Right" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" value="Down-left" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="Down" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();" />
<input type="button" class="btn" value="Down-right" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td class="tt">PTZ speed</td>
<td>
<select id="ptzspeed" class="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Preset</td>
<td><input id="preset" type="text" class="txt" value="1" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn" value="Set" onclick="clickSetPreset();" />
<input type="button" class="btn" value="Call" onclick="clickGoPreset();" />
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="3" border="0" class="left">
<tr>
<td class="tt"><input type="button" class="btn2" value="Zoom+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()"></td>
<td><input type="button" class="btn2" value="Zoom-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()"></td>
</tr>
<tr>
<td class="tt"><input type="button" class="btn2" value="Focus+" onmousedown="PTZFocusIn()" onmouseup="PTZFoucusStop()"></td>
<td><input type="button" class="btn2" value="Focus-" onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()"></td>
</tr>
<tr>
<td class="tt"><input type="button" class="btn2" value="Iris+" onmousedown="PTZIrisIn()" onmouseup="PTZIrisStop()"></td>
<td><input type="button" class="btn2" value="Iris-" onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()"></td>
</tr>
</table>
</fieldset>
<fieldset class="playback">
<legend>Playback</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td class="tt">Stream type</td>
<td>
<select id="record_streamtype" class="sel">
<option value="1">Main stream</option>
<option value="2">Sub stream</option>
</select>
</td>
</tr>
<tr>
<td class="tt">Start time</td>
<td>
<input id="starttime" type="text" class="txt" value="2013-12-10 00:00:00" />(Time format:2013-11-11 12:34:56)
</td>
</tr>
<tr>
<td class="tt">End time</td>
<td>
<input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59" />
<input type="button" class="btn" value="Search" onclick="clickRecordSearch(0);" />
</td>
</tr>
<tr>
<td class="tt"> downloadBytime starttime</td>
<td>
<input id="downloadstarttime" type="text" class="txt" value="2013-12-10 00:00:00" />Time format2013-11-11 12:34:56
</td>
</tr>
<tr>
<td class="tt">downloadBytime endtime</td>
<td>
<input id="downloadendtime" type="text" class="txt" value="2013-12-11 23:59:59" />
<input type="button" class="btn" value="download" onclick="clickStartDownloadRecordByTime();" />
</td>
</tr>
<tr>
<tr>
<td colspan="2">
<div id="searchdiv" class="searchdiv">
<table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn2" value="Start play" onclick="clickStartPlayback();" />
<input type="button" class="btn2" value="Stop play" onclick="clickStopPlayback();" />
<input id="btnReverse" type="button" class="btn" value="Reverse play" onclick="clickReversePlayback();" />
<input type="button" class="btn" value="Single frame" onclick="clickFrame();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn" value="Pause" onclick="clickPause();" />
<input type="button" class="btn" value="Resume" onclick="clickResume();" />
<input type="button" class="btn" value="Slow forward" onclick="clickPlaySlow();" />
<input type="button" class="btn" value="Fast forward" onclick="clickPlayFast();" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btn2" value="Capture" onclick="clickCapturePic();" />
<input type="button" class="btn2" value="Start clip" onclick="clickStartRecord('playback');" />
<input type="button" class="btn2" value="Stop clip" onclick="clickStopRecord('playback');" />
<input type="button" class="btn2" value="OSD time" onclick="clickGetOSDTime();" />&nbsp;<input id="osdtime" type="text" class="txt" readonly />
</td>
</tr>
</table>
</fieldset>
<fieldset class="maintain">
<legend>System maintenance</legend>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td>
<input type="button" class="btn2" id="remoteconfig" title="Detect plugin version" value="Detect plugin version" onclick="clickCheckPluginVersion();" />
<input type="button" class="btn2" title="Restore the default parameters" value="Restore the default parameters" onclick="clickRestoreDefault();" />
</td>
</tr>
<tr>
<td>
<input id="upgradeFile" type="text" class="txt" />&nbsp;<input type="button" class="btn" value="Browse" onclick="clickOpenFileDlg('upgradeFile', 1);" />&nbsp;<input type="button" class="btn" value="Upgrade" onclick="clickStartUpgrade();" />
</td>
</tr>
</table>
</fieldset>
</div>
<div class="left">
<fieldset class="operate">
<legend>Operation information</legend>
<div id="opinfo" class="opinfo"></div>
</fieldset>
<fieldset class="callback">
<legend>Event callback information</legend>
<div id="cbinfo" class="cbinfo"></div>
</fieldset>
</div>
</body>
<script src="../jquery-1.7.1.min.js"></script>
<script src="../codebase/encryption/AES.js"></script>
<script src="../codebase/encryption/cryptico.min.js"></script>
<!-- <script src="../codebase/encryption/encryption.js"></script> -->
<script src="../codebase/encryption/crypto-3.1.2.min.js"></script>
<script id="videonode" src="../codebase/webVideoCtrl.js"></script>
<script src="demo.js"></script>
</html>

1844
public/demo/en/demo.js Normal file

File diff suppressed because it is too large Load Diff

21
public/demo/index.html Normal file
View File

@ -0,0 +1,21 @@
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
</body>
<script>
var szLanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
szLanguage = szLanguage.substring(0, 2);
if ("zh" === szLanguage) {
window.location.href = "cn/demo.html";
} else {
window.location.href = "en/demo.html";
}
</script>
</html>

4
public/demo/jquery-1.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,108 +1,179 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8"> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%= VUE_APP_TITLE %></title> <meta http-equiv="Pragma" content="no-cache" />
<!-- <script src="./jsmap/jsmap.js"> </script> --> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<!-- <link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/> --> <meta http-equiv="Expires" content="0" />
<script type="text/javascript"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>"); <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</script> <title>
<script type="text/javascript" src="./xlsx.full.min.js"></script> <%= VUE_APP_TITLE %>
</head> </title>
<body> <!-- <script src="./jsmap/jsmap.js"> </script> -->
<noscript> <!-- <link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/> -->
<strong>We're sorry but <%= VUE_APP_TITLE %> doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<script type="text/javascript">
var dark = window.localStorage.getItem('APP_DARK');
if(dark){
document.documentElement.classList.add("dark")
}
let urls = window.location.host;
window.IPConfig = {
//此处的IP在打包不会被编译可修改
baseURL: 'http://' + urls+'/api'
}
</script>
<div id="app" class="aminui">
<div class="app-loading">
<div class="app-loading__logo">
<!-- 曲阳 -->
<!-- <img src="img/bbmg_jy.jpg"/> -->
<!-- 托克逊 -->
<!-- <img src="img/bbmg.jpg"/> -->
<!-- 光子 -->
<img src="img/gz_logo.png"/>
</div>
<div class="app-loading__loader"></div>
<div class="app-loading__title"><%= VUE_APP_TITLE %></div>
</div>
<style>
.app-loading {position: absolute;top:0px;left:0px;right:0px;bottom:0px;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;}
.app-loading__logo {margin-bottom: 30px;}
.app-loading__logo img {width: 90px;vertical-align: bottom;}
.app-loading__loader {box-sizing: border-box;width: 35px;height: 35px;border: 5px solid transparent;border-top-color: #000;border-radius: 50%;animation: .5s loader linear infinite;position: relative;}
.app-loading__loader:before {box-sizing: border-box;content: '';display: block;width: inherit;height: inherit;position: absolute;top: -5px;left: -5px;border: 5px solid #ccc;border-radius: 50%;opacity: .5;}
.app-loading__title {font-size: 24px;color: #333;margin-top: 30px;}
.dark .app-loading {background: #222225;}
.dark .app-loading__loader {border-top-color: #fff;}
.dark .app-loading__title {color: #d0d0d0;}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</div>
<!-- built files will be auto injected -->
</body>
<div id="versionCheck" style="display: none;position: absolute;z-index: 99;top:0;left:0;right:0;bottom:0;padding:40px;background:rgba(255,255,255,0.9);color: #333;">
<h2 style="line-height: 1;margin: 0;font-size: 24px;">当前使用的浏览器内核版本过低 :(</h2>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 20px;opacity: 0.8;">当前版本:<span id="versionCheck-type">--</span> <span id="versionCheck-version">--</span></p>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">最低版本要求Chrome 71+、Firefox 65+、Safari 12+、Edge 97+。</p>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">请升级浏览器版本,或更换现代浏览器,如果你使用的是双核浏览器,请切换到极速/高速模式。</p>
</div>
<script type="text/javascript"> <script type="text/javascript">
function getBrowerInfo(){ document.write("<script src='config.js?" + new Date().getTime() + "'><\/script>");
</script>
<script type="text/javascript" src="./xlsx.full.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= VUE_APP_TITLE %> doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<script type="text/javascript">
var dark = window.localStorage.getItem('APP_DARK');
if (dark) {
document.documentElement.classList.add("dark")
}
let urls = window.location.host;
window.IPConfig = {
//此处的IP在打包不会被编译可修改
baseURL: 'http://' + urls + '/api'
}
</script>
<div id="app" class="aminui">
<div class="app-loading">
<div class="app-loading__logo">
<!-- 曲阳 -->
<img src="img/bbmg_jy.jpg" />
<!-- 托克逊 -->
<!-- <img src="img/bbmg.jpg"/> -->
<!-- 光子 -->
<!-- <img src="img/gz_logo.png" /> -->
</div>
<div class="app-loading__loader"></div>
<div class="app-loading__title">
<%= VUE_APP_TITLE %>
</div>
</div>
<style>
.app-loading {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #fff;
}
.app-loading__logo {
margin-bottom: 30px;
}
.app-loading__logo img {
width: 90px;
vertical-align: bottom;
}
.app-loading__loader {
box-sizing: border-box;
width: 35px;
height: 35px;
border: 5px solid transparent;
border-top-color: #000;
border-radius: 50%;
animation: .5s loader linear infinite;
position: relative;
}
.app-loading__loader:before {
box-sizing: border-box;
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -5px;
left: -5px;
border: 5px solid #ccc;
border-radius: 50%;
opacity: .5;
}
.app-loading__title {
font-size: 24px;
color: #333;
margin-top: 30px;
}
.dark .app-loading {
background: #222225;
}
.dark .app-loading__loader {
border-top-color: #fff;
}
.dark .app-loading__title {
color: #d0d0d0;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</div>
<!-- built files will be auto injected -->
</body>
<div id="versionCheck"
style="display: none;position: absolute;z-index: 99;top:0;left:0;right:0;bottom:0;padding:40px;background:rgba(255,255,255,0.9);color: #333;">
<h2 style="line-height: 1;margin: 0;font-size: 24px;">当前使用的浏览器内核版本过低 :(</h2>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 20px;opacity: 0.8;">当前版本:<span
id="versionCheck-type">--</span> <span id="versionCheck-version">--</span></p>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">最低版本要求Chrome 71+、Firefox
65+、Safari 12+、Edge 97+。</p>
<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">
请升级浏览器版本,或更换现代浏览器,如果你使用的是双核浏览器,请切换到极速/高速模式。</p>
</div>
<script type="text/javascript">
function getBrowerInfo() {
var userAgent = window.navigator.userAgent; var userAgent = window.navigator.userAgent;
var browerInfo = { var browerInfo = {
type: 'unknown', type: 'unknown',
version: 'unknown', version: 'unknown',
userAgent: userAgent userAgent: userAgent
}; };
if(document.documentMode){ if (document.documentMode) {
browerInfo.type = "IE" browerInfo.type = "IE"
browerInfo.version = document.documentMode + '' browerInfo.version = document.documentMode + ''
}else if(indexOf(userAgent, "Firefox")){ } else if (indexOf(userAgent, "Firefox")) {
browerInfo.type = "Firefox" browerInfo.type = "Firefox"
browerInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1] browerInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1]
}else if(indexOf(userAgent, "Opera")){ } else if (indexOf(userAgent, "Opera")) {
browerInfo.type = "Opera" browerInfo.type = "Opera"
browerInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1] browerInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1]
}else if(indexOf(userAgent, "Edg")){ } else if (indexOf(userAgent, "Edg")) {
browerInfo.type = "Edg" browerInfo.type = "Edg"
browerInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1] browerInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1]
}else if(indexOf(userAgent, "Chrome")){ } else if (indexOf(userAgent, "Chrome")) {
browerInfo.type = "Chrome" browerInfo.type = "Chrome"
browerInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1] browerInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1]
}else if(indexOf(userAgent, "Safari")){ } else if (indexOf(userAgent, "Safari")) {
browerInfo.type = "Safari" browerInfo.type = "Safari"
browerInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1] browerInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1]
} }
return browerInfo return browerInfo
} }
function indexOf(userAgent, brower) { function indexOf(userAgent, brower) {
return userAgent.indexOf(brower) > -1 return userAgent.indexOf(brower) > -1
} }
function isSatisfyBrower(){ function isSatisfyBrower() {
var minVer = { var minVer = {
"Chrome": 71, "Chrome": 71,
"Firefox": 65, "Firefox": 65,
@ -112,12 +183,13 @@
} }
var browerInfo = getBrowerInfo() var browerInfo = getBrowerInfo()
var materVer = browerInfo.version.split('.')[0] var materVer = browerInfo.version.split('.')[0]
return materVer >= minVer[browerInfo.type] return materVer >= minVer[browerInfo.type]
} }
if(!isSatisfyBrower()){ if (!isSatisfyBrower()) {
document.getElementById('versionCheck').style.display = 'block'; document.getElementById('versionCheck').style.display = 'block';
document.getElementById('versionCheck-type').innerHTML = getBrowerInfo().type; document.getElementById('versionCheck-type').innerHTML = getBrowerInfo().type;
document.getElementById('versionCheck-version').innerHTML = getBrowerInfo().version; document.getElementById('versionCheck-version').innerHTML = getBrowerInfo().version;
} }
</script> </script>
</html> </html>

View File

@ -0,0 +1,86 @@
<template>
<el-container>
<el-header>
<div class="panel_title">
设备清单
<div class="backMap" @click="backtoMap">
切换地图
<el-icon>
<Switch />
</el-icon>
</div>
</div>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header>
<div class="searchWrap">
<div style="font-size: 1vh;">
设备总数<span class="totalNumber">0</span>
</div>
<div>
<el-select v-model="query.timetype" placeholder="全部工序" @change="timeHandleQuery" clearable>
<el-option v-for="item in timeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="query.cate" placeholder="全部单元" @change="carHandleQuery" clearable>
<el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
<el-select v-model="query.type" placeholder="TSP监测仪表" style="width:7vw">
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
placeholder="设备名称/设备编号"></el-input>
<el-button @click="handleQuery">查询</el-button>
</div>
</div>
</el-header>
<el-main>
<scTable :data="tableData" :apiObj="apiObj" size="large" style="" @row-click="rowClick">
<el-table-column prop="index" label="序号"></el-table-column>
<el-table-column prop="number" label="设备编号"></el-table-column>
<el-table-column prop="level" label="设备名称"></el-table-column>
<el-table-column prop="mgroup" label="设备类型"></el-table-column>
<el-table-column prop="eqpment" label="所属工序"></el-table-column>
<el-table-column prop="mgroup" label="当前状态"></el-table-column>
<el-table-column prop="mgroup" label="设备信息"></el-table-column>
</scTable>
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
query: {},
cateOptions: [
{ id: 1, name: '货车' },
{ id: 2, name: '罐车' },
],
typeOptions: [
{ id: '', name: 'TSP监测仪表' },
// { id: 1, name: 'TSP' },
// { id: 2, name: 'TSP' }
],
statusOptions: [
{ id: '', name: '全部' },
{ id: 10, name: '已录入' },
{ id: 20, name: '未录入' }
],
timeOptions: ['日', '月', '年'],
apiObj: this.$API.enp.vehicle_access,
params: { type: 2 },
}
},
methods: {
handleQuery() {
this.$refs.table.queryData(this.query);
},
timeHandleQuery() { },
carHandleQuery() { },
}
}
</script>

View File

@ -0,0 +1,60 @@
<template>
<el-container>
<el-main>
<iframe src="./demo/index.html" frameborder="0" style="width: 90%;height: 90%;"></iframe>
</el-main>
</el-container>
</template>
<script>
import { ThinRenderTargetTexture } from 'babylonjs';
export default {
data() {
return {
isZh: true,
}
},
mounted() {
let that = this;
var szLanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
szLanguage = szLanguage.substring(0, 2);
document.write("<link type='text/css' href='../demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
if ("zh" === szLanguage) {
that.isZh = true;
} else {
that.isZh = false;
}
let jsUrl = '/jsmap/jsmap.js';
that.loadScript('mapId', jsUrl, () => {
that.canUseMap = true;
})
},
methods: {
loadScript(id, url, callback) {
debugger;
//idjs
if (document.querySelector(`#${id}`)) {
callback && callback()
return;
}
// script
const script = document.createElement('script');
script.src = url;
//id
script.setAttribute('id', id);
//script
const firstScript = document.getElementsByTagName('script')[0];
//script BODY,bodyscriptjs
firstScript.parentNode.insertBefore(script, firstScript);
//script
script.onload = script.onreadystatechange = function () {
//
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
callback && callback()
}
};
},
}
}
</script>

View File

@ -60,7 +60,7 @@
<div class="menuItem"> <div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick3"> <el-dropdown class="dropdown" trigger="click" @command="handleClick3">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
运输清洁 清洁运输
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="enpMenu"> <el-dropdown-menu class="enpMenu">
@ -98,8 +98,9 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="enpMenu"> <el-dropdown-menu class="enpMenu">
<el-dropdown-item command="ledger">环境管理台账</el-dropdown-item> <el-dropdown-item command="eqments">设备清单</el-dropdown-item>
<el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item> <el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
<el-dropdown-item command="video">视屏墙 </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -329,7 +330,7 @@
<envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor> <envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
<pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar> <pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
<!-- 台账管理 --> <!-- 台账管理 -->
<ledger v-else-if="activeDrawerName == 'ledger'" @close="closeDialog"></ledger> <eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments>
<alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord> <alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
<pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2> <pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2>
<smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg> <smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg>
@ -354,7 +355,7 @@ import transport from "./enpComponents/transport.vue";
import envirqualmonitor from "./enpComponents/envirqualmonitor.vue"; import envirqualmonitor from "./enpComponents/envirqualmonitor.vue";
import envirmonitor from "./enpComponents/envirmonitor.vue"; import envirmonitor from "./enpComponents/envirmonitor.vue";
import pollutecalendar from "./enpComponents/pollutecalendar.vue"; import pollutecalendar from "./enpComponents/pollutecalendar.vue";
import ledger from "./enpComponents/ledger.vue";// import eqments from "./enpComponents/eqments.vue";//
import alarmrecord from "./enpComponents/alarmrecord.vue"; import alarmrecord from "./enpComponents/alarmrecord.vue";
import pollutant2 from "./enpComponents/pollutant2.vue" import pollutant2 from "./enpComponents/pollutant2.vue"
import smartg from "./enpComponents/smartg.vue" import smartg from "./enpComponents/smartg.vue"
@ -372,7 +373,7 @@ export default {
envirqualmonitor, envirqualmonitor,
envirmonitor, envirmonitor,
pollutecalendar, pollutecalendar,
ledger, eqments,
alarmrecord, alarmrecord,
pollutant2, pollutant2,
smartg smartg
@ -642,6 +643,9 @@ export default {
this.activeIndex = 4; this.activeIndex = 4;
this.elDrawer = true; this.elDrawer = true;
this.activeDrawerName = command; this.activeDrawerName = command;
if (command == 'video') {
window.open('/demo/index.html', '_self')
}
}, },
handleClick5(command) { handleClick5(command) {
this.activeIndex = 5; this.activeIndex = 5;

View File

@ -12,7 +12,7 @@
<el-date-picker v-model="timeRange" type="datetimerange" range-separator="" start-placeholder="发生时间始" <el-date-picker v-model="timeRange" type="datetimerange" range-separator="" start-placeholder="发生时间始"
end-placeholder="发生时间止" style="margin-left:2px" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery" end-placeholder="发生时间止" style="margin-left:2px" value-format="YYYY-MM-DD HH:mm:ss" @change="handleQuery"
clearable /> clearable />
<el-button type="danger" @click="handleDelete">批量删除</el-button> <el-button type="danger" @click="handleDelete" style="margin-left: 2px;">批量删除</el-button>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<el-button type="primary" :loading='dLoading' icon="el-icon-download" @click="exportList">下载</el-button> <el-button type="primary" :loading='dLoading' icon="el-icon-download" @click="exportList">下载</el-button>