jiangyq
/
YZProjectCloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加视频控制

dev_xd
lj7788 2026-01-22 16:21:50 +08:00
parent 62995a851d
commit ed39b16952
10 changed files with 35293 additions and 1306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored
View File

@ -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

29025
docsql/study_cloud.sql 100644
View File

File diff suppressed because one or more lines are too long

4546
yanzhu-bigscreen/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
yanzhu-bigscreen/package.json
View File

@ -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"
},

118
yanzhu-bigscreen/src/views/videoMonitor.vue
View File

@ -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);
let videoList = videoNodes.map(d => d.vdata);
this.videoMonitors = videoList;
getVideoNodes(node.children)
let videoList = videoNodes.map(d => d.vdata)
this.videoMonitors = videoList
if (videoList.length > 1) {
this.showMode = 'all';
this.showAllData();
if (this.ezvizPlay) {
try {
this.ezvizPlay.stop()
} catch (e) {
console.warn('停止播放器失败:', e)
}
this.ezvizPlay = null
}
this.showMode = 'all'
this.showAllData()
} else {
this.showMode = 'sigle';
this.doSelectItem(videoList[0], true);
this.showMode = 'sigle'
this.doSelectItem(videoList[0], true)
}
}
},
loadVideo(it) {
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()
})
if (this.showMode == 'sigle') {
this.$api.videoMonitor.getYsToken(it.id).then((d) => {
it.accessToken = d.msg
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++
},
},
}

44
yanzhu-bigscreen/vue.config.js
View File

@ -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(

2748
yanzhu-bigscreen/yarn.lock
View File

File diff suppressed because it is too large Load Diff

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

@ -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);

1
yanzhu-ui-vue3/package.json
View File

@ -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",

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

@ -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'">
<iframe v-if="data.selVideo" frameborder="0" :src="data.selVideo.iframeSrc"
style="width:100%;height:100%;" id="ysOpenDevice" allowfullscreen>
</iframe>
<template v-if="data.showMode == 'single'">
<div v-if="data.selVideo" id="video-container" style="width:100%;height:100%;overflow:hidden;"></div>
</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 => {
it.accessToken = d.msg;
it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());
})
if (data.showMode == 'single') {
getYsToken(it.id).then(d => {
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';
doSelectItem(videoList[0], true);
}
data.showMode = 'single';
doSelectItem(videoList[0], true);
}
}
}
</script>