From 909d20ae348ae18a07a54068c3517ce47a2bcfc7 Mon Sep 17 00:00:00 2001
From: 朱桂飞 <zhuguifei@zhuguifeideMacBook-Air.local>
Date: 星期六, 11 一月 2025 12:52:16 +0800
Subject: [PATCH] 修改车间实时监控
---
src/views/dashboard/videoFit/index.vue | 254 +++++++++++++++++++++
src/assets/images/dry/bg/img_video.png | 0
src/views/dashboard/video/index.vue | 460 +++++++++++++++++--------------------
3 files changed, 469 insertions(+), 245 deletions(-)
diff --git a/src/assets/images/dry/bg/img_video.png b/src/assets/images/dry/bg/img_video.png
new file mode 100644
index 0000000..0ca6a7d
--- /dev/null
+++ b/src/assets/images/dry/bg/img_video.png
Binary files differ
diff --git a/src/views/dashboard/video/index.vue b/src/views/dashboard/video/index.vue
index 1ebb98f..07f0ead 100644
--- a/src/views/dashboard/video/index.vue
+++ b/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'], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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"], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
- 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>
diff --git a/src/views/dashboard/videoFit/index.vue b/src/views/dashboard/videoFit/index.vue
new file mode 100644
index 0000000..d0ccc1d
--- /dev/null
+++ b/src/views/dashboard/videoFit/index.vue
@@ -0,0 +1,254 @@
+<template>
+ <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 { 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'
+
+ // 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/FR0817313/1.live',
+ name: '杩涢棬宸︽墜杈�-涓绘憚',
+ isplay: false,
+ },
+ {
+ id: 'video_2',
+ url: 'ezopen://open.ys7.com/FR0817313/2.live',
+ name: '杩涢棬宸︽墜杈�-骞胯',
+ isplay: false,
+ },
+ {
+ id: 'video_3',
+ url: 'ezopen://open.ys7.com/FR0817368/1.live',
+ name: '杩涢棬鍙虫墜杈�-涓绘憚',
+ isplay: false,
+ },
+ {
+ id: 'video_4',
+ url: 'ezopen://open.ys7.com/FR0817368/2.live',
+ name: '杩涢棬鍙虫墜杈�-骞胯',
+ isplay: false,
+ },
+ {
+ id: 'video_5',
+ url: 'ezopen://open.ys7.com/FR0817377/1.live',
+ name: '宸﹀闈犻棬-涓绘憚',
+ isplay: false,
+ },
+ {
+ id: 'video_6',
+ url: 'ezopen://open.ys7.com/FR0817377/2.live',
+ name: '宸﹀闈犻棬-骞胯',
+ isplay: false,
+ },
+ {
+ id: 'video_7',
+ url: 'ezopen://open.ys7.com/FR0817358/1.live',
+ name: '宸﹀闈犲姙鍏-涓绘憚',
+ isplay: false,
+ },
+ {
+ id: 'video_8',
+ url: 'ezopen://open.ys7.com/FR0817358/2.live',
+ name: '宸﹀闈犲姙鍏-骞胯',
+ isplay: false,
+ },
+ ])
+
+ let peviewPlayer = ref()
+
+ 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'], // 鍔犺浇鎻掍欢锛宼alk-瀵硅
+ 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])
+ }
+
+ 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 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;
+ }
+
+ .video-box {
+ width: 100%;
+ margin: 10px;
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ background-color: white;
+ }
+
+ .video-item {
+ position: relative;
+ width: 420px;
+ height: 300px;
+ margin: 10px;
+ display: flex;
+ flex-direction: column;
+
+ .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>
--
Gitblit v1.9.3