camera.01.html 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <meta http-equiv="Pragma" content="no-cache"/>
  7. <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
  8. <meta http-equiv="Expires" content="0"/>
  9. <title>数据大屏:数据大屏教学现场</title>
  10. <link rel="stylesheet" href="demo1.01.css">
  11. <script>
  12. document.write(
  13. "<link type='text/css' href='./demo.01.css?version=" +
  14. new Date().getTime() +
  15. "' rel='stylesheet' />",
  16. );
  17. </script>
  18. <script src="./vue.js"></script>
  19. </head>
  20. <body>
  21. <div class="main">
  22. <div class="main-header">
  23. <div class="sy"
  24. onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=e5d135801c3f4229bde5eaad99fffbc2')">
  25. <div>首页</div>
  26. </div>
  27. <div class="jyjx"
  28. onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=1397a3a63525414c9716efb6e5709900')">
  29. <div>教育教学</div>
  30. </div>
  31. <div class="zsxx"
  32. onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=17bbf33f61384f7ab53a7b829674bef2')">
  33. <div>招生就业</div>
  34. </div>
  35. <!-- <div class="jyxx"-->
  36. <!-- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=22a2c238d23e4eb0a80bd2e4f047ba90')">-->
  37. <!-- <div>就业信息</div>-->
  38. <!-- </div>-->
  39. <div class="zwhq"
  40. onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=e41c04b9507b437aa7ba9b5f15024bc6')">
  41. <div>总务后勤</div>
  42. </div>
  43. <div class="jsxx"
  44. onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=0be9630f263d475bae9fac83382d7e7c')">
  45. <div>师生信息</div>
  46. </div>
  47. <!-- <div class="xsxx"-->
  48. <!-- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=5f656466368442ee88abfe34a42a3dd8')">-->
  49. <!-- <div>学生信息</div>-->
  50. <!-- </div>-->
  51. <!-- <div class="shfw"-->
  52. <!-- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=170f4fae167d4b2eb7578073cb713fb1')">-->
  53. <!-- <div>社会服务</div>-->
  54. <!-- </div>-->
  55. <div class="jxxc">
  56. <div>教学现场</div>
  57. </div>
  58. </div>
  59. <div class="main-container">
  60. <div class="menu-container" id="menu-container">
  61. <div class="title-item">摄像头列表</div>
  62. <div v-for="(item,index) in message" :key="index">
  63. <div class="menu-title">
  64. <img src="./icon%202.png" alt=""> <span>{{item.buildname}}</span>
  65. </div>
  66. <div class="class-container">
  67. <div class="class-item" v-for="(item1,index1) in item.classes" :key="index1"
  68. @click="handleClick(item1.ip)">
  69. <div>
  70. <img src="./03.png" alt="">
  71. </div>
  72. <div>{{item1.classname}}</div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="video-container">
  78. <div class="title-item">
  79. 视频区域
  80. <select class="sel2" onchange="changeWndNum(this.value);">
  81. <option value="1" selected>1x1</option>
  82. <option value="2">2x2</option>
  83. <option value="3">3x3</option>
  84. <option value="4">4x4</option>
  85. <option value="1*2">1x2</option>
  86. <option value="2*1">2x1</option>
  87. </select>
  88. </div>
  89. <div class="left">
  90. <div id="divPlugin" class="plugin"></div>
  91. <fieldset class="login" style="display:none;">
  92. <legend>登录</legend>
  93. <table cellpadding="0" cellspacing="3" border="0">
  94. <tr>
  95. <td class="tt">IP地址</td>
  96. <td>
  97. <input id="loginip" type="text" class="txt" value="10.10.32.1"/>
  98. </td>
  99. <td class="tt">端口号</td>
  100. <td><input id="port" type="text" class="txt" value="80"/></td>
  101. </tr>
  102. <tr>
  103. <td class="tt">用户名</td>
  104. <td><input id="username" type="text" class="txt" value="admin"/></td>
  105. <td class="tt">密码</td>
  106. <td>
  107. <input id="password" type="password" class="txt" value="12345abcde"/>
  108. </td>
  109. </tr>
  110. <tr>
  111. <td class="tt">设备端口</td>
  112. <td colspan="2">
  113. <input id="deviceport" type="text" class="txt"/>
  114. (可选参数)
  115. </td>
  116. <td>
  117. 窗口分割数&nbsp;
  118. <select class="sel2" onchange="changeWndNum(this.value);">
  119. <option value="1" selected>1x1</option>
  120. <option value="2">2x2</option>
  121. <option value="3">3x3</option>
  122. <option value="4">4x4</option>
  123. <option value="1*2">1x2</option>
  124. <option value="2*1">2x1</option>
  125. </select>
  126. </td>
  127. </tr>
  128. <tr>
  129. <td class="tt">RTSP端口</td>
  130. <td colspan="3">
  131. <input id="rtspport" type="text" class="txt"/>
  132. (可选参数)
  133. </td>
  134. </tr>
  135. <tr>
  136. <td colspan="4">
  137. <input type="button" class="btn" value="登录" onclick="clickLogin();"/>
  138. <input
  139. type="button"
  140. class="btn"
  141. value="退出"
  142. onclick="clickLogout();"
  143. />
  144. <input
  145. type="button"
  146. class="btn2"
  147. value="获取基本信息"
  148. onclick="clickGetDeviceInfo();"
  149. />
  150. </td>
  151. </tr>
  152. <tr>
  153. <td class="tt">已登录设备</td>
  154. <td>
  155. <select
  156. id="ip"
  157. class="sel"
  158. onchange="getChannelInfo();getDevicePort();"
  159. ></select>
  160. </td>
  161. <td class="tt">通道列表</td>
  162. <td>
  163. <select id="channels" class="sel"></select>
  164. </td>
  165. </tr>
  166. <tr>
  167. <td>
  168. <input
  169. type="button"
  170. class="btn2"
  171. value="开始预览"
  172. onclick="clickStartRealPlay();"
  173. />
  174. </td>
  175. <td>
  176. <input
  177. type="button"
  178. class="btn2"
  179. value="停止预览"
  180. onclick="clickStopRealPlay();"
  181. />
  182. </td>
  183. <td>
  184. <input
  185. type="button"
  186. class="btn2"
  187. value="设置文本叠加"
  188. onclick="setTextOverlay();"
  189. />
  190. </td>
  191. </tr>
  192. </table>
  193. </fieldset>
  194. <fieldset class="ipchannel" style="display:none;">
  195. <legend>数字通道</legend>
  196. <table width="100%" cellpadding="0" cellspacing="3" border="0">
  197. <tr>
  198. <td>
  199. <input
  200. type="button"
  201. class="btn"
  202. value="获取数字通道列表"
  203. onclick="clickGetDigitalChannelInfo();"
  204. />
  205. </td>
  206. </tr>
  207. <tr>
  208. <td>
  209. <div class="digitaltdiv">
  210. <table
  211. id="digitalchannellist"
  212. class="digitalchannellist"
  213. cellpadding="0"
  214. cellspacing="0"
  215. border="0"
  216. ></table>
  217. </div>
  218. </td>
  219. </tr>
  220. </table>
  221. </fieldset>
  222. <fieldset class="localconfig" style="display:none;">
  223. <legend>本地配置</legend>
  224. <table cellpadding="0" cellspacing="3" border="0">
  225. <tr>
  226. <td class="tt">播放性能</td>
  227. <td>
  228. <select id="netsPreach" name="netsPreach" class="sel">
  229. <option value="0">最短延时</option>
  230. <option value="1">实时性好</option>
  231. <option value="2">均衡</option>
  232. <option value="3">流畅性好</option>
  233. </select>
  234. </td>
  235. <td class="tt">图像尺寸</td>
  236. <td>
  237. <select id="wndSize" name="wndSize" class="sel">
  238. <option value="0">充满</option>
  239. <option value="1">4:3</option>
  240. <option value="2">16:9</option>
  241. </select>
  242. </td>
  243. </tr>
  244. <tr>
  245. <td class="tt">规则信息</td>
  246. <td>
  247. <select id="rulesInfo" name="rulesInfo" class="sel">
  248. <option value="1">启用</option>
  249. <option value="0">禁用</option>
  250. </select>
  251. </td>
  252. <td class="tt">抓图文件格式</td>
  253. <td>
  254. <select id="captureFileFormat" name="captureFileFormat" class="sel">
  255. <option value="0">JPEG</option>
  256. <option value="1">BMP</option>
  257. </select>
  258. </td>
  259. </tr>
  260. <tr>
  261. <td class="tt">录像文件打包大小</td>
  262. <td>
  263. <select id="packSize" name="packSize" class="sel">
  264. <option value="0">256M</option>
  265. <option value="1">512M</option>
  266. <option value="2">1G</option>
  267. </select>
  268. </td>
  269. <td class="tt">协议类型</td>
  270. <td>
  271. <select id="protocolType" name="protocolType" class="sel">
  272. <option value="0">TCP</option>
  273. <option value="2">UDP</option>
  274. </select>
  275. </td>
  276. </tr>
  277. <tr>
  278. <td class="tt">码流秘钥</td>
  279. <td colspan="3">
  280. <input id="secretKey" type="password" class="txt"/>
  281. </td>
  282. </tr>
  283. <tr>
  284. <td class="tt">录像文件保存路径</td>
  285. <td colspan="3">
  286. <input id="recordPath" type="text" class="txt"/>
  287. &nbsp;
  288. <input
  289. type="button"
  290. class="btn"
  291. value="浏览"
  292. onclick="clickOpenFileDlg('recordPath', 0);"
  293. />
  294. </td>
  295. </tr>
  296. <tr>
  297. <td class="tt">回放下载保存路径</td>
  298. <td colspan="3">
  299. <input id="downloadPath" type="text" class="txt"/>
  300. &nbsp;
  301. <input
  302. type="button"
  303. class="btn"
  304. value="浏览"
  305. onclick="clickOpenFileDlg('downloadPath', 0);"
  306. />
  307. </td>
  308. </tr>
  309. <tr>
  310. <td class="tt">预览抓图保存路径</td>
  311. <td colspan="3">
  312. <input id="previewPicPath" type="text" class="txt"/>
  313. &nbsp;
  314. <input
  315. type="button"
  316. class="btn"
  317. value="浏览"
  318. onclick="clickOpenFileDlg('previewPicPath', 0);"
  319. />
  320. </td>
  321. </tr>
  322. <tr>
  323. <td class="tt">回放抓图保存路径</td>
  324. <td colspan="3">
  325. <input id="playbackPicPath" type="text" class="txt"/>
  326. &nbsp;
  327. <input
  328. type="button"
  329. class="btn"
  330. value="浏览"
  331. onclick="clickOpenFileDlg('playbackPicPath', 0);"
  332. />
  333. </td>
  334. </tr>
  335. <tr>
  336. <td class="tt">回放剪辑保存路径</td>
  337. <td colspan="3">
  338. <input id="playbackFilePath" type="text" class="txt"/>
  339. &nbsp;
  340. <input
  341. type="button"
  342. class="btn"
  343. value="浏览"
  344. onclick="clickOpenFileDlg('playbackFilePath', 0);"
  345. />
  346. </td>
  347. </tr>
  348. <tr>
  349. <td colspan="4">
  350. <input
  351. type="button"
  352. class="btn"
  353. value="获取"
  354. onclick="clickGetLocalCfg();"
  355. />
  356. &nbsp;
  357. <input
  358. type="button"
  359. class="btn"
  360. value="设置"
  361. onclick="clickSetLocalCfg();"
  362. />
  363. &nbsp;&nbsp;修改参数后,需要刷新界面后生效。
  364. </td>
  365. </tr>
  366. </table>
  367. </fieldset>
  368. </div>
  369. <div class="left" style="display:none;">
  370. <fieldset class="preview">
  371. <legend>预览</legend>
  372. <table cellpadding="0" cellspacing="3" border="0">
  373. <tr>
  374. <td class="tt">码流类型</td>
  375. <td>
  376. <select id="streamtype" class="sel">
  377. <option value="1">主码流</option>
  378. <option value="2">子码流</option>
  379. <option value="3">第三码流</option>
  380. <option value="4">转码码流</option>
  381. </select>
  382. </td>
  383. </tr>
  384. <tr>
  385. <td class="tt">音量</td>
  386. <td>
  387. <input type="text" id="volume" class="txt" value="50" maxlength="3"/>
  388. &nbsp;
  389. <input
  390. type="button"
  391. class="btn"
  392. value="设置"
  393. onclick="clickSetVolume();"
  394. />
  395. (范围:0~100)
  396. </td>
  397. <td>
  398. <input
  399. type="button"
  400. class="btn"
  401. value="打开声音"
  402. onclick="clickOpenSound();"
  403. />
  404. <input
  405. type="button"
  406. class="btn"
  407. value="关闭声音"
  408. onclick="clickCloseSound();"
  409. />
  410. </td>
  411. </tr>
  412. <tr>
  413. <td class="tt">对讲通道</td>
  414. <td>
  415. <select id="audiochannels" class="sel"></select>
  416. <input
  417. type="button"
  418. class="btn"
  419. value="获取通道"
  420. onclick="clickGetAudioInfo();"
  421. />
  422. </td>
  423. <td>
  424. <input
  425. type="button"
  426. class="btn"
  427. value="开始对讲"
  428. onclick="clickStartVoiceTalk();"
  429. />
  430. <input
  431. type="button"
  432. class="btn"
  433. value="停止对讲"
  434. onclick="clickStopVoiceTalk();"
  435. />
  436. </td>
  437. </tr>
  438. <tr>
  439. <td colspan="3">
  440. <input
  441. type="button"
  442. class="btn"
  443. value="抓图"
  444. onclick="clickCapturePic('preview');"
  445. />
  446. <input
  447. type="button"
  448. class="btn"
  449. value="抓图上传"
  450. onclick="clickCapturePicData();"
  451. />
  452. <input
  453. type="button"
  454. class="btn"
  455. value="开始录像"
  456. onclick="clickStartRecord('realplay');"
  457. />
  458. <input
  459. type="button"
  460. class="btn"
  461. value="停止录像"
  462. onclick="clickStopRecord('realplay');"
  463. />
  464. </td>
  465. </tr>
  466. <tr>
  467. <td colspan="3">
  468. <input
  469. type="button"
  470. class="btn2"
  471. value="启用电子放大"
  472. onclick="clickEnableEZoom();"
  473. />
  474. <input
  475. type="button"
  476. class="btn2"
  477. value="禁用电子放大"
  478. onclick="clickDisableEZoom();"
  479. />
  480. <input
  481. type="button"
  482. class="btn2"
  483. value="启用3D放大"
  484. onclick="clickEnable3DZoom();"
  485. />
  486. <input
  487. type="button"
  488. class="btn2"
  489. value="禁用3D放大"
  490. onclick="clickDisable3DZoom();"
  491. />
  492. <input
  493. id="fullbtn"
  494. type="button"
  495. class="btn"
  496. value="全屏"
  497. onclick="clickFullScreen();"
  498. />
  499. </td>
  500. </tr>
  501. </table>
  502. </fieldset>
  503. <fieldset class="draw">
  504. <legend>绘图</legend>
  505. <table cellpadding="0" cellspacing="3" border="0">
  506. <tr>
  507. <td>
  508. <input
  509. type="button"
  510. class="btn"
  511. value="启用绘制"
  512. onclick="clickEnableDraw();"
  513. />
  514. <input
  515. type="button"
  516. class="btn"
  517. value="禁用绘制"
  518. onclick="clickDisableDraw();"
  519. />
  520. </td>
  521. </tr>
  522. <tr>
  523. <td>
  524. 图形ID:
  525. <input id="snapId" type="text" class="txt"/>
  526. 名称:
  527. <input id="snapName" type="text" class="txt"/>
  528. </td>
  529. </tr>
  530. <tr>
  531. <td>
  532. <input
  533. type="button"
  534. class="btn"
  535. value="添加图形"
  536. onclick="clickAddSnapPolygon()"
  537. />
  538. <input
  539. type="button"
  540. class="btn"
  541. value="删除图形"
  542. onclick="clickDelSnapPolygon()"
  543. />
  544. <input
  545. type="button"
  546. class="btn"
  547. value="获取图形"
  548. onclick="clickGetSnapPolygon()"
  549. />
  550. <input
  551. type="button"
  552. class="btn"
  553. value="设置图形"
  554. onclick="clickSetSnapPolygon()"
  555. />
  556. <input
  557. type="button"
  558. class="btn"
  559. value="清空图形"
  560. onclick="clickDelAllSnapPolygon()"
  561. />
  562. </td>
  563. </tr>
  564. </table>
  565. </fieldset>
  566. <fieldset class="ptz">
  567. <legend>云台控制</legend>
  568. <table cellpadding="0" cellspacing="3" border="0" class="left">
  569. <tr>
  570. <td>
  571. <input
  572. type="button"
  573. class="btn"
  574. value="左上"
  575. onmousedown="mouseDownPTZControl(5);"
  576. onmouseup="mouseUpPTZControl();"
  577. />
  578. <input
  579. type="button"
  580. class="btn"
  581. value="上"
  582. onmousedown="mouseDownPTZControl(1);"
  583. onmouseup="mouseUpPTZControl();"
  584. />
  585. <input
  586. type="button"
  587. class="btn"
  588. value="右上"
  589. onmousedown="mouseDownPTZControl(7);"
  590. onmouseup="mouseUpPTZControl();"
  591. />
  592. </td>
  593. </tr>
  594. <tr>
  595. <td>
  596. <input
  597. type="button"
  598. class="btn"
  599. value="左"
  600. onmousedown="mouseDownPTZControl(3);"
  601. onmouseup="mouseUpPTZControl();"
  602. />
  603. <input
  604. type="button"
  605. class="btn"
  606. value="自动"
  607. onclick="mouseDownPTZControl(9);"
  608. />
  609. <input
  610. type="button"
  611. class="btn"
  612. value="右"
  613. onmousedown="mouseDownPTZControl(4);"
  614. onmouseup="mouseUpPTZControl();"
  615. />
  616. </td>
  617. </tr>
  618. <tr>
  619. <td>
  620. <input
  621. type="button"
  622. class="btn"
  623. value="左下"
  624. onmousedown="mouseDownPTZControl(6);"
  625. onmouseup="mouseUpPTZControl();"
  626. />
  627. <input
  628. type="button"
  629. class="btn"
  630. value="下"
  631. onmousedown="mouseDownPTZControl(2);"
  632. onmouseup="mouseUpPTZControl();"
  633. />
  634. <input
  635. type="button"
  636. class="btn"
  637. value="右下"
  638. onmousedown="mouseDownPTZControl(8);"
  639. onmouseup="mouseUpPTZControl();"
  640. />
  641. </td>
  642. </tr>
  643. </table>
  644. <table cellpadding="0" cellspacing="3" border="0" class="left">
  645. <tr>
  646. <td class="tt">云台速度</td>
  647. <td>
  648. <select id="ptzspeed" class="sel">
  649. <option value="1">1</option>
  650. <option value="2">2</option>
  651. <option value="3">3</option>
  652. <option value="4" selected>4</option>
  653. <option value="5">5</option>
  654. <option value="6">6</option>
  655. <option value="7">7</option>
  656. </select>
  657. </td>
  658. </tr>
  659. <tr>
  660. <td class="tt">预置点号</td>
  661. <td><input id="preset" type="text" class="txt" value="1"/></td>
  662. </tr>
  663. <tr>
  664. <td colspan="2">
  665. <input
  666. type="button"
  667. class="btn"
  668. value="设置"
  669. onclick="clickSetPreset();"
  670. />
  671. <input
  672. type="button"
  673. class="btn"
  674. value="调用"
  675. onclick="clickGoPreset();"
  676. />
  677. </td>
  678. </tr>
  679. </table>
  680. <table cellpadding="0" cellspacing="3" border="0" class="left">
  681. <tr>
  682. <td class="tt">
  683. <input
  684. type="button"
  685. class="btn2"
  686. value="变倍+"
  687. onmousedown="PTZZoomIn()"
  688. onmouseup="PTZZoomStop()"
  689. />
  690. </td>
  691. <td>
  692. <input
  693. type="button"
  694. class="btn2"
  695. value="变倍-"
  696. onmousedown="PTZZoomout()"
  697. onmouseup="PTZZoomStop()"
  698. />
  699. </td>
  700. </tr>
  701. <tr>
  702. <td class="tt">
  703. <input
  704. type="button"
  705. class="btn2"
  706. value="变焦+"
  707. onmousedown="PTZFocusIn()"
  708. onmouseup="PTZFoucusStop()"
  709. />
  710. </td>
  711. <td>
  712. <input
  713. type="button"
  714. class="btn2"
  715. value="变焦-"
  716. onmousedown="PTZFoucusOut()"
  717. onmouseup="PTZFoucusStop()"
  718. />
  719. </td>
  720. </tr>
  721. <tr>
  722. <td class="tt">
  723. <input
  724. type="button"
  725. class="btn2"
  726. value="光圈+"
  727. onmousedown="PTZIrisIn()"
  728. onmouseup="PTZIrisStop()"
  729. />
  730. </td>
  731. <td>
  732. <input
  733. type="button"
  734. class="btn2"
  735. value="光圈-"
  736. onmousedown="PTZIrisOut()"
  737. onmouseup="PTZIrisStop()"
  738. />
  739. </td>
  740. </tr>
  741. </table>
  742. </fieldset>
  743. <fieldset class="playback">
  744. <legend>回放</legend>
  745. <table width="100%" cellpadding="0" cellspacing="3" border="0">
  746. <tr>
  747. <td class="tt">码流类型</td>
  748. <td>
  749. <select id="record_streamtype" class="sel">
  750. <option value="1">主码流</option>
  751. <option value="2">子码流</option>
  752. </select>
  753. </td>
  754. </tr>
  755. <tr>
  756. <td class="tt">开始时间</td>
  757. <td>
  758. <input
  759. id="starttime"
  760. type="text"
  761. class="txt"
  762. value="2013-12-10 00:00:00"
  763. />
  764. (时间格式:2013-11-11 12:34:56)
  765. </td>
  766. </tr>
  767. <tr>
  768. <td class="tt">结束时间</td>
  769. <td>
  770. <input
  771. id="endtime"
  772. type="text"
  773. class="txt"
  774. value="2013-12-11 23:59:59"
  775. />
  776. <input
  777. type="button"
  778. class="btn"
  779. value="搜索"
  780. onclick="clickRecordSearch(0);"
  781. />
  782. <input
  783. type="button"
  784. class="btn"
  785. value="停止下载"
  786. onclick="clickStopDownload();"
  787. />
  788. </td>
  789. </tr>
  790. <tr>
  791. <td class="tt">按时间下载开始时间</td>
  792. <td>
  793. <input
  794. id="downloadstarttime"
  795. type="text"
  796. class="txt"
  797. value="2013-12-10 00:00:00"
  798. />
  799. (时间格式:2013-11-11 12:34:56)
  800. </td>
  801. </tr>
  802. <tr>
  803. <td class="tt">按时间下载结束时间</td>
  804. <td>
  805. <input
  806. id="downloadendtime"
  807. type="text"
  808. class="txt"
  809. value="2013-12-11 23:59:59"
  810. />
  811. <input
  812. type="button"
  813. class="btn"
  814. value="下载"
  815. onclick="clickStartDownloadRecordByTime();"
  816. />
  817. (相机不支持)
  818. </td>
  819. </tr>
  820. <tr>
  821. <td colspan="2">
  822. <div id="searchdiv" class="searchdiv">
  823. <table
  824. id="searchlist"
  825. class="searchlist"
  826. cellpadding="0"
  827. cellspacing="0"
  828. border="0"
  829. ></table>
  830. </div>
  831. </td>
  832. </tr>
  833. <tr>
  834. <td colspan="2">
  835. <input
  836. type="button"
  837. class="btn2"
  838. value="开始回放"
  839. onclick="clickStartPlayback();"
  840. />
  841. <input
  842. type="button"
  843. class="btn2"
  844. value="停止回放"
  845. onclick="clickStopPlayback();"
  846. />
  847. <input
  848. id="btnReverse"
  849. type="button"
  850. class="btn"
  851. value="倒放"
  852. onclick="clickReversePlayback();"
  853. />
  854. <input type="button" class="btn" value="单帧" onclick="clickFrame();"/>
  855. <input id="transstream" type="checkbox" class="vtop"/>
  856. &nbsp;启用转码码流
  857. </td>
  858. </tr>
  859. <tr>
  860. <td colspan="2">
  861. <input type="button" class="btn" value="暂停" onclick="clickPause();"/>
  862. <input
  863. type="button"
  864. class="btn"
  865. value="恢复"
  866. onclick="clickResume();"
  867. />
  868. <input
  869. type="button"
  870. class="btn"
  871. value="慢放"
  872. onclick="clickPlaySlow();"
  873. />
  874. <input
  875. type="button"
  876. class="btn"
  877. value="快放"
  878. onclick="clickPlayFast();"
  879. />
  880. </td>
  881. </tr>
  882. <tr>
  883. <td colspan="2">
  884. <input
  885. type="button"
  886. class="btn"
  887. value="抓图"
  888. onclick="clickCapturePic('playback');"
  889. />
  890. <input
  891. type="button"
  892. class="btn2"
  893. value="开始剪辑"
  894. onclick="clickStartRecord('playback');"
  895. />
  896. <input
  897. type="button"
  898. class="btn2"
  899. value="停止剪辑"
  900. onclick="clickStopRecord('playback');"
  901. />
  902. <input
  903. type="button"
  904. class="btn2"
  905. value="OSD时间"
  906. onclick="clickGetOSDTime();"
  907. />
  908. &nbsp;
  909. <input id="osdtime" type="text" class="txt" readonly/>
  910. </td>
  911. </tr>
  912. </table>
  913. </fieldset>
  914. <fieldset class="maintain">
  915. <legend>系统维护</legend>
  916. <table width="100%" cellpadding="0" cellspacing="3" border="0">
  917. <tr>
  918. <td>
  919. <input id="edfpassword" type="password"/>
  920. <input
  921. type="button"
  922. class="btn2"
  923. value="导出配置文件"
  924. onclick="clickExportDeviceConfig();"
  925. />
  926. </td>
  927. </tr>
  928. <tr>
  929. <td>
  930. <input
  931. type="button"
  932. id="checkVersion"
  933. class="btn2"
  934. value="检查插件版本"
  935. onclick="clickCheckPluginVersion();"
  936. />
  937. <input
  938. type="button"
  939. class="btn2"
  940. value="恢复默认参数"
  941. onclick="clickRestoreDefault();"
  942. />
  943. </td>
  944. </tr>
  945. <tr>
  946. <td>
  947. <input id="configFile" type="text" class="txt"/>
  948. &nbsp;
  949. <input
  950. type="button"
  951. class="btn"
  952. value="浏览"
  953. onclick="clickOpenFileDlg('configFile', 1);"
  954. />
  955. &nbsp;
  956. <input
  957. type="button"
  958. class="btn2"
  959. value="导入配置文件"
  960. onclick="clickImportDeviceConfig();"
  961. />
  962. </td>
  963. </tr>
  964. <tr>
  965. <td>
  966. <input id="upgradeFile" type="text" class="txt"/>
  967. &nbsp;
  968. <input
  969. type="button"
  970. class="btn"
  971. value="浏览"
  972. onclick="clickOpenFileDlg('upgradeFile', 1);"
  973. />
  974. &nbsp;
  975. <input
  976. type="button"
  977. class="btn2"
  978. value="升级"
  979. onclick="clickStartUpgrade();"
  980. />
  981. </td>
  982. </tr>
  983. </table>
  984. </fieldset>
  985. </div>
  986. <div class="left" style="display:none;">
  987. <fieldset class="operate">
  988. <legend>操作信息</legend>
  989. <div id="opinfo" class="opinfo"></div>
  990. </fieldset>
  991. <fieldset class="callback">
  992. <legend>事件回调信息</legend>
  993. <div id="cbinfo" class="cbinfo"></div>
  994. </fieldset>
  995. </div>
  996. </div>
  997. </div>
  998. </div>
  999. <script src="./jquery-1.7.1.min.js"></script>
  1000. <script id="videonode" src="./codebase/webVideoCtrl.js"></script>
  1001. <script src="./cn/demo.js"></script>
  1002. <script>
  1003. function redirectToUrl(url) {
  1004. // console.log(url);
  1005. window.location.href = url;
  1006. }
  1007. var app = new Vue({
  1008. el: '#menu-container',
  1009. data: {
  1010. message:[],
  1011. },
  1012. mounted: function () {
  1013. console.log("mounted");
  1014. },
  1015. created: function(){
  1016. console.log("created");
  1017. var requestBody =new FormData();
  1018. requestBody.append('requestBody','{"condition":{},"requiredItems":"jxlmc,sxtmc,ipdz"}')
  1019. let obj;
  1020. $.ajax({
  1021. url: 'http://172.16.0.63:28080/dmp-res-api/restservice/20241028113645823630',
  1022. type: 'POST',
  1023. // contentType: 'application/json', // 发送信息至服务器时内容编码类型
  1024. contentType: false,
  1025. data: requestBody,
  1026. processData: false, // 不要对data进行处理,因为数据已经是字符串
  1027. // dataType: 'json',
  1028. success: function(response) {
  1029. let a=response;
  1030. console.log(a);
  1031. obj = [];
  1032. for (let i = 0; i < a.resultData.length; i++) {
  1033. // console.log(a.resultData[i].jxlmc)
  1034. //判断data中是否有值,没有就添加,有就跳过
  1035. let flag = false;
  1036. let index = 0;
  1037. for (let j = 0; j < obj.length; j++) {
  1038. if (obj[j].buildname == a.resultData[i].jxlmc) {
  1039. flag = true;
  1040. index = j;
  1041. break;
  1042. }
  1043. }
  1044. if (flag) {
  1045. obj[index].classes.push({
  1046. classname: a.resultData[i].sxtmc,
  1047. ip: a.resultData[i].ipdz
  1048. })
  1049. }
  1050. if (!flag) {
  1051. obj.push({
  1052. buildname: a.resultData[i].jxlmc,
  1053. classes: [{
  1054. classname: a.resultData[i].sxtmc,
  1055. ip: a.resultData[i].ipdz
  1056. }]
  1057. })
  1058. }
  1059. }
  1060. console.log(obj)
  1061. app.$data.message = obj;
  1062. },
  1063. error: function(xhr, status, error) {
  1064. console.error('Error:', error);
  1065. }
  1066. });
  1067. },
  1068. methods: {
  1069. handleClick(ip) {
  1070. // console.log("ip=",ip);
  1071. var cur_ip = $('#loginip').val();
  1072. // console.log("cur_ip=",cur_ip);
  1073. // if(cur_ip != '0.0.0.0'){
  1074. // console.log("clickLogout");
  1075. clickLogout();
  1076. // }
  1077. setTimeout(function () {
  1078. $('#loginip').val(ip);
  1079. clickLogin(ip);
  1080. }, 200);
  1081. }
  1082. }
  1083. })
  1084. </script>
  1085. </body>
  1086. </html>