修改车间实时监控

朱桂飞

2025-01-11 909d20ae348ae18a07a54068c3517ce47a2bcfc7

 src/views/dashboard/video/index.vue

@@ -1,272 +1,242 @@
<template>
  <div>
    <div class="app">
      <div class="video-box">
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container1" class="item-player">
          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container2" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container3" class="item-player">

          </div>

        </div>

        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container4" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container5" class="item-player">

          </div>

        </div>
        <div class="video-item">
          <div class="item-title">
            智能中草药
          </div>
          <div id="video-container5_2" class="item-player">

          </div>

        </div>

      </div>

    </div>
  </div>


   <div>
      <div class="app">
         <div class="video-box">
            <div :class="['video-item', { 'video-hover': !item.isplay }]" v-for="(item, index) in videoList" :key="index">
               <div class="item-title">{{ item.name }}</div>
               <div :id="item.id" class="item-player base_bg"></div>
               <div class="video-control">
                  <div class="playBtn">
                     <CaretRightOutlined @click="playNext(item)" />
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import EZUIKit from "ezuikit-js/ezuikit";
import axios from "axios";
   import { CaretRightOutlined } from '@ant-design/icons-vue'
   import { onMounted, ref, onUnmounted } from 'vue'
   import EZUIKit from 'ezuikit-js/ezuikit'
   import axios from 'axios'

   const playerWidth = 420
   const playerHeight = 270
   const templateCode = 'b45cd61a6e2b40389f1e914e08ab7160'

const playerWidth = 420;
const playerHeight = 270;
const templateCode = "bef3c43bae064cc78f60bc76709ef2f2";
   // TODO token获取逻辑放到服务端
   const accessToken = ref()
   const appKey = 'b1849dcfc58d4446b1d651856bc72edd'
   const appSecret = 'c82d202fdc9d6af53fc7719623526cc1'
   //直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
   const videoList = ref([
      {
         id: 'video_1',
         url: 'ezopen://open.ys7.com/BB2645510/1.live',
         name: '西南角',
         isplay: false,
      },
      {
         id: 'video_2',
         url: 'ezopen://open.ys7.com/BB2646044/1.live',
         name: '上料口',
         isplay: false,
      },
      {
         id: 'video_3',
         url: 'ezopen://open.ys7.com/BB2646084/1.live',
         name: '出料口',
         isplay: false,
      },
      {
         id: 'video_4',
         url: 'ezopen://open.ys7.com/BB2646113/1.live',
         name: '西北角',
         isplay: false,
      },
      {
         id: 'video_5',
         url: 'ezopen://open.ys7.com/BB5066611/1.live',
         name: '大门上-广角',
         isplay: false,
      },
      {
         id: 'video_6',
         url: 'ezopen://open.ys7.com/BB5066611/2.live',
         name: '大门上-主摄',
         isplay: false,
      },
   ])

// TODO token获取逻辑放到服务端
const accessToken = ref();
const appKey = "bcd4b89660734f48b595cfcd80ab4ee4";
const appSecret = "8701a6ce59ddfc0e5335f89832bab23c";
   let peviewPlayer = ref()

//直播地址  BB2645510-摄像机序列号  hd-高清（去掉则播放普通） 1-通道号
const url1 = "ezopen://open.ys7.com/BB2645510/1.hd.live";
const url2 = "ezopen://open.ys7.com/BB2646044/1.hd.live";
const url3 = "ezopen://open.ys7.com/BB2646084/1.hd.live";
const url4 = "ezopen://open.ys7.com/BB2646113/1.hd.live";
const url5 = "ezopen://open.ys7.com/BB5066611/1.hd.live";
const url5_2 = "ezopen://open.ys7.com/BB5066611/2.hd.live";
   function initVideo(item) {
      //设置当前播放器为播放状态
      item.isplay = true
      peviewPlayer.value = new EZUIKit.EZUIKitPlayer({
         id: item.id, // 视频容器ID
         accessToken: accessToken.value,
         url: item.url,
         template: templateCode,
         plugin: ['talk'], // 加载插件，talk-对讲
         width: playerWidth,
         height: playerHeight,
         handleSuccess: (res) => {},
         handleError: (res) => {
            if (res.retcode == '10002') {
               console.info('初始化失败，token过期')
            }
         },
      })
      setTimeout(() => {
         console.info('初始化完成，开始自动播放')
         peviewPlayer.value.play()
      }, 1000)
   }

   function initPlayer() {
      playNext(videoList.value[0])
   }

let player1 = ref();
   function playNext(item) {
      setPlayNone()
      if (!peviewPlayer.value) {
         initVideo(item)
      } else {
         peviewPlayer.value.stop().then(() => {
            initVideo(item)
            peviewPlayer.value.play()
         })
      }
   }

   /**
    * 设置所有播放器状态为未播放
    */
   function setPlayNone() {
      videoList.value.forEach((item) => {
         if (item.isplay) {
            item.isplay = false
         }
      })
   }

