camera - 副本.html 50 KB

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