视频

src/main/vue/src/components/EZUIKitJs.vue

@@ -26,7 +26,7 @@ export default {
             this.device = form.deviceSerial;
 
             var player = new EZUIKit.EZUIKitPlayer({
-                autoplay: false,
+                autoplay: true,
                 id: 'video-container',
                 accessToken: this.token,
                 url: 'ezopen://open.ys7.com/' + this.device + '/1.live',

src/main/vue/src/components/VideoGrid.vue

@@ -0,0 +1,86 @@
+<template>
+    <el-card>
+        <div slot="header">
+            <span>{{ organizer }}{{ orgname }}</span>
+        </div>
+        <div class="video" @click="showFullScreen" :id="name" style="width:100%;height:400px">
+            <!-- <div class="bottom"></div> -->
+        </div>
+    </el-card>
+</template>
+
+<script>
+import EZUIKit from 'ezuikit-js';
+
+export default {
+    name: 'VideoGrid',
+    props: ['token', 'device', 'name', 'organizer', 'orgname'],
+    data() {
+        return {
+            player: null
+        };
+    },
+    methods: {
+        init(form = {}) {
+            let token = form.accessToken || this.token;
+            let device = form.deviceSerial || this.device;
+
+            this.player = new EZUIKit.EZUIKitPlayer({
+                autoplay: true,
+                id: this.name || 'video-container',
+                accessToken: token,
+                url: 'ezopen://open.ys7.com/' + device + '/1.live',
+                template: 'security', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
+                // 视频上方头部控件
+                // header: ['capturePicture', 'save', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
+                plugin: ['talk'] // 加载插件，talk-对讲
+                // 视频下方底部控件
+                // footer: ['talk', 'broadcast', 'hd', 'fullScreen'] // 如果template参数不为simple,该字段将被覆盖
+                // audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
+                // openSoundCallBack: data => console.log('开启声音回调', data),
+                // closeSoundCallBack: data => console.log('关闭声音回调', data),
+                // startSaveCallBack: data => console.log('开始录像回调', data),
+                // stopSaveCallBack: data => console.log('录像回调', data),
+                // capturePictureCallBack: data => console.log('截图成功回调', data),
+                // fullScreenCallBack: data => console.log('全屏回调', data),
+                // getOSDTimeCallBack: data => console.log('获取OSDTime回调', data),
+            });
+            console.group('mounted 组件挂载完毕状态===============》');
+        },
+        showFullScreen() {
+            if (!this.player) {
+                this.init();
+                return;
+            }
+            this.player.fullScreen();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.el-card {
+    width: 30%;
+    margin-right: 3%;
+    margin-bottom: 20px;
+}
+
+.video {
+    position: relative;
+    cursor: pointer;
+    /deep/ iframe {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.bottom {
+    background-color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 30px;
+    z-index: 3;
+}
+</style>

src/main/vue/src/router.js

@@ -195,6 +195,14 @@ const router = new Router({
                         title: '监管管理'
                     }
                 },
+                {
+                    path: '/videoList',
+                    name: 'videoList',
+                    component: () => import(/* webpackChunkName: "recordList" */ '@/views/record/VideoList.vue'),
+                    meta: {
+                        title: '视频监控'
+                    }
+                },
                 {
                     path: '/recordDistrictList2',
                     name: 'RecordDistrictList2',

src/main/vue/src/views/record/RecordRegulationList.vue

@@ -37,7 +37,7 @@
             <!-- <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input> -->
             <div style="padding-left: 20px">
                 <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">查询 </el-button>
-                <el-button @click="getData" type="primary" icon="el-icon-video-camera" class="filter-item"
+                <el-button @click="showVideo" type="primary" icon="el-icon-video-camera" class="filter-item"
                     >监控平台
                 </el-button>
             </div>
@@ -101,6 +101,7 @@ import pageableTable from '@/mixins/pageableTable';
 import format from 'date-fns/format';
 import startOfDay from 'date-fns/startOfDay';
 import endOfDay from 'date-fns/endOfDay';
+import { th } from 'date-fns/locale';
 
 export default {
     name: 'RecordRegulationList',
@@ -282,6 +283,11 @@ export default {
                     rid: row.id
                 }
             });
+        },
+        showVideo() {
+            this.$router.push({
+                path: '/videoList'
+            });
         }
     }
 };

src/main/vue/src/views/record/VideoList.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="edit-view">
+        <el-form :model="form" inline size="mini">
+            <el-form-item label="考级地址">
+                <el-input></el-input>
+            </el-form-item>
+            <el-form-item label="考级地址">
+                <el-input></el-input>
+            </el-form-item>
+        </el-form>
+
+        <div class="video-list">
+            <video-grid
+                v-for="item in list"
+                ref="video"
+                :token="token"
+                :device="item.deviceSerial"
+                :key="item.id"
+                :organizer="item.organizer"
+                :orgname="item.name"
+                :name="`video_${item.id}`"
+            ></video-grid>
+        </div>
+    </div>
+</template>
+
+<script>
+import VideoGrid from '../../components/VideoGrid.vue';
+export default {
+    components: { VideoGrid },
+    data() {
+        return {
+            token: '',
+            form: {},
+            list: []
+        };
+    },
+    mounted() {
+        this.$http
+            .get('ezvizToken/getToken')
+            .then(res => {
+                this.token = res;
+                return this.$http.post('/examRoom/byToday');
+            })
+            .then(res => {
+                this.list = res;
+                this.$nextTick(() => {
+                    res.forEach((item, index) => {
+                        this.$refs.video[index].init();
+                    });
+                });
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.video-list {
+    display: flex;
+    flex-wrap: wrap;
+}
+</style>