视频监控大屏

yanzhu-bigscreen/src/api/index.js

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

yanzhu-bigscreen/src/api/videoMonitor.js

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

yanzhu-bigscreen/src/assets/icons/svg/4screen.svg

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

yanzhu-bigscreen/src/assets/icons/svg/9screen.svg

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

yanzhu-bigscreen/src/assets/icons/svg/video.svg

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

yanzhu-bigscreen/src/components/header.vue

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

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

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

yanzhu-bigscreen/src/router/index.js

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

yanzhu-bigscreen/src/views/videoMonitor.vue

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

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

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

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

@@ -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() {
+    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;