视频管理-模块自定义分屏功能、云联万物修改

src/components/videoModule/videoModule.vue

@@ -25,6 +25,11 @@
       :url="urls"
       :token="lcToken"
     ></leCheng>
+    <YsyNew
+      :ref="'ysy'"
+      v-if="pluginType == 'ysy'"
+      :ysyParams="ysyParams"
+    ></YsyNew>
     <iscPlugin
       v-else-if="pluginType == 'isc' && videoType == 1"
       :type="type"
@@ -64,11 +69,7 @@
           v-if="pluginType == 'ysy'"
           :ysyParams="ysyParams"
         ></ysyPlayAndPlayback> -->
-        <YsyNew
+
-          :ref="'ysy' + item"
-          v-if="pluginType == 'ysy'"
-          :ysyParams="ysyParams"
-        ></YsyNew>
         <ckPlayer
           @selectWin="selectWin"
           :showSelectBtn="true"
@@ -339,11 +340,7 @@ export default {
       showPlaybacks: false, //是否显示视频回放按钮
       pluginType: '', //ysy:萤石云   videojs     ckPlayer  lecheng  isc  xiongmai
       initDivNum: 9,
-      ysyParams: {
+      ysyParams: [],
-        url: '',
-        accessToken:
-          'at.3goo7ob2dic9amkg5ycg4n5yak9jtpf2-2dn1vwm6z3-134xqr4-td1bh38w2'
-      },
       urls: ['', '', '', '', '', '', '', '', ''],
       lcToken: '',
       isDockingToWoer: false,
@@ -491,7 +488,13 @@ export default {
       //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标，7国密
       switch (Number(this.devList[0].videoType)) {
         case 1:
-          this.ysyParams = this.devList[0]
+          if (this.devList.length > 1) {
+            this.ysyParams = this.devList
+          } else if (this.devList.length == 1) {
+            let arr = []
+            arr.push(this.devList[0])
+            this.ysyParams = arr
+          }
           //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
           var videoType = this.devList[0].videoType
           var playType = this.devList[0].playType

src/views/equipmentCenter/videoManage/videoConfig.vue

@@ -1287,7 +1287,7 @@ export default {
         },
         {
           label: '洗轮机',
-          value: 'JKDWZ00'
+          value: 'JKDWZ005'
         },
         {
           label: '围墙',

src/views/projectFront/videoManage/overview.vue

@@ -4,32 +4,49 @@
     <div class="header"></div>
     <div class="videoContent">
       <div class="videoListBox fullHeight">
-        <div class="pageTitle">
+        <div class="pageTitle">视频列表</div>
-          视频列表
+        <div class="videoBox" v-if="dataType == 1">
-        </div>
-        <div class="videoBox" v-if="dataType==1">
           <vue-scroll>
-            <ul v-if="devList.length>0">
+            <ul v-if="devList.length > 0">
-              <li @click="changeVideo(item)" v-for="(item,index) in devList" :key="index">
+              <li
-                <img v-if="item.deviceType==2" src="@/assets/images/icon-video2-white.png">
+                @click="changeVideo(item)"
-                  <img v-else src="@/assets/images/icon-video-white.png">
+                v-for="(item, index) in devList"
-                {{item.videoName}}
+                :key="index"
+              >
+                <img
+                  v-if="item.deviceType == 2"
+                  src="@/assets/images/icon-video2-white.png"
+                />
+                <img v-else src="@/assets/images/icon-video-white.png" />
+                {{ item.videoName }}
               </li>
             </ul>
             <div class="placeholderBox" v-else>
-              <img src="@/assets/images/noData2-dark.png" alt="" srcset="">
+              <img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
             </div>
           </vue-scroll>
         </div>
         <div class="videoBox" v-else>
           <vue-scroll>
-            <el-collapse v-model="activeNames" style="padding:0 20px">
+            <el-collapse v-model="activeNames" style="padding: 0 20px">
-              <el-collapse-item :title="item.name" :name="index" v-for="(item,index) in devList" :key="index">
+              <el-collapse-item
-                <ul v-if="item.list.length>0">
+                :title="item.name"
-                  <li @click="changeVideo(data)" v-for="(data,index2) in item.list" :key="index2">
+                :name="index"
-                    <img v-if="data.deviceType==2" src="@/assets/images/icon-video2-white.png">
+                v-for="(item, index) in devList"
-                      <img v-else src="@/assets/images/icon-video-white.png">
+                :key="index"
-                    {{data.videoName}}
+              >
+                <ul v-if="item.list.length > 0">
+                  <li
+                    @click="changeVideo(data)"
+                    v-for="(data, index2) in item.list"
+                    :key="index2"
+                  >
+                    <img
+                      v-if="data.deviceType == 2"
+                      src="@/assets/images/icon-video2-white.png"
+                    />
+                    <img v-else src="@/assets/images/icon-video-white.png" />
+                    {{ data.videoName }}
                   </li>
                 </ul>
               </el-collapse-item>
@@ -37,7 +54,8 @@
           </vue-scroll>
         </div>
       </div>
-      <videoModule  class="playVideoBox"
+      <videoModule
+        class="playVideoBox"
         :type="'project'"
         :value="selectList"
         :displayBottomMod="false"
@@ -52,106 +70,110 @@
   </div>
 </template>
 <script>
-import { selectProjectVideoListApi,selectUserVideoListApi } from "@/assets/js/api/equipmentCenter/cameraList";
+import {
-import videoModule from "@/components/videoModule/videoModule.vue";
+  selectProjectVideoListApi,
-import closePage from "@/components/closePage"
+  selectUserVideoListApi
+} from '@/assets/js/api/equipmentCenter/cameraList'
+import videoModule from '@/components/videoModule/videoModule.vue'
+import closePage from '@/components/closePage'
 export default {
-  components: { videoModule,closePage },
+  components: { videoModule, closePage },
   data() {
     return {
       devList: [],
-      selectList:[],
+      selectList: [],
-      dataType:1,
+      dataType: 1,
       activeNames: [0],
-      screens:{},
+      screens: {},
-      pluginType:'',
+      pluginType: ''
-    };
+    }
   },
   mounted() {
     // console.dir(window.parent)
     // console.log(window.parent.document.getElementById("myFrame"), 12312313)
-    if(this.$store.state.userInfo.accountType!=6){
+    if (this.$store.state.userInfo.accountType != 6) {
       this.loadData()
-    }else{
+    } else {
       this.loadData2()
-    } 
+    }
   },
 
   methods: {
-    changeVideo(item){
+    changeVideo(item) {
-      console.log(item, 'xxxxxxxxxx');
+      console.log(item, 'xxxxxxxxxx')
-      this.selectList=[item]
+      this.selectList = [item]
-      console.log('右边的值',this.selectList)
+      console.log('右边的值', this.selectList)
     },
     loadData() {
       selectProjectVideoListApi({
         projectSn: this.$store.state.projectSn
       }).then((res) => {
-        var DATA = res.result.videoList;
+        var DATA = res.result.videoList
-        this.devList=DATA
+        this.devList = DATA
-        console.log('视频的列表',res.result)
+        this.selectList = this.devList
-        this.dataType=res.result.type
+        console.log('视频的列表', res.result)
-      });
+        this.dataType = res.result.type
+      })
     },
     loadData2() {
       selectUserVideoListApi({
         projectSn: this.$store.state.projectSn,
-        userId:this.$store.state.userInfo.userId
+        userId: this.$store.state.userInfo.userId
       }).then((res) => {
-        var DATA = res.result.videoList;
+        var DATA = res.result.videoList
-        this.devList=DATA
+        this.devList = DATA
-        this.dataType=res.result.type
+        this.dataType = res.result.type
-      });
+      })
-    },
+    }
-  },
+  }
-};
+}
 </script>
 <style lang="less" scoped>
