flx:企业视频监控大屏新增分页功能

src/assets/js/http.js

@@ -208,7 +208,7 @@ if (process.env.NODE_ENV == "development") {
     // axios.defaults.baseURL = "http://139.9.66.234:20628";
     // axios.defaults.baseURL = "http://jxj.zhgdyun.com:9500";
     // axios.defaults.baseURL = "http://jxj.zhgdyun.com:21000"; // 潮州
-    // axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
+    axios.defaults.baseURL = "http://gszhdz.crpower.com.cn:9809/"; // 敦煌
     // axios.defaults.baseURL = "https://gszhdz.crpower.com.cn:9807/"; // 敦煌
 } else if (process.env.NODE_ENV == "debug") {
     axios.defaults.baseURL = "https://www.ceshi.com";

src/components/videoModule/isc_plugin/isc_plugin.vue

@@ -1,15 +1,25 @@
 <template>
+  <div class="paly-box">
     <div id="playWnd"></div>
+    <div class="bg-001" v-if="pageBtn">
+      <div :class="{'page-box1': pageNo > 1}" @click="onPageClick('up')">
+        <div class="page-up"></div>
+      </div>
+      <div :class="{'page-box1': pageNo < pageSizeFlag}" @click="onPageClick('next')">
+        <div class="page-down"></div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 let closeVideo=null
 import {
   OpenVideo,
   unInitObjPlugin,
-  InitObjPlugin, hidePluginWindow, showPluginWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
+  InitObjPlugin, hidePluginWindow,getCurrentLayout, showPluginWindow, closeAllVideo, cuttingPartWindow, resizeFn, isLoadPlugin, setWidthAndHeight, setOffset
 } from "./video_isc_plugin.js";
 export default {
-  props: ["devList", "type", 'isIframe'],
+  props: ["devList", "type", 'isIframe', "devListAll"],
   watch: {
     //监听value的变化，进行相应的操作即可
     devList: function (a, b) {
@@ -38,20 +48,19 @@ export default {
     },
 
   },
-  computed: {
-    isExpand() {
-      return this.$store.state.isExpand;
-    }
-  },
 
   data() {
     return {
-      layout: ''
+      layout: '',
+      pageNo: 1,
+      pageBtn: false,
     }
   },
   created() {
+    if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
+      this.pageBtn = true;
+    }
     if (COMPANY == 'xingxuan') { setWidthAndHeight(633, 381); }
-
     this.$EventBus.$on("controlVideoShowOrHide", (data) => {
       console.log('controlVideoShowOrHide', data)
       if (data == 'hide') {
@@ -93,7 +102,18 @@ export default {
     //       this.devList,layout
     // );
     if (this.devList.length > 0) {
-      isLoadPlugin(this.devList, this.layout)
+      isLoadPlugin(this.devList, this.layout);
+      // this.$nextTick(() => {
+      //   setTimeout(() => {
+      //     const playWnd = document.getElementById('playWnd');
+      //     console.log(7777, playWnd, playWnd.offsetWidth, playWnd.offsetHeight)
+      //     const iHeight = 50;
+      //     const iWidth = 200;
+      //     const iTop = playWnd.offsetHeight - iHeight;
+      //     const iLeft = (playWnd.offsetWidth / 2) - iWidth;
+      //     cuttingPartWindow(iLeft, iTop, iWidth, iHeight)
+      //   }, 500)
+      // })
     }
   },
   beforeDestroy() {
@@ -101,8 +121,56 @@ export default {
     unInitObjPlugin();
   },
   methods: {
-
+    async onPageClick(type) {
+      const data = await getCurrentLayout();
+      // console.log("data11", data);
+      if(data.responseMsg.msg == "success") {
+        const dataInfo = JSON.parse(data.responseMsg.data);
+        console.log("data11", dataInfo);
+        this.layout = dataInfo.layout;
       }
+      if(type == "up") {
+        if(this.pageNo <= 1) return;
+        this.pageNo -= 1;
+      } else if(type == "next") {
+        console.log("pageNo", this.pageSizeFlag);
+        if(this.pageNo >= this.pageSizeFlag) return;
+        this.pageNo += 1;
+      }
+      const dataList = this.pageList;
+      closeAllVideo();
+      isLoadPlugin(dataList, this.layout);
+      console.log("dataList", dataList, this.layout);
+    },
+  },
+  computed: {
+    pageList() {
+        const pageSize = this.numCount;
+        return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize)
+    },
+    numCount() {
+      const numCountList = this.layout.match(/\d+(\.\d+)?/g);
+      if(!(numCountList instanceof Array)) {
+        return 0;
+      }
+      return numCountList.reduce((prev, item) => {
+        if(prev == 0) {
+          return parseInt(item)
+        } else {
+          return prev * parseInt(item)
+        }
+      }, 0)
+    },
+    pageSizeFlag() {
+      
+      console.log("aassss", this.devListAll.length, this.numCount)
+
+      return this.devListAll.length / (this.numCount)
+    },
+    isExpand() {
+      return this.$store.state.isExpand;
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -110,4 +178,57 @@ export default {
   width: 100%;
   height: 100%;
 }
+.paly-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.bg-001 {
+  height: 100%;
+  background: #001e53;
+  position: absolute;
+  right: -16px;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  > div {
+    height: 50%;
+    background: rgba(86, 188, 251, 0.2);
+    // pointer-events: none;
+    cursor: not-allowed;
+    > div {
+      width: 16px;
+      height: 100%;
+      background-image: url("~@/assets/images/videoSurveillance/page-icon.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+    }
+    .page-down {
+      background-image: url("~@/assets/images/videoSurveillance/page-icon_active.png");
+    }
+    > div::after {
+      content: "";
+      width: 9px;
+      height: 11px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  > div:first-child > div::after {
+    background-image: url("~@/assets/images/videoSurveillance/page-icon_up.png");
+      bottom: 35px;
+  }
+  > div:last-child > div::after  {
+    background-image: url("~@/assets/images/videoSurveillance/page-icon_down.png");
+    top: 35px;
+  }
+  .page-box1 {
+    background: rgba(86, 188, 251, 0.4);
+    cursor: pointer;
+  }
+}
 </style>

src/components/videoModule/isc_plugin/isc_plugin_h5.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="player-main">
+  <div id="player-main" :class="{'player-main1': pageBtn}">
     <div id="player"></div>
     <!-- 为每个窗口添加控制按钮容器 -->
     <div
@@ -97,6 +97,14 @@
         ></div>
       </el-tooltip>
     </div>
+    <div class="bg-001" v-if="pageBtn">
+      <div :class="{'page-box1': pageNo > 1}" @click="onPageClick('up')">
+        <div class="page-up"></div>
+      </div>
+      <div :class="{'page-box1': pageNo < pageSizeFlag}" @click="onPageClick('next')">
+        <div class="page-down"></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -111,7 +119,7 @@ import reloadImg from "@/assets/images/iscImage/reload.png";
 import moment from "moment";
 export default {
   name: "hik",
-  props: ["devList", "type", "isIframe", "shrinkCloseFlag"],
+  props: ["devList", "type", "isIframe", "shrinkCloseFlag", "devListAll"],
   data() {
     return {
       // 监控点编码
@@ -135,6 +143,8 @@ export default {
       isFullScreen: false,
       isFullScreenAll: false,
       randomNumber: "",
+      pageNo: 1,
+      pageBtn: false,
     };
   },
   watch: {
@@ -207,6 +217,11 @@ export default {
       this.onTwoSubmit(this.numCount);
     },
   },
+  created() {
+    if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
+      this.pageBtn = true;
+    }
+  },
   mounted() {
     this.devH5List = this.devList.map((item, index) => ({
       ...item,
@@ -217,19 +232,44 @@ export default {
     this.initPlayer();
   },
   methods: {
+    onPageClick(type) {
+      if(type == "up") {
+        if(this.pageNo <= 1) return;
+        this.pageNo -= 1;
+      } else if(type == "next") {
+        console.log("pageNo", this.pageSizeFlag);
+        if(this.pageNo >= this.pageSizeFlag) return;
+        this.pageNo += 1;
+      }
+      const dataList = this.pageList;
+      this.devH5List = dataList.map((item, index) => ({
+        ...item,
+        eIndex: index,
+      }));
+      this.devH5List.forEach((item) => {
+        this.play(item,item.eIndex);
+      })
+      console.log("dataList", dataList, this.pageNo);
+    },
     // 关闭所有视频
     stopAllPlay() {
+      // 调用播放器API停止所有实时播放
       this.player.JS_StopRealPlayAll().then(
         () => {
+          // 重置播放速率为0
           this.playback.rate = 0;
           console.log("stopAllPlay success");
+          // 遍历所有设备，清理对应的DOM元素
           this.devH5List.forEach((item, index) => {
+            // 查找视频播放容器
             const wnd = document.querySelector(`#player #player-container-${index}`);
             if (wnd) {
+              // 移除控制栏的显示样式
               const controls = document.getElementById(`controls-${index + 1}`);
               if (controls) {
                 controls.classList.remove("video-controls_flex");
               }
+              // 查找并移除播放器中的图片元素（封面或占位图）
               const findIndex = Array.from(wnd.childNodes).findIndex(
                 (item) => item.localName == "img" || item.className == "classImg"
               );
@@ -238,6 +278,7 @@ export default {
               }
             }
           });
+          // 清空设备列表
           this.devH5List = [];
         },
         (e) => {
@@ -775,6 +816,15 @@ export default {
         return find ? find.videoName : "";
       };
     },
+    pageList() {
+        const pageSize = this.numCount * this.numCount;
+        return this.devListAll.slice((this.pageNo - 1) * pageSize, this.pageNo * pageSize)
+    },
+    pageSizeFlag() {
+      console.log("aassss", this.devListAll.length, (this.numCount * this.numCount))
+
+      return this.devListAll.length / (this.numCount * this.numCount)
+    }
   },
 };
 </script>
@@ -784,6 +834,54 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+.bg-001 {
+  height: 100%;
+  background: #001e53;
+  position: absolute;
+  right: -16px;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  > div {
+    height: 50%;
+    background: rgba(86, 188, 251, 0.2);
+    // pointer-events: none;
+    cursor: not-allowed;
+    > div {
+      width: 16px;
+      height: 100%;
+      background-image: url("~@/assets/images/videoSurveillance/page-icon.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+    }
+    .page-down {
+      background-image: url("~@/assets/images/videoSurveillance/page-icon_active.png");
+    }
+    > div::after {
+      content: "";
+      width: 9px;
+      height: 11px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  > div:first-child > div::after {
+    background-image: url("~@/assets/images/videoSurveillance/page-icon_up.png");
+      bottom: 35px;
+  }
+  > div:last-child > div::after  {
+    background-image: url("~@/assets/images/videoSurveillance/page-icon_down.png");
+    top: 35px;
+  }
+  .page-box1 {
+    background: rgba(86, 188, 251, 0.4);
+    cursor: pointer;
+  }
+}
 :deep(.classImg) {
   color: rgba(255, 255, 255, 0.5);
   font-size: 16px;
@@ -907,9 +1005,13 @@ export default {
   }
 }
 #player-main {
-  width: 100%;
+  width: calc(100%);
   height: 100%;
 }
+.player-main1 {
+  width: calc(100% - 16px) !important;
+  position: relative;
+}
 #player {
   width: 100%;
   height: calc(100% - 40px);

src/components/videoModule/isc_plugin/video_isc_plugin.js

@@ -266,7 +266,7 @@ export function InitObjPlugin(appkey, secret, ip, port, type, videoData, layout)
 
 }
 //初始化
-function init(videoData) {
+export function init(videoData) {
   console.log(222222222222, videoData)
   getPubKey(function () {
     ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
@@ -507,3 +507,20 @@ export function setWidthAndHeight(width, height) {
   oWebControl.JS_Resize(width, height);
 
 }
+// JS_CuttingPartWindow
+export function cuttingPartWindow(iLeft, iTop, iWidth, iHeight) {
+  oWebControl.JS_CuttingPartWindow(iLeft, iTop, iWidth, iHeight)
+}
+// 关闭所有视频
+export function closeAllVideo() {
+  oWebControl.JS_RequestInterface({
+    funcName: "stopAllPreview"
+  });
+}
+// 获取当前布局
+export const getCurrentLayout = async () => {
+  const data = await oWebControl.JS_RequestInterface({
+    funcName: "getLayout"
+  });
+  return data;
+}

src/components/videoModule/videoModule.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 下拉框选择视频，需传入视频列表 -->
-  <div class="fullHeight videoOverview" id="videoOverview">
+  <div class="fullHeight videoOverview" id="videoOverview" :class="{'videoOverview1': pageBtn}">
     <!-- <div v-show="showPlaybacks" class="videoTop">
       <span
         class="videoType"
@@ -36,6 +36,7 @@
         :type="type"
         :isIframe="isIframe"
         :devList="devList"
+        :devListAll="devListAll"
         v-if="isWindows() && $store.state.forceH5Play == 0"
         :class="{
           isDockingToWoer: isDockingToWoer,
@@ -49,6 +50,7 @@
         :type="type"
         :isIframe="isIframe"
         :devList="devList"
+        :devListAll="devListAll"
         :shrinkCloseFlag="shrinkCloseFlag"
         :class="{
           isDockingToWoer: isDockingToWoer,
@@ -337,6 +339,7 @@ export default {
     "xxx",
     "showPlayback",
     "shrinkCloseFlag",
+    "devListAll"
   ],
   components: {
     ysyPlayAndPlayback,
@@ -410,12 +413,16 @@ export default {
       isFullScreen: false,
       select: 1,
       layoutOptions: [],
+      pageBtn: false,
     };
   },
   destroy() {
     hidePluginWindow();
   },
   created() {
+    if(this.$route.path.indexOf("/companyAdmin/videoSurveillance") != -1) {
+      this.pageBtn = true;
+    }
     this.layoutOptions = [
       {
         value: 1,
@@ -923,6 +930,9 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "./videoModule.less";
+.videoOverview1 {
+  width: calc(100% - 32px) !important;
+}
 .isDockingToWoer {
   position: relative;
   left: 58px;

src/views/companyAdmin/companyBigScreen/videoSurveillance/areaTree.vue

@@ -12,7 +12,7 @@
       <div
         class="top-container"
         :class="{
-          treeBox_scroll1: (!isWindows() || $store.state.forceH5Play == 1),
+          treeBox_scroll1: !isWindows() || $store.state.forceH5Play == 1,
           treeBox_scroll2: (!isWindows() || $store.state.forceH5Play == 1) && isDragging,
         }"
       >
@@ -133,7 +133,7 @@
         </div>
       </div>
 
-      <div class="control_main" v-if="(!isWindows() || $store.state.forceH5Play == 1)">
+      <div class="control_main" v-if="!isWindows() || $store.state.forceH5Play == 1">
         <div class="header-box header_gauge">
           <div class="header-text">云台</div>
           <div
@@ -251,7 +251,7 @@ export default {
 
           this.videoConfigInfo = res.result;
           if (type == "all") {
-            if ((!isWindows() || $store.state.forceH5Play == 1)) {
+            if (!isWindows() || $store.state.forceH5Play == 1) {
               this.$emit(
                 "playParams",
                 itemList.filter((item, index) => index < 16)
@@ -347,6 +347,7 @@ export default {
           console.log("resultList", resultList, this.treeData);
           this.videoConfigInfo = resultList[0].projectVideoConfig;
           // this.getProjectVideoConfigList(resultList[0]);
+          const resultListAll = this.recursiveFilterList(this.treeData, 10000);
 
           this.$emit(
             "playParams",
@@ -357,6 +358,14 @@ export default {
                 // videoType: item.projectVideoConfig.videoType,
                 // projectSn: item.projectVideoConfig.projectSn,
               };
+            }),
+            resultListAll.map((item) => {
+              return {
+                ...item.videoItem,
+                ...item.projectVideoConfig,
+                // videoType: item.projectVideoConfig.videoType,
+                // projectSn: item.projectVideoConfig.projectSn,
+              };
             })
           );
         }
@@ -378,7 +387,7 @@ export default {
     },
     recursiveFilterList(dataList, rountCount = 4, resultList = []) {
       return dataList.reduce((prev, cur) => {
-        console.log("当前的列表", cur);
+        // console.log("当前的列表", cur);
         if (resultList.length >= rountCount) return prev;
         if (cur.children && cur.children.length > 0) {
           this.recursiveFilterList(cur.children, rountCount, resultList);
@@ -399,6 +408,7 @@ export default {
       const resultList = this.recursiveFilterList(dataList, 16);
       console.log("resultList", resultList, dataList);
       this.videoConfigInfo = resultList[0].projectVideoConfig;
+      const resultListAll = this.recursiveFilterList(dataList, 10000);
       // this.getProjectVideoConfigList(resultList[0]);
       this.$emit(
         "playParams",
@@ -409,6 +419,12 @@ export default {
             // videoType: item.projectVideoConfig.videoType,
             // projectSn: item.projectVideoConfig.projectSn,
           };
+        }),
+        resultListAll.map((item) => {
+          return {
+            ...item.videoItem,
+            ...item.projectVideoConfig,
+          };
         })
       );
     },

src/views/companyAdmin/companyBigScreen/videoSurveillance/videoLargeScreen.vue

@@ -15,6 +15,7 @@
       <videoModule
         class="playVideoBox"
         :value="devList"
+        :devListAll="devListAll"
         :shrinkCloseFlag="shrinkCloseFlag"
         :type="'company'"
         :class="isExpand ? '' : 'big'"
@@ -47,6 +48,7 @@ export default {
       isDockingToWoer: false,
       selectPlayVideoInfo: {},
       shrinkCloseFlag: false,
+      devListAll: [],
     };
   },
   mounted() {
@@ -64,9 +66,12 @@ export default {
       this.isExpand = !this.isExpand;
       this.$store.commit("setIsExpand", this.isExpand);
     },
-    getPlayParams(data) {
+    getPlayParams(data, dataAll) {
       console.log("playVideo.vue拿到设备列表", data);
       this.devList = data;
+      if(dataAll) {
+        this.devListAll = dataAll;
+      }
     },
     shrinkCloseChange(val) {
       this.shrinkCloseFlag = val;

src/views/equipmentCenter/videoManage/videoConfig.vue

@@ -1081,12 +1081,12 @@
                 <el-radio :label="0">否</el-radio>
               </el-radio-group>
             </el-form-item> -->
-            <div class="message-tip">
+            <!-- <div class="message-tip">
               <i class="el-icon-warning"></i>
               <div>
                 无插件播放集成海康h5Player视频播放器，h5player是一个基于HTML5的流式网络视频播放器无需安装浏览器插件即可通过websocket协议向媒体服务取流播放多种格式的音视频流。
               </div>
-            </div>
+            </div> -->
           </template>
           <el-form-item v-if="videoType == '7'" label="ip">
             <el-input