function initPlayer1() {
  player1 = new EZUIKit.EZUIKitPlayer({
    id: "video-container1", // 视频容器ID
    accessToken: accessToken.value,
    url: url1,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight,
    handleSuccess: (res => {
        console.info(res);
        console.info("初始化成功");
      }
    ),
    handleError: (res => {
        console.info(res);
        if (res.retcode == "10002") {
          console.info("初始化失败，token过期");
        }
      }
    )
  });
  setTimeout(() => {
    console.info("开始自动播放1号")
    player1.play();
  }, 1000);
}
   function checkAccessToken() {
      const ez_expireTime = localStorage.getItem('ez_expireTime')
      const ez_accessToken = localStorage.getItem('ez_accessToken')
      const now = new Date().getTime()
      const time = ez_expireTime - now //判断token是否过期

function initPlayer2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container2", // 视频容器ID
    accessToken: accessToken.value,
    url: url2,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    header: ["zoom"],
    width: playerWidth,
    height: playerHeight
  });
}
      accessToken.value = ez_accessToken
      if (ez_accessToken && time > 1000 * 60) {
         initPlayer()
      } else {
         getAccessToken()
      }
   }

function initPlayer3() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container3", // 视频容器ID
    accessToken: accessToken.value,
    url: url3,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
   async function getAccessToken() {
      const api = axios.create({
         baseURL: 'https://open.ys7.com', // 设置为空字符串，或者设置为第三方接口的基本URL
      })
      try {
         const response = await api.post('/api/lapp/token/get?appKey=' + appKey + '&appSecret=' + appSecret) // 这里的路径为相对路径，不包含前缀
         if (response && response.data && response.data.code == 200) {
            localStorage.setItem('ez_accessToken', response.data.data.accessToken)
            localStorage.setItem('ez_expireTime', response.data.data.expireTime)
            accessToken.value = response.data.data.accessToken
            initPlayer()
         }
         console.log(response)
         // 处理成功响应数据
      } catch (error) {
         console.error(error)
         // 处理错误
      }
   }

function initPlayer4() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container4", // 视频容器ID
    accessToken: accessToken.value,
    url: url4,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
   // DOM挂载完成后渲染图表
   onMounted(() => {
      checkAccessToken()
   })

function initPlayer5() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5", // 视频容器ID
    accessToken: accessToken.value,
    url: url5,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}
   onUnmounted(() => {

function initPlayer5_2() {
  new EZUIKit.EZUIKitPlayer({
    id: "video-container5_2", // 视频容器ID
    accessToken: accessToken.value,
    url: url5_2,
    template: templateCode,
    plugin: ["talk"], // 加载插件，talk-对讲
    width: playerWidth,
    height: playerHeight
  });
}

function initPlayer() {
  initPlayer1();
  initPlayer2();
  initPlayer3();
  initPlayer4();
  initPlayer5();
  initPlayer5_2();
}

function checkAccessToken() {
  const ez_expireTime = localStorage.getItem("ez_expireTime");
  const ez_accessToken = localStorage.getItem("ez_accessToken");
  const now = new Date().getTime();
  const time = ez_expireTime - now; //判断token是否过期

  accessToken.value = ez_accessToken;
  if (ez_accessToken && (time > 1000 * 60)) {
    initPlayer();
  } else {
    getAccessToken();
  }


}

async function getAccessToken() {
  const api = axios.create({
    baseURL: "https://open.ys7.com" // 设置为空字符串，或者设置为第三方接口的基本URL
  });
  try {
    const response = await api.post("/api/lapp/token/get?appKey=" + appKey + "&appSecret=" + appSecret); // 这里的路径为相对路径，不包含前缀
    if (response && response.data && response.data.code == 200) {
      localStorage.setItem("ez_accessToken", response.data.data.accessToken);
      localStorage.setItem("ez_expireTime", response.data.data.expireTime);
      accessToken.value = response.data.data.accessToken;
      initPlayer();
    }
    console.log(response);
    // 处理成功响应数据
  } catch (error) {
    console.error(error);
    // 处理错误
  }
}


// DOM挂载完成后渲染图表
onMounted(() => {
  checkAccessToken();

});

onUnmounted(() => {

});
   })
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  display: flex;
}
   .app {
      width: 100%;
      display: flex;
   }

.video-box {
  width: 100%;
  margin: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: white;
}
   .video-box {
      width: 100%;
      margin: 10px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      background-color: white;
   }

.video-item {
  height: 300px;
  margin: 10px;
  width: 420px;
  display: flex;
  flex-direction: column;
   .video-item {
      position: relative;
      width: 420px;
      height: 300px;
      margin: 10px;
      display: flex;
      flex-direction: column;

  .item-title {
    width: 100%;
    height: 30px;
    font-weight: bold;
  }
      .item-title {
         width: 100%;
         height: 30px;
         font-weight: bold;
      }

}
      .base_bg {
         height: 100%;
      }

      .base_bg::before {
         content: '';
         display: block;
         background-image: url(/src/assets/images/dry/bg/img_video.png);
         background-size: 100% 100%;
         background-position: center;
         background-repeat: no-repeat;
         position: absolute;
         top: 30px;
         left: 0;
         right: 0;
         bottom: 0;
      }

      .video-control {
         position: absolute;
         top: 30px;
         width: 100%;
         height: 270px;
         display: none; /* 默认隐藏 */
         background-color: rgba(0, 0, 0, 0.3);

         .playBtn {
            position: absolute;
            top: 50%;
            left: 50%;
            color: white;
            font-size: 40px;
            transform: translate(-50%, -50%);
         }
      }
   }

   .video-hover {
   }

   .video-hover:hover .video-control {
      display: block;
   }
</style>