-@import "./style.less";
+@import './style.less';
-.videoListBox{
+.videoListBox {
   float: left;
   width: 300px;
   color: white;
   background-color: #01112d;
 }
-.pageTitle{
+.pageTitle {
   margin: 12px 0;
   background-color: #01112d;
-  &::before{
+  &::before {
     background-color: #00fafa;
   }
-  
 }
-.videoBox{
+.videoBox {
   background-color: #00091a;
   height: calc(100% - 52px);
   margin: 0 15px 0 0;
   position: relative;
-  li{
+  li {
     padding: 10px 25px;
     font-size: 15px;
     cursor: pointer;
     display: flex;
     align-items: center;
-    img{
+    img {
       margin-right: 8px;
     }
-    &:hover{
+    &:hover {
       background-color: #003e4b;
     }
   }
-  /deep/.el-collapse-item__header,/deep/.el-collapse-item__wrap{
+  /deep/.el-collapse-item__header,
+  /deep/.el-collapse-item__wrap {
     background-color: transparent;
     color: white;
   }
-  /deep/.el-collapse-item__content{
+  /deep/.el-collapse-item__content {
     color: white;
     padding-bottom: 0;
   }
 }
-/deep/.playVideoBox{
+/deep/.playVideoBox {
-    background-color: #030303;
+  background-color: #030303;
-    float: left;
+  float: left;
-    width: calc(100% - 300px);
+  width: calc(100% - 300px);
 }
 </style>

src/views/projectFront/videoManage/ysyNew.vue

@@ -18,170 +18,17 @@
             :class="select == 1 ? 'width' : select == 2 ? 'width2' : 'width3'"
             style="position: relative"
           >
-            <div
+            <!-- <div
               :id="'video-cover' + item"
               class="video-cover"
               :class="{
                 'video-active': selectVideo == item
               }"
-            ></div>
+            ></div> -->
-            <div id="video-container"></div>
+            <div :id="'video-container' + item"></div>
-            <!-- <div :id="'video-container' + item"></div> -->
           </div>
         </div>
       </div>
-      <!-- 右边操作区 -->
-      <!-- <div class="right">
-        <el-input
-          style="width: 15.625rem; position: relative; left: 1.875rem"
-          placeholder="请输入设备名称"
-          prefix-icon="el-icon-search"
-          v-model="search"
-          clearable
-        ></el-input>
-        <div
-          v-if="searchList.length"
-          style="
-            width: 91%;
-            position: relative;
-            left: 1.25rem;
-            height: 50%;
-            overflow: auto;
-            top: 0.3125rem;
-          "
-        >
-          <div
-            v-for="(camera, index) in searchList"
-            @click="selectCamera2(camera)"
-            :key="index"
-            :style="
-              cameraList[selectVideo - 1].ipcSerial == camera.ipcSerial
-                ? 'color:#0079e0'
-                : ''
-            "
-            style="width: 100%; height: 2rem; cursor: pointer"
-          >
-            <span
-              v-if="camera.status"
-              style="
-                width: 0.5rem;
-                height: 0.5rem;
-                borderradius: 50%;
-                background: #0cdc8c;
-                display: inline-block;
-                margin-right: 0.9375rem;
-              "
-            ></span>
-            <span
-              v-else
-              style="
-                width: 0.5rem;
-                height: 0.5rem;
-                borderradius: 50%;
-                background: #aaa;
-                display: inline-block;
-                margin-right: 0.9375rem;
-              "
-            ></span>
-            {{ camera.channelName }}
-          </div>
-        </div>
-        <div
-          v-else
-          style="
-            width: 91%;
-            position: relative;
-            left: 1.25rem;
-            height: 50%;
-            overflow: auto;
-            top: 0.3125rem;
-          "
-        >
-          <div
-            v-for="(camera, index) in cameraList"
-            @click="selectCamera(camera, index)"
-            :key="index"
-            :style="
-              cameraList[selectVideo - 1].ipcSerial == camera.ipcSerial
-                ? 'color:#0079e0'
-                : ''
-            "
-            style="width: 100%; height: 2rem; cursor: pointer"
-          >
-            <span
-              v-if="camera.status"
-              style="
-                width: 0.5rem;
-                height: 0.5rem;
-                borderradius: 50%;
-                background: #0cdc8c;
-                display: inline-block;
-                margin-right: 0.9375rem;
-              "
-            ></span>
-            <span
-              v-else
-              style="
-                width: 0.5rem;
-                height: 0.5rem;
-                borderradius: 50%;
-                background: #aaa;
-                display: inline-block;
-                margin-right: 0.9375rem;
-              "
-            ></span>
-            {{ camera.channelName }}
-          </div>
-        </div>
-        <div class="btns">
-          <div class="wheel">
-            <div @click="deviceCapture" class="camera">
-              <i class="el-icon-camera"></i>
-            </div>
-            <div class="top">
-              <div
-                @click="startPTZCtrl('0')"
-                class="triangle triangle-top"
-              ></div>
-            </div>
-            <div class="center">
-              <div class="center-left">
-                <div
-                  @click="startPTZCtrl('2')"
-                  class="triangle triangle-left"
-                ></div>
-              </div>
-              <div class="center-right">
-                <div
-                  @click="startPTZCtrl('3')"
-                  class="triangle triangle-right"
-                ></div>
-              </div>
-            </div>
-            <div class="bottom">
-              <div
-                @click="startPTZCtrl('1')"
-                class="triangle triangle-bottom"
-              ></div>
-            </div>
-          </div>
-          <div class="two-btn">
-            <el-button @click="startPTZCtrl('9')" size="mini" type="primary"
-              >-</el-button
-            >
-            <el-button @click="startPTZCtrl('8')" size="mini" type="primary"
-              >+</el-button
-            >
-          </div>
-          <el-button
-            class="right-btn"
-            @click="showAllScreen"
-            size="small"
-            type="primary"
-            >全屏显示</el-button
-          >
-        </div>
-      </div> -->
     </div>
     <!-- 底部切屏按钮 -->
     <div
@@ -220,18 +67,6 @@
       />
       <img class="rect" v-else src="@/assets/images/videoThree.png" alt />
     </div>
-    <!-- <div
-      @click="select = 4"
-      style="position: absolute;left:8.25rem;top:94.5vh;cursor: pointer;"
-    >
-      <img
-        class="rect"
-        v-if="select == 4"
-        src="../../assets/images1/nine_1.png"
-        alt
-      />
-      <img class="rect" v-else src="../../assets/images1/nine.png" alt />
-    </div> -->
   </div>
 </template>
 <script>
@@ -252,117 +87,89 @@ export default {
       selectVideoFirst: 1,
       search: '', // 搜索框
       searchList: [],
-      devList: []
+      devList: [],
+      demoList: [],
+      sceencount: 1, // 当前窗口是几分屏（1、4、9）
+      indextest: 0
     }
   },
   created() {},
   mounted() {
+    //向父组件取的数据
     this.devList = this.$props.ysyParams
     console.log('this.$props.ysyParams', this.$props.ysyParams)
-    this.ysyBtn()
+    this.ysyBtn(this.devList, this.indextest, this.sceencount)
   },
   watch: {
-    // 选择显示video数量
+    ysyParams: function (a, b) {
-    select(value) {
+      console.log('父组件传递的数据 ysyParams  :', a)
-      this.select = value
+      this.indextest++
-      this.cameraList.forEach((item, index) => {
+      console.log('父组件传递的数据 this.devList  :', this.devList)
-        if (value == 1) {
+
-          if (item.code == 200)
+      var index = this.devList.findIndex((item) => item.url == a[0].url)
-            item.player.reSize(
+      this.selectVideoFirst = index + 1
-              this.$refs.videoBox.offsetWidth,
+      // this.select = 1
-              this.$refs.videoBox.offsetHeight
+      // this.devList.forEach((item, index) => {
-            )
+      //   if (item.url == a[0].url) {
-        } else if (value == 2) {
+      //     item.player.reSize(
-          if (item.code == 200)
+      //       this.$refs.videoBox.offsetWidth,
-            item.player.reSize(
+      //       this.$refs.videoBox.offsetHeight
-              this.$refs.videoBox.offsetWidth / 2 - 2,
+      //     )
-              this.$refs.videoBox.offsetHeight / 2 - 2
+      //   }
-            )
+      // })
-        } else if (value == 3) {
-          if (item.code == 200)
-            item.player.reSize(
-              this.$refs.videoBox.offsetWidth / 3,
-              this.$refs.videoBox.offsetHeight / 3
-            )
-        }
-        // else {
-        //   if (item.code == 200)
-        //     item.player.reSize(
-        //       this.$refs.videoBox.offsetWidth / 4,
-        //       this.$refs.videoBox.offsetHeight / 4
-        //     );
-        // }
-      })
     },
-    search(value) {
+    select: function (value, b) {
-      if (value) {
+      this.indextest = 0
-        this.searchList = this.cameraList.filter(
+      console.log('选择显示video数量 :', this.devList)
-          (item) => item.channelName.indexOf(value) > -1
+      this.select = value
-        )
+      this.selectVideoFirst = 1
-      } else {
+      this.devList.forEach((item, index) => {
-        this.searchList = []
+        // item.player.stop()
-      }
+        if (value == 1) {
+          item.player.reSize(
+            this.$refs.videoBox.offsetWidth,
+            this.$refs.videoBox.offsetHeight
+          )
+        } else if (value == 2) {
+          item.player.reSize(
+            this.$refs.videoBox.offsetWidth / 2,
+            this.$refs.videoBox.offsetHeight / 2
+          )
+        } else if (value == 3) {
+          item.player.reSize(
+            this.$refs.videoBox.offsetWidth / 3,
+            this.$refs.videoBox.offsetHeight / 3
+          )
+        }
+        console.log('==========')
+      })
     }
+    // 选择显示video数量
   },
+
   beforeDestroy() {
     this.players.forEach((item) => {
       item.stop()
     })
   },
   methods: {
-    ysyBtn() {
+    // 视频播放数据   视频容器id（所在窗口）   当前窗口是几分屏（1、4、9）
-      var EZOPENDemo
+    ysyBtn(item) {
-      window.EZOPENDemo = EZOPENDemo
+      item.forEach((item2, index) => {
-      const ezopenInit = () => {
+        console.log('item :', item2 + 'index', index)
-        EZOPENDemo = new EZUIKit.EZUIKitPlayer({
+        var player = new EZUIKit.EZUIKitPlayer({
-          id: 'video-container',
+          autoplay: true,
-          // id: `video-container${index + 1}`,
+          audio: '0',
-          width: this.$refs.videoBox.offsetWidth / 3,
+          id: `video-container${index + 1}`, // 视频容器ID
-          height: this.$refs.videoBox.offsetHeight / 3,
+          accessToken: item2.token,
-          template: 'pcLive',
+          url: item2.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
-          // AppKey: 'd6772be410d349c795b3b002a26694cd',
+          template: 'simple',
-          url: this.devList.url,
+          width: this.$refs.videoBox.offsetWidth,
-          accessToken: this.devList.token,
+          height: this.$refs.videoBox.offsetHeight
-          // url: 'ezopen://open.ys7.com/E61616447/1.hd.live',
-          // accessToken:
-          //   'at.are9lpci40jur1cm8mteein3bpweoopp-6t6hpg4e24-1463cyp-fxrmaa7or',
-          template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
-          header: ['capturePicture'], // 如果templete参数不为simple,该字段将被覆盖                     // 加载插件，talk-对讲
-          footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
-          fullScreenCallBack: (data) => console.log('全屏回调', data) // 如果template参数不为simple, 无法获取
         })
-      }
+        item2.player = player
-      ezopenInit()
+      })
     }
-    // 渲染视频播放
-    // StructureEZUIKitPlayer(item, index, select) {
-    //   if (select) {
-    //     var player = new EZUIKit.EZUIKitPlayer({
-    //       autoplay: false,
-    //       audio: '0',
-    //       id: 'video-container', // 视频容器ID
-    //       accessToken: this.devList.token,
-    //       url: this.devList.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
-    //       template: 'simple',
-    //       width: this.$refs.videoBox.offsetWidth / 3,
-    //       height: this.$refs.videoBox.offsetHeight / 3
-    //     })
-    //     // this.selectPlayer.player = player
-    //   } else {
-    //     var player = new EZUIKit.EZUIKitPlayer({
-    //       autoplay: false,
-    //       audio: '0',
-    //       id: `video-container${index + 1}`, // 视频容器ID
-    //       accessToken: this.devList.token,
-    //       url: this.devList.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
-    //       template: 'simple',
-    //       width: this.$refs.videoBox.offsetWidth / 3,
-    //       height: this.$refs.videoBox.offsetHeight / 3
-    //     })
-    //     item.player = player
-    //   }
-    //   this.select = 3
-    // }
   }
 }
 </script>
@@ -422,44 +229,6 @@ export default {
       overflow: hidden;
       left: 0;
     }
-    // .right {
-    //   display: flex;
-    //   flex-direction: column;
-    //   justify-content: space-between;
-    //   background: rgb(255, 255, 255);
-    //   width: 20%;
-    //   height: 100%;
-    //   top: 0;
-
-    //   // border: .0625rem solid rgb(22, 21, 27);
-    //   position: absolute;
-    //   right: 0;
-    //   .right1 {
-    //     width: 100%;
-    //     text-align: start;
-    //     line-height: 2.5rem;
-    //     color: #6e727a;
-    //     margin: 0.3125rem auto;
-    //     height: 2.5rem;
-    //     padding: 0 1.25rem;
-    //     cursor: pointer;
-    //   }
-    //   .right1:hover {
-    //     background: #1393fc;
-    //     color: rgb(255, 255, 255);
-    //     border: none;
-    //   }
-    //   .right2 {
-    //     width: 100%;
-    //     padding: 0 1.25rem;
-    //     height: 2.5rem;
-    //     margin: 0.3125rem auto;
-    //     line-height: 2.5rem;
-    //     background: #1393fc;
-    //     color: rgb(255, 255, 255);
-    //     cursor: pointer;
-    //   }
-    // }
   }
 }