zyh

.history/public/webs/css/style_20231212102045.css

@@ -0,0 +1,32 @@
+@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;
+    overflow: hidden;
+}
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.h5-left {
+    width: 100%;
+    height: 100%;
+}
+
+.h5-play-wrap {
+    width: auto;
+    height: auto;
+    background-color: #000;
+    border: 1px solid #333;
+    position: relative;
+    overflow: hidden;
+}

.history/public/webs/index_20231212101944.js

@@ -0,0 +1,306 @@
+let $ip,
+  $port,
+  $user,
+  $password,
+  $loginState,
+  $stream,
+  $volume,
+  $canvas, //canvas播放视频DOM
+  $video, //video播放视频DOM
+  $canvas_ivs, //canvas绘图DOM
+  $video_wrap, //视频外层Wrap
+  $videoLoading, //“加载中...”提示
+  WndIndex = 0, //宫格窗口Id
+  WebCaps = null; //webCapsConfig文件转存变量
+let isLogin = false; //是否登录
+let channel = 0; //当前通道
+let curPage = 1; //视频下载列表的当前页
+let totalPage = 1; //视频下载列表的总页数
+let recordArr = []; //视频文件数组
+let canvasSon = null; //canvas绘图实例
+let playerInstance = []; //播放|回放实例数组
+let recordInstance = []; //录像下载实例数组
+let talkInstance = []; //对讲实例数组
+let ivsInstance = []; //canvas绘图实例数组
+let cutInstance = []; //视频裁剪实例数组
+let onlineChannel = []; //当前成功拉流的视频通道数组
+let isCuting = false; //是否正在进行视频裁剪
+let downList = []; //勾选的视频下载列表
+let downItemIndex = 0; //视频下载索引
+let canvasParam = {
+  //canvas绘图默认传参
+  strokeColor: "#FF0000",
+  title: "",
+  resizeEnable: false,
+  moveEnable: false,
+  closeEnable: true,
+  array: true,
+  showSize: false,
+  selectType: "inSide",
+  disappear: true,
+  selected: false,
+};
+const lINENUMBER = 16; //回放列表每页显示录像条数
+let curEnlargeWnd = 0;
+
+/**
+ * @description 初始化
+ */
+const init = () => {
+  let videoStr = "";
+  for (var i = 0; i < 16; i++) {
+    videoStr +=
+      '<div wnd-index="' +
+      i +
+      '" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
+      i +
+      '" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
+      i +
+      '" class="video_loading"  style="display:none">加载中...</p><video id="h5_video_' +
+      i +
+      '" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
+      i +
+      '" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
+  }
+  document.querySelector(".h5-play-wrap").innerHTML = videoStr;
+  document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
+    item.addEventListener("click", function (event) {
+      let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
+      if (
+        !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
+      ) {
+        channel = event.target.parentNode.getAttribute("channel") - 0;
+        document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+          item.classList.remove("fn-fontRed");
+        });
+      }
+      document
+        .querySelectorAll(".h5-play-wrap div")
+        .forEach(function (item, index) {
+          if (index === _wndIndex) {
+            item.style.borderColor = "rgb(255, 204, 0)";
+            if (
+              !(
+                playerInstance[_wndIndex] &&
+                playerInstance[_wndIndex].isPlayback
+              )
+            ) {
+              if (onlineChannel.indexOf(channel) > -1) {
+                document
+                  .querySelector(
+                    '#h5_channel_list li[channel="' + channel + '"]'
+                  )
+                  .classList.add("fn-fontRed");
+              }
+            }
+            WndIndex = _wndIndex;
+            setVideoDom();
+          } else {
+            item.style.borderColor = "rgb(125, 125, 125)";
+          }
+        });
+    });
+  });
+  $ip = $("#h5_ip");
+  $port = $("#h5_port");
+  $user = $("#h5_user");
+  $password = $("#h5_password");
+  $loginState = $("#h5_loginState");
+  $stream = $("#h5_stream");
+  $volume = $("#h5_volume");
+  $video_wrap = document.querySelector(".h5-play-wrap");
+  setVideoDom();
+
+  let inputArr = document.querySelectorAll("input[btn-for]");
+  for (let node of inputArr) {
+    node.addEventListener("click", bindClickEvent);
+  }
+
+  let selArr = document.querySelectorAll("select[sel-for]");
+  for (let node of selArr) {
+    node.addEventListener("change", bindChangeEvent);
+  }
+  [
+    "fullscreenchange",
+    "webkitfullscreenchange",
+    "mozfullscreenchange",
+    "msfullscreenchange",
+  ].forEach((item, index) => {
+    document.addEventListener(item, fullscreenchange, false);
+  });
+  onPreview(false);
+};
+/**
+ * @description 切换宫格时重新设置当前视频dom
+ */
+const setVideoDom = () => {
+  $canvas = $("#h5_canvas_" + WndIndex);
+  $video = $("#h5_video_" + WndIndex);
+  $canvas_ivs = $("#h5_ivs_" + WndIndex);
+  $videoLoading = $("#h5_loading_" + WndIndex);
+};
+/**
+/**
+ * @description 预览
+ * @param {boolean} isPlayback 是否是回放
+ * @param {string} url 回放视频的url
+ * @param {number} playbackIndex 回放视频的索引
+ * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
+ */
+const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  if (
+    playerInstance[WndIndex] &&
+    onlineChannel.indexOf(channel) > -1 &&
+    !isChangeStream
+  ) {
+    alert("通道" + (channel + 1) + "已存在！");
+    return;
+  }
+  onStopPreview();
+  var player = null
+  let options = {
+    
+    wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
+    rtspURL:
+      "rtsp://" +
+      "221.214.127.18" +
+      ":" +
+      "8200" +
+      "/cam/realmonitor?channel=10" +
+      "&subtype=0" +
+      "&proto=Private3",
+    username: "admin",
+    password: "pyss2017",
+    lessRateCanvas: true,
+    playback: isPlayback,
+    isPrivateProtocol: false,
+    realm: RPC.realm, //设备登录返回的realm
+    playbackIndex: playbackIndex,
+  };
+  player = new PlayerControl(options);
+
+  player.on("MSEResolutionChanged", function (e) {
+    console.log(e);
+  });
+  player.on("PlayStart", function (e) {
+    console.log(e);
+    $videoLoading.style.display = "none";
+    if (!player.isPlayback) {
+      onlineChannel.push(channel);
+      updateChannelList();
+      // if(curWndType !== 1) {
+      //     clickNextWnd();
+      // }
+    }
+  });
+
+  player.on("GetFrameRate", function (e) {
+    console.log("GetFrameRate: " + e);
+  });
+  player.on("FrameTypeChange", function (e) {
+    console.log("FrameTypeChange: " + e);
+  });
+  player.on("Error", function (e) {
+    //console.log('Error: ' + JSON.stringify(e))
+  });
+  player.on("IvsDraw", function (e) {
+    //console.log('IvsDraw: ' + JSON.stringify(e))
+  });
+  player.on("WorkerReady", function () {
+    player.connect();
+  });
+  player.init($canvas, $video);
+  $canvas.parentNode.setAttribute("channel", channel);
+  $videoLoading.style.display = "";
+};
+/**
+ * @description 更新通道列表
+ */
+const updateChannelList = () => {
+  document.querySelectorAll("#h5_channel_list li").forEach((item) => {
+    item.classList.remove("fn-fontBlue");
+    item.classList.remove("fn-fontRed");
+    if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
+      item.classList.add("fn-fontBlue");
+    }
+  });
+};
+/**
+ * @description 停止预览
+ */
+const onStopPreview = () => {
+  if (playerInstance[WndIndex]) {
+    playerInstance[WndIndex].stop();
+    playerInstance[WndIndex].close();
+    playerInstance[WndIndex] = null;
+    let _index = onlineChannel.indexOf(channel);
+    onlineChannel.splice(_index, 1);
+    updateChannelList();
+    let dom = $canvas;
+    if (dom.style.display === "none") {
+      dom = $video;
+    }
+    dom.style.display = "none";
+    if (talkInstance[WndIndex]) {
+      talkInstance[WndIndex].talk("off");
+      talkInstance[WndIndex] = null;
+    }
+    if (recordInstance[WndIndex]) {
+      recordInstance[WndIndex].startRecord(false);
+      recordInstance[WndIndex] = null;
+    }
+  }
+};
+/**
+ * @description 自定义选择器
+ * @param {string} str dom元素
+ */
+function $(str) {
+  if (str.charAt(0) == "#") {
+    return document.getElementById(str.substring(1));
+  } else if (str.charAt(0) == ".") {
+    return document.getElementsByClassName(str.substring(1));
+  } else {
+    return document.getElementsByTagName(str);
+  }
+}
+/**
+ * @description 设置样式
+ * @param {object} obj dom元素
+ * @param {*} json css样式
+ */
+function setStyle(obj, json) {
+  for (let i in json) {
+    obj.style[i] = json[i];
+  }
+}
+/**
+ * @description 绑定click事件
+ * @param {object} event event对象
+ */
+function bindClickEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("btn-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+/**
+ * @description 绑定change事件
+ * @param {object} event event对象
+ */
+function bindChangeEvent(event) {
+  let $el = event.target,
+    method = $el.getAttribute("sel-for"),
+    disabled = $el.getAttribute("disabled");
+  if (!disabled) {
+    eval(method + "()");
+  }
+}
+function fullscreenchange() {
+  if (getFull()) {
+    return;
+  }
+}
+init();

public/webs/css/style.css

@@ -13,7 +13,6 @@ html {
     overflow: hidden;
 }
 body {
-<<<<<<< HEAD
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -26,206 +25,8 @@ body {
 .h5-play-wrap {
     width: auto;
     height: auto;
-=======
-    padding:10px;
-    min-width: 1280px;
-    width: 100%;
-    height: 100%;
-    overflow: scroll;
-}
-.h5-left,
-.h5-right {
-    float: left;
-    margin-right: 20px;
-}
-.fn-padl10 {
-    padding-left: 10px;
-}
-.fn-marl10 {
-    margin-left: 10px;
-}
-.fn-clear {
-    clear: both;
-}
-.fn-overflow {
-    overflow: hidden;
-}
-.fn-width100 {
-    width: 100px;
-}
-.fn-marl10 {
-    margin-left: 10px;
-}
-.fn-marl150 {
-    margin-left: 150px;
-}
-.fn-mart10 {
-    margin-top: 10px;
-}
-.fn-fontBlue {
-    color: blue;
-}
-.fn-fontRed {
-    color: red !important;
-}
-.fn-lightBorder {
-    border: 1px solid rgb(255, 204, 0) !important;
-}
-.fn-normalBorder {
-    border: 1px solid rgb(125, 125, 125) !important;
-}
-fieldset {
-    display:block;
-    margin-top: 10px;
-}
-fieldset legend{
-    font-size: 14px;
-}
-.h5-play-wrap {
-    width: 500px;
-    height: 300px;
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
     background-color: #000;
     border: 1px solid #333;
     position: relative;
     overflow: hidden;
 }
-<<<<<<< HEAD
-=======
-.h5-fieldset-wrap {
-    width: 520px;
-    padding: 10px;
-    border: 1px solid #333;
-}
-.h5-form-item {
-    float: left;
-    height: auto;
-    overflow: hidden;
-    margin-bottom: 5px;
-}
-.h5-form-item label {
-    width: 80px;
-    display: inline-block;
-}
-.h5-form-item input {
-    width: 130px;
-}
-.h5-form-item select {
-    width: 134px;
-}
-.h5-form-item span {
-    width: 60px;
-}
-.h5-form-item .h5-button {
-    width: 80px;
-    height: 30px;
-    font-size: 12px;
-}
-.h5-ptz-wrap {
-    width: 210px;
-    float: left;
-}
-.h5-step-wrap {
-    margin-bottom: 10px;
-}
-.h5-zoomfocus-wrap {
-    width: 200px;
-    float: left;
-}
-.h5-preset-wrap {
-    float: left;
-    margin-top: 10px;
-}
-.h5-ptz-wrap .h5-button {
-    width: 60px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-zoomfocus-wrap .h5-button {
-    width: 80px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-preset-wrap .h5-button {
-    width: 60px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-preset-wrap input {
-    width: 130px;
-}
-.h5-table {
-    border-collapse: collapse;
-    background: #ddd;
-    width: 600px;
-    float: left;
-    height: 300px;
-    display: block;
-    overflow-y: scroll;
-}
-.h5-table tbody tr:nth-child(odd) {
-    background-color: #fff;
-}
-
-.h5-table tr td{
-    text-align: center;
-    padding: 5px 0;
-    border: 1px solid #999;
-}
-.h5-table tr:hover{
-    cursor: text;
-}
-a.i-download {
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin: 0 auto;
-    cursor: pointer;
-    background: #cccccc;
-    border-radius: 50%;
-}
-a.i-download:hover {
-    background: #999;
-}
-.h5-page {
-    text-align: right;
-    margin-top: 10px;
-    margin-right: 18px;
-    display: block;
-    float: left;
-}
-.h5-ul {
-    float: left;
-    background: #ccc;
-    list-style: none;
-    max-height: 250px;
-    overflow-y: scroll;
-}
-.h5-ul li {
-    cursor: pointer;
-    height: 20px;
-    line-height: 20px;
-}
-.h5-ul li:hover {
-    background-color: #eee;
-}
-.video_loading{
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: #fff;
-}
-.h5-menu-list {
-    margin-top: 40px;
-    background-color: #ccc;
-}
-.h5-menu-list li {
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    cursor: pointer;
-}
-.h5-menu-list li:hover {
-    background-color: #eee;
-}
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e

public/webs/index.js

@@ -157,14 +157,9 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     return;
   }
   onStopPreview();
-<<<<<<< HEAD
   var player = null
   let options = {
     
-=======
-  var player = null;
-  let options = {
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
     wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
     rtspURL:
       "rtsp://" +

src/views/Zhou/ZNYWJK.vue

@@ -25,7 +25,7 @@
             ></iframe
             >;
             <p class="h_footer">
-              <span class="time">{{ dates }}</span>
+              <!-- <span class="time">{{ dates }}</span> -->
               <img
                 src="../../assets/ZNYWJK/放大.png"
                 alt=""
@@ -199,12 +199,7 @@
     </div>
   </div>
 </template>
-<<<<<<< HEAD
-=======
-<script src="../../../public/webs/module/PlayerControl"></script>
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
 <script>
-import moment from "moment";
 import screenfull from "screenfull";
 export default {
   data() {
@@ -427,7 +422,7 @@ export default {
           name: "2#窑",
         },
       ],
-      dates: new Date(),
+      // dates: new Date(),
       isFullScreenTag: false,
     };
   },
@@ -468,17 +463,7 @@ export default {
     //   })
     // }
   },
-  mounted() {
+  mounted() {},
-    setInterval(() => {
-      moment.locale("zh-cn");
-      // 获取当前时间
-      const currentTime = moment();
-      // 格式化时间为指定格式：年-月-日 星期几 时分秒
-      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
-      // 输出格式化后的时间
-      this.dates = formattedTime;
-    }, 100);
-  },
 };
 </script>
 <style scoped lang="less">
@@ -719,6 +704,7 @@ export default {
           width: 5px;
           height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
           border-radius: 10px;
+          background: transparent;
         }
         // 滑块
         ::-webkit-scrollbar-thumb {
@@ -731,7 +717,26 @@ export default {
         // 轨道
         ::-webkit-scrollbar-track {
           border-radius: 10px;
-          background-color: #fff;
+          background: url(../../assets/ZNYWJK/滑动条.png);
+          background-size: cover;
+          background-color: #f00;
+        }
+        /* 选中滚动条按钮 */
+        ::-webkit-scrollbar-button{
+          background-color: #f00;
+          display: block;
+        }
+
+        /* 选中向上箭头 */
+        ::-webkit-scrollbar-button:start{
+          display: none !important;
+          height: 0px;
+        }
+
+        /* 选中向下箭头 */
+        ::-webkit-scrollbar-button:end{
+          display: none !important;
+          height: 0px;
         }
         .spjk_one {
           width: 551px;