增加视频控制

.gitignore

@@ -43,6 +43,30 @@ nbdist/
 *.xml.versionsBackup
 *.swp
 
+.DS_Store
+node_modules
+/dist
+/doc
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 
 !*/build/*.java
 !*/build/*.html

yanzhu-bigscreen/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "inst":"yarn --ignore-engines",
+    "inst": "yarn --ignore-engines",
     "serve": "vue-cli-service serve",
     "serve:prod": "vue-cli-service serve --mode production",
     "build": "vue-cli-service build",
@@ -15,6 +15,7 @@
     "dayjs": "^1.11.9",
     "element-ui": "^2.15.13",
     "emittery": "^0.8.1",
+    "ezuikit-js": "^8.2.5",
     "file-saver": "2.0.5",
     "gantt-elastic": "^1.0.12",
     "gantt-elastic-header": "^0.1.11",
@@ -34,13 +35,27 @@
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/runtime": "^7.28.6",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "abortcontroller-polyfill": "^1.7.8",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.1",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "formdata-polyfill": "^4.0.10",
+    "https-browserify": "^1.0.0",
     "javascript-obfuscator": "^4.1.1",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "svg-sprite-loader": "^6.0.11",
+    "url": "^0.11.4",
     "vue-template-compiler": "^2.6.14",
     "webpack-obfuscator": "^3.5.1"
   },

yanzhu-bigscreen/src/views/videoMonitor.vue

@@ -32,7 +32,7 @@
             </div>
             <template v-else>
                 <template v-if="showMode == 'sigle'">
-                    <iframe v-if="selVideo" frameborder="0" :src="selVideo.iframeSrc" style="width:100%;height:100%;" allowfullscreen></iframe>
+                    <div v-if="selVideo" :key="selVideo.id" id="video-container" style="width:100%;height:100%;overflow:hidden;"></div>
                 </template>
                 <div v-if="showMode == 'all'" style="height: 100%;" class="all-mode">
                     <div class="all-header">
@@ -57,6 +57,7 @@
 <script>
 import debounce from 'lodash.debounce'
 import SvgIcon from '@/components/SvgIcon.vue'
+import EZUIKit from 'ezuikit-js'
 export default {
     components: { SvgIcon },
     data() {
@@ -72,10 +73,10 @@ export default {
             showSize: 4,
             showIndex: 1,
             showList: [],
-            elKey: 0,
             showTree: false,
             treeData: [],
-            workAreaOptions: []
+            workAreaOptions: [],
+            ezvizPlay: null
         }
     },
     mounted() {
@@ -259,40 +260,92 @@ export default {
         handleTreeNodeClick(node) {
             // 如果点击的是视频监控节点（包含vdata属性），则选中该视频
             if (node.vdata) {
-                this.doSelectItem(node.vdata, true);
+                this.doSelectItem(node.vdata, true)
             } else {
                 //递归获取这个节点的所有视频子节点显示
-                let videoNodes = [];
+                let videoNodes = []
                 function getVideoNodes(nodes) {
-                    if (!nodes || !Array.isArray(nodes)) return [];
+                    if (!nodes || !Array.isArray(nodes)) return []
                     nodes.forEach(node => {
                         if (node.vdata) {
-                            videoNodes.push(node);
+                            videoNodes.push(node)
                         }
                         if (node.children && node.children.length > 0) {
-                            getVideoNodes(node.children);
+                            getVideoNodes(node.children)
                         }
-                    });
+                    })
                 }
-                getVideoNodes(node.children);
+                getVideoNodes(node.children)
-                let videoList = videoNodes.map(d => d.vdata);
+                let videoList = videoNodes.map(d => d.vdata)
-                this.videoMonitors = videoList;
+                this.videoMonitors = videoList
                 if (videoList.length > 1) {
-                    this.showMode = 'all';
+                    if (this.ezvizPlay) {
-                    this.showAllData();
+                        try {
+                            this.ezvizPlay.stop()
+                        } catch (e) {
+                            console.warn('停止播放器失败:', e)
+                        }
+                        this.ezvizPlay = null
+                    }
+                    this.showMode = 'all'
+                    this.showAllData()
                 } else {
-                    this.showMode = 'sigle';
+                    this.showMode = 'sigle'
-                    this.doSelectItem(videoList[0], true);
+                    this.doSelectItem(videoList[0], true)
                 }
             }
         },
         
         loadVideo(it) {
-            this.$api.videoMonitor.getYsToken(it.id).then((d) => {
+            if (this.showMode == 'sigle') {
-                it.accessToken = d.msg
+                this.$api.videoMonitor.getYsToken(it.id).then((d) => {
-                it.iframeSrc = 
+                    it.accessToken = d.msg
-                    'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + +new Date()
+                    if (this.ezvizPlay) {
-            })
+                        try {
+                            this.ezvizPlay.stop()
+                        } catch (e) {
+                            console.warn('停止播放器失败:', e)
+                        }
+                        this.ezvizPlay = null
+                    }
+                    this.$nextTick(() => {
+                        setTimeout(() => {
+                            const container = document.getElementById('video-container')
+                            if (container) {
+                                const width = container.offsetWidth
+                                const height = container.offsetHeight
+                                try {
+                                    const player = new EZUIKit.EZUIKitPlayer({
+                                        autoplay: true,
+                                        id: 'video-container',
+                                        accessToken: d.msg,
+                                        url: it.url,
+                                        template: 'pcLive',
+                                        width: width,
+                                        height: height,
+                                        fit: 'contain'
+                                    })
+                                    this.ezvizPlay = player
+                                } catch (e) {
+                                    console.error('创建播放器失败:', e)
+                                }
+                            } else {
+                                console.error('未找到视频容器元素')
+                            }
+                        }, 500)
+                    })
+                }).catch(err => {
+                    console.error('获取视频token失败:', err)
+                })
+            } else {
+                this.$api.videoMonitor.getYsToken(it.id).then((d) => {
+                    it.accessToken = d.msg
+                    it.iframeSrc = 
+                        'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + +new Date()
+                }).catch(err => {
+                    console.error('获取视频token失败:', err)
+                })
+            }
         },
         changeSize(n) {
             this.showSize = n
@@ -303,15 +356,35 @@ export default {
             if (it.active && !reLoad) {
                 return
             }
+            if (this.ezvizPlay) {
+                try {
+                    this.ezvizPlay.stop()
+                } catch (e) {
+                    console.warn('停止播放器失败:', e)
+                }
+                this.ezvizPlay = null
+            }
             this.showMode = 'sigle'
             if (this.selVideo) {
                 this.selVideo.active = false
             }
             this.selVideo = it
             this.selVideo.active = true
-            this.loadVideo(this.selVideo)
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.loadVideo(this.selVideo)
+                }, 100)
+            })
         },
         showAllVideo() {
+            if (this.ezvizPlay) {
+                try {
+                    this.ezvizPlay.stop()
+                } catch (e) {
+                    console.warn('停止播放器失败:', e)
+                }
+                this.ezvizPlay = null
+            }
             if (this.selVideo) {
                 this.selVideo.active = false
             }
@@ -333,7 +406,6 @@ export default {
                 this.showList.push(this.videoMonitors[i])
                 this.loadVideo(this.videoMonitors[i])
             }
-            this.elKey++
         },
     },
 }

yanzhu-bigscreen/vue.config.js

@@ -6,7 +6,9 @@ function resolve(dir) {
 }
 
 module.exports = defineConfig({
-  transpileDependencies: true,
+  transpileDependencies: [
+    'ezuikit-js'
+  ],
   publicPath: process.env.NODE_ENV==='production'? "./":"/xdbs",
   productionSourceMap: false,
   devServer: {
@@ -89,10 +91,44 @@ module.exports = defineConfig({
       });
   },
   configureWebpack: (config) => {
-    config.externals = {
-      vue: "Vue",
-    };
     if (process.env.NODE_ENV === "production") {
+      config.externals = {
+        vue: "Vue",
+      };
+    }
+    
+    // 为了解决 ezuikit-js 中的 require is not defined 问题
+    if (!config.resolve) {
+      config.resolve = {};
+    }
+    if (!config.resolve.fallback) {
+      config.resolve.fallback = {};
+    }
+    
+    Object.assign(config.resolve.fallback, {
+      "path": require.resolve("path-browserify"),
+      "buffer": require.resolve("buffer"),
+      "stream": require.resolve("stream-browserify"),
+      "crypto": require.resolve("crypto-browserify"),
+      "http": require.resolve("stream-http"),
+      "https": require.resolve("https-browserify"),
+      "os": require.resolve("os-browserify"),
+      "url": require.resolve("url/"),
+      "zlib": require.resolve("browserify-zlib")
+    });
+    
+    // 添加插件提供全局变量
+    config.plugins = (config.plugins || []).concat([
+      new (require('webpack')).DefinePlugin({
+        'process.env': JSON.stringify(process.env)
+      }),
+      new (require('webpack')).ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+        process: 'process/browser.js'
+      })
+    ]);
+      
+      if (process.env.NODE_ENV === "production") {
       /*
       config.plugins.push(
         new WebpackObfuscator(

yanzhu-modules/yanzhu-led/src/main/java/com/yanzhu/led/service/LedDrawService.java

@@ -93,8 +93,10 @@ public class LedDrawService {
                     16, profile);
 
             // 如果没有图片，添加文本页
-            String text ="X研筑科技LED屏内容 - " + ledScreen.getTitle()+ DateUtil.now();
+            String text ="Y研筑科技LED屏内容 - " + ledScreen.getTitle()+ DateUtil.now();
+
             logger.info("LED-->{},sn={}",text,ledScreen.getDeviceSn());
+            text =ledScreen.getTitle();
             TextBxPage textPage = new TextBxPage(text, new Font("宋体", Font.PLAIN, 12));//+当前时间
 
             textPage.setForeground(Color.WHITE);

yanzhu-ui-vue3/package.json

@@ -27,6 +27,7 @@
     "diagram-js": "^11.9.1",
     "echarts": "5.5.1",
     "element-plus": "^2.8.5",
+    "ezuikit-js": "^8.2.5",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "highlight.js": "11.7.0",

yanzhu-ui-vue3/src/views/manage/videoMonitor/list.vue

@@ -28,10 +28,8 @@
                 </div>
             </el-col>
             <el-col :span="20" :key="data.elKey" style="height: 100%;padding-left: 4px;">
-                <template v-if="data.showMode == 'sigle'">
+                <template v-if="data.showMode == 'single'">
-                    <iframe v-if="data.selVideo" frameborder="0" :src="data.selVideo.iframeSrc"
+                    <div v-if="data.selVideo" id="video-container" style="width:100%;height:100%;overflow:hidden;"></div>
-                        style="width:100%;height:100%;" id="ysOpenDevice" allowfullscreen>
-                    </iframe>
                 </template>
                 <div v-if="data.showMode == 'all'" style="height: 100%;" class="all-mode">
                     <div class="all-header">
@@ -68,9 +66,11 @@ import {
 } from "@/api/manage/videoMonitor";
 import useUserStore from '@/store/modules/user'
 import { workAreaTree } from '@/api/system/workAarea'
+import EZUIKit from 'ezuikit-js'
 const userStore = useUserStore()
 const { proxy } = getCurrentInstance();
 const treeRef = ref(null);
+const ezvizPlay = ref(null);
 const data = reactive({
     mode1: 4,
     mode2: 9,
@@ -91,11 +91,40 @@ const data = reactive({
     treeData: []
 })
 function loadVideo(it) {
-    getYsToken(it.id).then(d => {
+    if (data.showMode == 'single') {
-        it.accessToken = d.msg;
+        getYsToken(it.id).then(d => {
-        it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());
+            it.accessToken = d.msg;
-
+            if (ezvizPlay.value) {
-    })
+                ezvizPlay.value.stop();
+                ezvizPlay.value = null;
+            }
+            nextTick(() => {
+                setTimeout(() => {
+                    const container = document.getElementById('video-container');
+                    if (container) {
+                        const width = container.offsetWidth;
+                        const height = container.offsetHeight;
+                        const player = new EZUIKit.EZUIKitPlayer({
+                            autoplay: true,
+                            id: 'video-container',
+                            accessToken: d.msg,
+                            url: it.url,
+                            template: 'pcLive',
+                            width: width,
+                            height: height,
+                            fit: 'contain'
+                        });
+                        ezvizPlay.value = player;
+                    }
+                }, 400);
+            });
+        });
+    } else {
+        getYsToken(it.id).then(d => {
+            it.accessToken = d.msg;
+            it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());
+        });
+    }
 }
 
 /** 查询工区树结构 */
