加视频

src/main/java/com/izouma/wenlvju/domain/Video.java

@@ -0,0 +1,22 @@
+package com.izouma.wenlvju.domain;
+
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import javax.persistence.Entity;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+@Builder
+@Entity
+public class Video extends BaseEntity {
+    private Long regulatoryId;
+
+    private Long url;
+
+    private Long name;
+}

src/main/vue/src/router.js

@@ -87,6 +87,14 @@ const router = new Router({
                         title: '用户管理'
                     }
                 },
+                {
+                    path: '/video',
+                    name: 'video',
+                    component: () => import(/* webpackChunkName: "userList" */ '@/views/Video.vue'),
+                    meta: {
+                        title: '专家管理'
+                    }
+                },
                 {
                     path: '/expertList',
                     name: 'expertList',

src/main/vue/src/views/RegulatoryEdit.vue

@@ -88,6 +88,7 @@
             <el-form-item prop="other" label="其他">
                 <el-input type="textarea" v-model="formData.other"></el-input>
             </el-form-item>
+            <el-form-item><file-upload></file-upload></el-form-item>
             <el-form-item>
                 <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
                 <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>

src/main/vue/src/views/RegulatoryList.vue

@@ -86,10 +86,10 @@
             </el-table-column>
             <el-table-column prop="other" label="其他"> </el-table-column>
             <el-table-column label="视频" min-width="100">
-                <el-button type="primary" size="mini" plain @click="distribute('暂无视频')">查看视频</el-button>
+                <el-button type="primary" size="mini" plain @click="dialogVisible = true">查看视频</el-button>
             </el-table-column>
             <el-table-column label="直播" min-width="100">
-                <el-button type="primary" size="mini" plain @click="distribute('暂无直播')">查看直播</el-button>
+                <el-button type="primary" size="mini" plain @click="showViedo = true">查看直播</el-button>
             </el-table-column>
             <el-table-column label="操作" align="center" fixed="right" min-width="150">
                 <template slot-scope="{ row }">
@@ -119,6 +119,41 @@
             >
             </el-pagination>
         </div>
+        <el-dialog title="视频列表" :visible.sync="dialogVisible" width="600px" center>
+            <el-table :data="vurl">
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="url" label="地址" min-width="200px"></el-table-column>
+                <el-table-column label="操作"
+                    ><template slot-scope="{ row }">
+                        <el-button @click="playVideo(row)">播放</el-button>
+                    </template></el-table-column
+                >
+            </el-table>
+        </el-dialog>
+        <el-dialog
+            class="videoDialog"
+            destroy-on-close
+            center
+            append-to-body
+            :visible.sync="showViedo"
+            @close="closeEvent"
+            width="80%"
+        >
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="height: 100%; max-width: 100%"
+                oncontextmenu="return false;"
+                onmouseleave="leaveVideo(this)"
+                ref="video"
+                v-if="showViedo"
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+
+            <div class="close" @click="showViedo = false">关闭</div>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -133,13 +168,40 @@ export default {
             multipleMode: false,
             search: '',
             url: '/regulatory/all',
-            downloading: false
+            downloading: false,
+            showViedo: false,
+            dialogVisible: false,
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4',
+            vurl: [
+                {
+                    name: '舞蹈艺考',
+                    url: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4'
+                },
+                {
+                    name: '表演艺考',
+                    url: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-24CxnKwMnv.mp4'
+                },
+                {
+                    name: '舞蹈艺考',
+                    url: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-40sDbsFufH.mp4'
+                }
+                // {
+                //     name: '唱歌艺考',
+                //     url: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-48-22BtOKfvcx.mp4'
+                // }
+            ]
         };
     },
     computed: {
         selection() {
             return this.$refs.table.selection.map(i => i.id);
         }
+        // videoUrl() {
+        //     return 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4';
+        //     // return 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4';
+        //     // return 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4';
+        //     // return 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4';
+        // }
     },
     methods: {
         beforeGetData() {
@@ -219,8 +281,61 @@ export default {
             this.$alert(content, '提示', {
                 confirmButtonText: '确定'
             });
+        },
+        closeEvent() {
+            document.exitPictureInPicture();
+            this.videoUrl =
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4';
+        },
+        playVideo(row) {
+            this.dialogVisible = false;
+            this.showViedo = true;
+            this.videoUrl = row.url;
         }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.videoDialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .el-dialog {
+        max-width: 900px;
+        margin-top: 0px;
+
+        .close {
+            position: absolute;
+            right: 0px;
+            top: -42px;
+            width: 71px;
+            height: 32px;
+            background: #00000015;
+
+            font-size: 12px;
+            color: #fdffff;
+            line-height: 32px;
+            text-align: center;
+            cursor: pointer;
+
+            &:hover {
+                background: #00000055;
+            }
+        }
+    }
+    .el-dialog__header {
+        display: none;
+    }
+
+    .el-dialog__body {
+        padding: 0;
+
+        video {
+            display: block;
+            height: auto;
+            width: 100%;
+            outline: none;
+        }
+    }
+}
+</style>

src/main/vue/src/views/Dashboard copy.vue → src/main/vue/src/views/Video.vue

@@ -4,7 +4,7 @@
             style="margin: 0 -10px;"
             :layout="layout"
             :col-num="12"
-            :row-height="30"
+            :row-height="10"
             :is-draggable="editable"
             :is-resizable="editable"
             :is-mirrored="false"
@@ -32,21 +32,23 @@
 
 <script>
 import { GridLayout, GridItem } from 'vue-grid-layout';
-import UserWidget from '../widgets/UserWidget';
-import LineChartWidget from '../widgets/LineChartWidget';
-import BarChartWidget from '../widgets/BarChartWidget';
-import PieChartWidget from '../widgets/PieChartWidget';
+import Video1 from '../widgets/Video1';
+import Video2 from '../widgets/Video2';
+import Video3 from '../widgets/Video3';
+import Video4 from '../widgets/Video4';
 
 export default {
     created() {},
     data() {
         return {
             layout: [
-                { x: 0, y: 0, w: 6, h: 4, i: '0', name: 'UserWidget' },
-                { x: 6, y: 0, w: 6, h: 4, i: '1', name: 'UserWidget' },
-                { x: 0, y: 4, w: 6, h: 6, i: '2', name: 'BarChartWidget' },
-                { x: 0, y: 10, w: 6, h: 6, i: '3', name: 'LineChartWidget' },
-                { x: 6, y: 4, w: 6, h: 12, i: '4', name: 'PieChartWidget' }
+                { x: 0, y: 0, w: 4, h: 13.5, i: '0', name: 'Video3' },
+                { x: 0, y: 0, w: 4, h: 12.5, i: '0', name: 'Video1' },
+                { x: 4, y: 4, w: 4, h: 12.5, i: '3', name: 'Video4' },
+                { x: 8, y: 4, w: 3, h: 19, i: '1', name: 'Video2' },
+                { x: 4, y: 12.5, w: 4, h: 12.5, i: '4', name: 'Video1' }
+                // { x: 0, y: 12.5, w: 4, h: 12.5, i: '5', name: 'Video4' }
+                // { x: 8, y: 0, w: 4, h: 13.5, i: '6', name: 'Video3' }
             ],
             editable: false
         };
@@ -58,12 +60,10 @@ export default {
         }
     },
     components: {
-        GridLayout,
-        GridItem,
-        UserWidget,
-        LineChartWidget,
-        BarChartWidget,
-        PieChartWidget
+        Video1,
+        Video2,
+        Video3,
+        Video4
     }
 };
 </script>

src/main/vue/src/widgets/Video1.vue

@@ -0,0 +1,55 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <!-- <i class="fa-fw fas fa-user fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">User</div>
+            <div class="num">4,258</div>
+        </div> -->
+        <div>
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="max-width: 100%"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay="autoplay"
+                loop
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex'
+            },
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-24CxnKwMnv.mp4'
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/Video2.vue

@@ -0,0 +1,56 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <!-- <i class="fa-fw fas fa-user fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">User</div>
+            <div class="num">4,258</div>
+        </div> -->
+        <div>
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="max-width: 100%"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay="autoplay"
+                loop
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            },
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-15-30-43nvcwuumz.mp4'
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/Video3.vue

@@ -0,0 +1,56 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <!-- <i class="fa-fw fas fa-user fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">User</div>
+            <div class="num">4,258</div>
+        </div> -->
+        <div>
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="max-width: 100%"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay="autoplay"
+                loop
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            },
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4'
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>

src/main/vue/src/widgets/Video4.vue

@@ -0,0 +1,56 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle">
+        <!-- <i class="fa-fw fas fa-user fa-3x" style="color: #40c9c6;"></i>
+        <div class="info">
+            <div class="text">User</div>
+            <div class="num">4,258</div>
+        </div> -->
+        <div>
+            <video
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="max-width: 100%"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay="autoplay"
+                loop
+            >
+                您的浏览器不支持 video 标签。
+            </video>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {
+                display: 'flex',
+                alignItems: 'center'
+            },
+            videoUrl: 'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-40sDbsFufH.mp4'
+        };
+    },
+    components: {
+        WidgetCard
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+</style>