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

Merge branch 'dev_xd' of http://62.234.3.186:3000/jiangyq/YZProjectCloud into dev_xd

dev_xd
姜玉琦 2024-12-30 00:31:13 +08:00
parent f8ebc6679b 467e9755fc
commit b02c67b7a3
12 changed files with 305 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
yanzhu-bigscreen/src/api/index.js
View File

@ -5,6 +5,7 @@ import weather from './weather'
import detail from './detail'
import dict from './dict'
import greenCarbon from './greenCarbon'
import videoMonitor from './videoMonitor'
export default {
http:axios,
downFile:download,
@ -12,5 +13,6 @@ export default {
weather,
detail,
dict,
greenCarbon
greenCarbon,
videoMonitor
}

18
yanzhu-bigscreen/src/api/videoMonitor.js 100644
View File

@ -0,0 +1,18 @@
import request from "@/utils/request";
const listVideoMonitor = (query) => {
return request({
url: "/manage/videoMonitor/list",
method: "get",
params: query
});
};
const getYsToken=(id)=>{
return request({
url: '/manage/videoMonitor/getYsToken/' + id,
method: 'get'
})
}
export default {
listVideoMonitor,
getYsToken
}

1
yanzhu-bigscreen/src/assets/icons/svg/4screen.svg 100644
View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4306"><path d="M159.762 160.278h321.02v321.019h-321.02z m383.457 0h321.018v321.019H543.22z m0 382.425h321.018v321.019H543.22z m-383.457 0h321.02v321.019h-321.02z" p-id="4307"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 376 B

3
yanzhu-bigscreen/src/assets/icons/svg/9screen.svg 100644
View File

@ -0,0 +1,3 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3508">
<path d="M102 103h204.8v204.8H102V103z m307.2 0H614v204.8H409.2V103z m307.2 0h204.8v204.8H716.4V103zM102 410.2h204.8V615H102V410.2z m307.2 0H614V615H409.2V410.2z m307.2 0h204.8V615H716.4V410.2zM102 717.4h204.8v204.8H102V717.4z m307.2 0H614v204.8H409.2V717.4z m307.2 0h204.8v204.8H716.4V717.4z" p-id="3509">
</path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

1
yanzhu-bigscreen/src/assets/icons/svg/video.svg 100644
View File

@ -0,0 +1 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3408"><path d="M912 302.3L784 376V224c0-35.3-28.7-64-64-64H128c-35.3 0-64 28.7-64 64v576c0 35.3 28.7 64 64 64h592c35.3 0 64-28.7 64-64V648l128 73.7c21.3 12.3 48-3.1 48-27.6V330c0-24.6-26.7-40-48-27.7zM712 792H136V232h576v560z m176-167l-104-59.8V458.9L888 399v226zM208 360h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H208c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" p-id="3409"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 567 B

4
yanzhu-bigscreen/src/components/header.vue
View File

@ -8,7 +8,7 @@
<div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
<div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
<div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
<div :class="nav == 7 ? 'head-nav active' : 'head-nav'" @click="doNav(7)">视频监控</div>
</div>
</el-col>
<el-col :span="8" class="header-center">
@ -106,7 +106,7 @@ export default {
return;
}
this.nav = n;
let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress","/greenCarbon"][n - 1];
let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress","/greenCarbon","/videoMonitor"][n - 1];
this.$router.push(path);
},
doLogout() {

7
yanzhu-bigscreen/src/components/module/module-one-1-3.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="screen-one-1-3 screen-module">
<div class="module-title"><span>{{ label || '' }}</span></div>
<div class="module-title command" @click="doHeaderClick"><span>{{ label || '' }}</span></div>
<div class="module-ctx">
<slot></slot>
</div>
@ -15,6 +15,11 @@ export default {
type: String,
default:""
}
},
methods:{
doHeaderClick(){
this.$emit("headerClick");
}
}
};
</script>

9
yanzhu-bigscreen/src/router/index.js
View File