@@ -137,15 +166,26 @@ function doSelectItem(it, reLoad = false) {
     if (it.active && !reLoad) {
         return;
     }
-    data.showMode = "sigle";
+    if (ezvizPlay.value) {
+        ezvizPlay.value.stop();
+        ezvizPlay.value = null;
+    }
+    data.showMode = "single";
     if (data.selVideo) {
         data.selVideo.active = false;
     }
     data.selVideo = it;
     data.selVideo.active = true;
-    loadVideo(data.selVideo);
+    data.elKey++;
+    nextTick(() => {
+        loadVideo(data.selVideo);
+    });
 }
 function showAllVideo() {
+    if (ezvizPlay.value) {
+        ezvizPlay.value.stop();
+        ezvizPlay.value = null;
+    }
     if (data.selVideo) {
         data.selVideo.active = false;
     }
@@ -326,12 +366,16 @@ function handleTreeNodeClick(node) {
         let videoList = videoNodes.map(d => d.vdata);
         data.videoMonitors = videoList;
         if (videoList.length > 1) {
+            if (ezvizPlay.value) {
+                ezvizPlay.value.stop();
+                ezvizPlay.value = null;
+            }
             data.showMode = 'all';
             showAllData();
         } else {
-            data.showMode = 'single';
+                data.showMode = 'single';
-            doSelectItem(videoList[0], true);
+                doSelectItem(videoList[0], true);
-        }
+            }
     }
 }
 </script>