From 04c6b9bebeb938c7c836a96ea3c9707c672b6f0e Mon Sep 17 00:00:00 2001
From: yjl <1490736767@qq.com>
Date: Thu, 30 Mar 2023 09:23:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=AE=A1=E7=90=86-=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=86=E5=B1=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E3=80=81=E4=BA=91=E8=81=94=E4=B8=87=E7=89=A9=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/videoModule/videoModule.vue    |  25 +-
 .../videoManage/videoConfig.vue               |   2 +-
 .../projectFront/videoManage/overview.vue     | 146 ++++---
 src/views/projectFront/videoManage/ysyNew.vue | 365 ++++--------------
 4 files changed, 166 insertions(+), 372 deletions(-)

diff --git a/src/components/videoModule/videoModule.vue b/src/components/videoModule/videoModule.vue
index 922b63bf..166382e4 100644
--- a/src/components/videoModule/videoModule.vue
+++ b/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: {
-        url: '',
-        accessToken:
-          'at.3goo7ob2dic9amkg5ycg4n5yak9jtpf2-2dn1vwm6z3-134xqr4-td1bh38w2'
-      },
+      ysyParams: [],
       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
diff --git a/src/views/equipmentCenter/videoManage/videoConfig.vue b/src/views/equipmentCenter/videoManage/videoConfig.vue
index a22b5531..72080425 100644
--- a/src/views/equipmentCenter/videoManage/videoConfig.vue
+++ b/src/views/equipmentCenter/videoManage/videoConfig.vue
@@ -1287,7 +1287,7 @@ export default {
         },
         {
           label: '洗轮机',
-          value: 'JKDWZ00'
+          value: 'JKDWZ005'
         },
         {
           label: '围墙',
diff --git a/src/views/projectFront/videoManage/overview.vue b/src/views/projectFront/videoManage/overview.vue
index 84b7a95f..f1fd979b 100644
--- a/src/views/projectFront/videoManage/overview.vue
+++ b/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>
-        <div class="videoBox" v-if="dataType==1">
+        <div class="pageTitle">视频列表</div>
+        <div class="videoBox" v-if="dataType == 1">
           <vue-scroll>
-            <ul v-if="devList.length>0">
-              <li @click="changeVideo(item)" v-for="(item,index) in devList" :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}}
+            <ul v-if="devList.length > 0">
+              <li
+                @click="changeVideo(item)"
+                v-for="(item, index) in devList"
+                :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-item :title="item.name" :name="index" v-for="(item,index) in devList" :key="index">
-                <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}}
+            <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"
+              >
+                <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 videoModule from "@/components/videoModule/videoModule.vue";
-import closePage from "@/components/closePage"
+import {
+  selectProjectVideoListApi,
+  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:[],
-      dataType:1,
+      selectList: [],
+      dataType: 1,
       activeNames: [0],
-      screens:{},
-      pluginType:'',
-    };
+      screens: {},
+      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){
-      console.log(item, 'xxxxxxxxxx');
-      this.selectList=[item]
-      console.log('右边的值',this.selectList)
+    changeVideo(item) {
+      console.log(item, 'xxxxxxxxxx')
+      this.selectList = [item]
+      console.log('右边的值', this.selectList)
     },
     loadData() {
       selectProjectVideoListApi({
         projectSn: this.$store.state.projectSn
       }).then((res) => {
-        var DATA = res.result.videoList;
-        this.devList=DATA
-        console.log('视频的列表',res.result)
-        this.dataType=res.result.type
-      });
+        var DATA = res.result.videoList
+        this.devList = DATA
+        this.selectList = this.devList
+        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;
-        this.devList=DATA
-        this.dataType=res.result.type
-      });
-    },
-  },
-};
+        var DATA = res.result.videoList
+        this.devList = DATA
+        this.dataType = res.result.type
+      })
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
-@import "./style.less";
-.videoListBox{
+@import './style.less';
+.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{
-    background-color: #030303;
-    float: left;
-    width: calc(100% - 300px);
+/deep/.playVideoBox {
+  background-color: #030303;
+  float: left;
+  width: calc(100% - 300px);
 }
 </style>
\ No newline at end of file
diff --git a/src/views/projectFront/videoManage/ysyNew.vue b/src/views/projectFront/videoManage/ysyNew.vue
index 5cc257d9..9c731810 100644
--- a/src/views/projectFront/videoManage/ysyNew.vue
+++ b/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 id="video-container"></div>
-            <!-- <div :id="'video-container' + item"></div> -->
+            ></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数量
-    select(value) {
-      this.select = value
-      this.cameraList.forEach((item, index) => {
-        if (value == 1) {
-          if (item.code == 200)
-            item.player.reSize(
-              this.$refs.videoBox.offsetWidth,
-              this.$refs.videoBox.offsetHeight
-            )
-        } else if (value == 2) {
-          if (item.code == 200)
-            item.player.reSize(
-              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
-        //     );
-        // }
-      })
+    ysyParams: function (a, b) {
+      console.log('父组件传递的数据 ysyParams  :', a)
+      this.indextest++
+      console.log('父组件传递的数据 this.devList  :', this.devList)
+
+      var index = this.devList.findIndex((item) => item.url == a[0].url)
+      this.selectVideoFirst = index + 1
+      // this.select = 1
+      // this.devList.forEach((item, index) => {
+      //   if (item.url == a[0].url) {
+      //     item.player.reSize(
+      //       this.$refs.videoBox.offsetWidth,
+      //       this.$refs.videoBox.offsetHeight
+      //     )
+      //   }
+      // })
     },
-    search(value) {
-      if (value) {
-        this.searchList = this.cameraList.filter(
-          (item) => item.channelName.indexOf(value) > -1
-        )
-      } else {
-        this.searchList = []
-      }
+    select: function (value, b) {
+      this.indextest = 0
+      console.log('选择显示video数量 :', this.devList)
+      this.select = value
+      this.selectVideoFirst = 1
+      this.devList.forEach((item, index) => {
+        // 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() {
-      var EZOPENDemo
-      window.EZOPENDemo = EZOPENDemo
-      const ezopenInit = () => {
-        EZOPENDemo = new EZUIKit.EZUIKitPlayer({
-          id: 'video-container',
-          // id: `video-container${index + 1}`,
-          width: this.$refs.videoBox.offsetWidth / 3,
-          height: this.$refs.videoBox.offsetHeight / 3,
-          template: 'pcLive',
-          // AppKey: 'd6772be410d349c795b3b002a26694cd',
-          url: this.devList.url,
-          accessToken: this.devList.token,
-          // 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, 无法获取
+    // 视频播放数据   视频容器id（所在窗口）   当前窗口是几分屏（1、4、9）
+    ysyBtn(item) {
+      item.forEach((item2, index) => {
+        console.log('item :', item2 + 'index', index)
+        var player = new EZUIKit.EZUIKitPlayer({
+          autoplay: true,
+          audio: '0',
+          id: `video-container${index + 1}`, // 视频容器ID
+          accessToken: item2.token,
+          url: item2.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
+          template: 'simple',
+          width: this.$refs.videoBox.offsetWidth,
+          height: this.$refs.videoBox.offsetHeight
         })
-      }
-      ezopenInit()
+        item2.player = player
+      })
     }
-    // 渲染视频播放
-    // 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;
-    //   }
-    // }
   }
 }