@ -46,6 +46,15 @@ const routes = [
component: () =>
import(/* webpackChunkName: "progress" */ "../views/greenCarbon.vue"),
},
{
path: "/videoMonitor",
name: "videoMonitor",
meta: { nav: 23 },
component: () =>
import(/* webpackChunkName: "videoMonitor" */ "../views/videoMonitor.vue"),
},
];
const router = new VueRouter({
mode: "hash",

229
yanzhu-bigscreen/src/views/videoMonitor.vue 100644
View File

@ -0,0 +1,229 @@
<template>
<div class="video-monitor main-page">
<el-col :span="4" class="h100">
<module-one-1-3 label="视频监控列表" @headerClick="showAllVideo">
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
<img src="images/nodata.png" style="width: 240px;">
<div style="text-align: center;">暂无数据</div>
</div>
<div class="video-list">
<div v-for="it in videoMonitors" :key="it.id" class="video-item command"
:class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
<svg-icon class-name="video-icon" icon-class="video" /> {{ it.monitorName }}
</div>
</div>
</module-one-1-3>
</el-col>
<el-col :span="20" class="h100">
<div v-if="videoMonitors.length == 0" style="text-align: center;margin-top: 20vh;">
<img src="images/nodata.png" style="width: 240px;">
<div style="text-align: center;">暂无数据</div>
</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>
</template>
<div v-if="showMode == 'all'" style="height: 100%;" class="all-mode">
<div class="all-header">
<svg-icon class-name="icon-screen command" @click="changeSize(mode1)"
:class="showSize == mode1 ? 'is-active' : ''" icon-class="4screen" />
<svg-icon class-name="icon-screen command" @click="changeSize(mode2)"
:class="showSize != mode1 ? 'is-active' : ''" icon-class="9screen" />
</div>
<div class="all-list" :class="showSize == mode1 ? 'mode1' : 'mode2'">
<div class="all-item command" v-for="it in showList" :key="it.id">
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:calc(100% - 30px);"
allowfullscreen>
</iframe>
<div class="command" @click="doSelectItem(it)"
style="text-align: center;height: 30px; line-height: 30px;">
{{ it.monitorName }}
</div>
</div>
</div>
<div class="all-pager">
<el-pagination background :page-size="showSize" :current-page="showIndex"
@current-change="handleCurrentChange" layout="prev, pager, next" :total="total" />
</div>
</div>
</template>
</el-col>
</div>
</template>
<script>
import debounce from 'lodash.debounce'
import SvgIcon from '@/components/SvgIcon.vue';
export default {
components: { SvgIcon },
data() {
return {
mode1: 4,
mode2: 9,
selProject: null,
prjInfo: {},
total: 0,
videoMonitors: [],
showMode: 'all',
selVideo: null,
showSize: 4,
showIndex: 1,
showList: [],
elKey: 0,
}
},
mounted() {
this.$store.dispatch('ChangeNav', 7);
this.dpi = this.$dpi();
window.addEventListener("resize", () => {
if (this.dpi != this.$dpi()) {
this.dpi = this.$dpi();
this.chartKey++;
}
});
this.$bus.$on('projectChange', debounce(prj => {
this.selProject = prj;
this.init();
}));
this.selProject = this.$store.getters.selProject;
this.init();
},
methods: {
init() {
if (!this.selProject) {
return;
}
let projectId = this.selProject.id;
let comId = this.selProject.comId;
this.$api.videoMonitor.listVideoMonitor({
pageNum: 1, pageSize: 100,
projectId: projectId,
comId: comId
}).then(d => {
this.total = d.total || 0;
this.videoMonitors = (d.rows || []).map(it => {
it.active = false;
it.iframeSrc = "";
it.accessToken = "";
return it;
});
this.showAllVideo();
});
},
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());
})
},
changeSize(n) {
this.showSize = n;
this.showIndex = 1;
this.showAllData();
},
doSelectItem(it) {
if (it.active) {
return;
}
this.showMode = "sigle";
if (this.selVideo) {
this.selVideo.active = false;
}
this.selVideo = it;
this.selVideo.active = true;
this.loadVideo(this.selVideo);
},
showAllVideo() {
if (this.selVideo) {
this.selVideo.active = false;
}
this.selVideo = null;
this.showMode = "all";
this.showSize = this.mode1;
this.showIndex = 1;
this.showAllData();
},
handleCurrentChange(n) {
this.showIndex = n;
this.showAllData();
},
showAllData() {
var start = (this.showIndex - 1) * this.showSize;
var end = start + this.showSize;
this.showList = [];
for (var i = start; i < end && i < this.videoMonitors.length; i++) {
this.showList.push(this.videoMonitors[i]);
this.loadVideo(this.videoMonitors[i])
}
this.elKey++;
}
}
}
</script>
<style lang="less">
.video-monitor {
.video-list {
line-height: 30px;
.video-item {
padding: 0px 10px;
&.is-active {
background: #87cefa88;
}
}
}
.all-mode {
.all-header {
text-align: right;
.icon-screen {
height: 40px;
width: 40px;
background: #BFC3C5;
fill: #fff;
margin-left: 10px;
&.is-active {
background: #445A65;
fill: #4D91FE;
}
}
}
.all-list {
display: grid;
grid-gap: 10px;
height: calc(100% - 80px);
&.mode1 {
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
.all-item {}
}
&.mode2 {
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
.all-item {}
}
}
.all-pager {
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>

1
yanzhu-modules/yanzhu-manage/pom.xml
View File

@ -183,6 +183,7 @@
<version>2.5.15</version>
<configuration>
<fork>true</fork> <!-- 如果没有该配置，devtools不会生效 -->
<includeSystemScope>true</includeSystemScope>
</configuration>
<executions>
<execution>

4
yanzhu-ui-vue3/src/assets/icons/svg/9screen.svg
View File

@ -1 +1,3 @@
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5237"><path d="M136.061875 132.541875h197.83v197.83H136.061875zM380.51187501 132.541875h197.83v197.83H380.51187501zM624.951875 132.541875h197.83v197.83H624.951875zM136.061875 380.51187501h197.83v197.83H136.061875zM380.51187501 380.51187501h197.83v197.83H380.51187501zM624.951875 380.51187501h197.83v197.83H624.951875zM136.061875 628.471875h197.83v197.83H136.061875zM380.51187501 628.471875h197.83v197.83H380.51187501zM624.951875 628.471875h197.83v197.83H624.951875z" 1 p-id="5238"></path></svg>
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3508">
<path d="M102 103h204.8v204.8H102V103z m307.2 0H614v204.8H409.2V103z m307.2 0h204.8v204.8H716.4V103zM102 410.2h204.8V615H102V410.2z m307.2 0H614V615H409.2V410.2z m307.2 0h204.8V615H716.4V410.2zM102 717.4h204.8v204.8H102V717.4z m307.2 0H614v204.8H409.2V717.4z m307.2 0h204.8v204.8H716.4V717.4z" p-id="3509">
</path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 682 B

After

Width:  |  Height:  |  Size: 515 B

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

@ -9,7 +9,7 @@
</el-select>
</el-form-item>
</el-form>
<el-row v-if="data.selPrjId" style="height: 100%;">
<el-row v-if="data.selPrjId" class="video-main" :class="!data.currentPrjId?'show-prjs':''">
<el-col :span="4" class="video-name-list">
<div class="video-title command" @click="showAllVideo">设备列表</div>
<div class="video-list">
@ -27,16 +27,17 @@
</template>
<div v-if="data.showMode == 'all'" style="height: 100%;" class="all-mode">
<div class="all-header">
<svg-icon class-name="icon-screen command" @click="changeSize(2)"
:class="data.showSize == 2 ? 'is-active' : ''" icon-class="4screen" />
<svg-icon class-name="icon-screen command" @click="changeSize(4)"
:class="data.showSize != 2 ? 'is-active' : ''" icon-class="9screen" />
<svg-icon class-name="icon-screen command" @click="changeSize(data.mode1)"
:class="data.showSize == data.mode1 ? 'is-active' : ''" icon-class="4screen" />
<svg-icon class-name="icon-screen command" @click="changeSize(data.mode2)"
:class="data.showSize != data.mode1 ? 'is-active' : ''" icon-class="9screen" />
</div>
<div class="all-list" :class="data.showSize == 2 ? 'mode1' : 'mode2'">
<div class="all-item" v-for="it in data.showList" :key="it.id">
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:100%;"
<div class="all-list" :class="data.showSize == data.mode1 ? 'mode1' : 'mode2'">
<div class="all-item command" v-for="it in data.showList" :key="it.id" >
<iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:calc(100% - 30px);"
id="ysOpenDevice" allowfullscreen>
</iframe>
<div class="command" @click="doSelectItem(it)" style="text-align: center;height: 30px; line-height: 30px;">{{ it.monitorName }}</div>
</div>
</div>
<div class="all-pager">
@ -59,6 +60,8 @@ import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const data = reactive({
mode1:4,
mode2:9,
prjInfo: null,
projects: [],
selPrjId: '',
@ -67,9 +70,9 @@ const data = reactive({
videoMonitors: [],
selVideo: null,
elKey: 0,
showMode: 'sigle',
showMode: 'all',
total: 0,
showSize: 2,
showSize: 4,
showIndex: 1,
showList: [],
})
@ -98,10 +101,12 @@ function doSelectItem(it) {
loadVideo(data.selVideo);
}
function showAllVideo() {
data.selVideo.active = false;
if(data.selVideo){
data.selVideo.active = false;
}
data.selVideo = null;
data.showMode = "all";
data.showSize = 2;
data.showSize = data.mode1;
data.showIndex = 1;
showAllData();
}
@ -135,11 +140,12 @@ function loadData() {
it.active = false;
return it;
});
data.selVideo = data.videoMonitors.length > 0 ? data.videoMonitors[0] : null;
if (data.selVideo) {
data.selVideo.active = true;
loadVideo(data.selVideo);
}
showAllVideo();
//data.selVideo = data.videoMonitors.length > 0 ? data.videoMonitors[0] : null;
//if (data.selVideo) {
// data.selVideo.active = true;
// loadVideo(data.selVideo);
//}
});
}
/** 查询项目列表 */
@ -163,7 +169,12 @@ getProjectList();
position: absolute;
width: 100%;
padding: 12px;
.video-main{
height: 100%;
&.show-prjs{
height: calc(100% - 40px);
}
}
.video-name-list {
height: 100%;
background: #fff;