提交

whychdw

2021-04-19 0846e2a77fb1bf078c199b1f2a5994aad1afc4fa

 src/pages/index.vue

@@ -1,13 +1,117 @@
<template>
$END$
    <div class="video-wrapper">
        <video-header></video-header>
        <div class="video-body">
            <el-row :gutter="20">
                <el-col :span="8" class="video-item" v-for="item in videos" :key="item.key">
                    <video-item :flag="item.key" :id="item.id" :name="item.name" :ip="item.ip" @close="close"></video-item>
                </el-col>
                <el-col :span="8" class="video-item">
                    <layout-box2>
                        <div class="add-video-item" @click="drawer=true">
                            <div class="add-video-text">+</div>
                        </div>
                    </layout-box2>
                </el-col>
            </el-row>
        </div>
        <el-drawer
            :withHeader="false"
            :visible.sync="drawer"
            direction="rtl">

        </el-drawer>
    </div>
</template>

<script>
import VideoHeader from "@/components/video-header";
import VideoItem from "@/components/VideoItem";
import LayoutBox2 from "@/components/LayoutBox2";

export default {
name: "index.vue"
    name: "index",
    components: {LayoutBox2, VideoItem, VideoHeader},
    data() {
        return {
            drawer: false,
            videos: [
                {
                    key: 'video1',
                    id: '42010013',
                    ip: '192.168.10.165',
                    name: '测试视频'
                },
                {
                    key: 'video2',
                    id: '42010013',
                    ip: '192.168.10.2',
                    name: '测试视频1'
                },
            ]
        }
    },
    methods: {
        close(ip) {
            this.videos = this.videos.filter(item => {
                return item.ip != ip;
            });
        },
        searchAll() {
            this.$apis.station.searchAll().then(res=>{
                console.log(res);
            }).catch(error=>{
                console.log(error);
            });
        },
        searchAllShow() {
            this.$apis.videoManage.searchAllShow().then(res=>{
                console.log(res);
            }).catch(error=>{
                console.log(error);
            });
        }
    },
    mounted() {
        this.searchAll();
        this.searchAllShow();
    }
}
</script>

<style scoped>
.video-wrapper {
    display: flex;
    height: 100vh;
    background-image: url("../assets/images/video-bg.jpg");
    background-size: 100% 100%;
    flex-direction: column;
}

.video-body {
    flex: 1;
    padding: 0 8px;
}

.video-item {
    margin-top: 12px;
    margin-bottom: 12px;
    height: calc(33.3vh - 44px);
}

.add-video-item {
    position: relative;
    height: 100%;
    background-color: #061c67;
}

.add-video-text {
    position: absolute;
    color: #0069bc;
    font-size: 100px;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -50px;
}
</style>