From fb843d41c1e186b2109bfeea73509cad2b135cdc Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: 星期四, 21 四月 2022 12:33:10 +0800
Subject: [PATCH] 1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等
---
web_src/src/components/live.vue | 77 ++++++++++++++++++--------------------
1 files changed, 36 insertions(+), 41 deletions(-)
diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index fbe5246..366672d 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -1,51 +1,46 @@
<template>
- <div id="devicePosition" style="height: 100%">
- <el-container style="height: 100%">
- <el-header>
- <uiHeader></uiHeader>
- </el-header>
- <el-container v-loading="loading" element-loading-text="鎷煎懡鍔犺浇涓�" style="margin: 0 20px;">
- <el-aside width="300px" style="background-color: #ffffff">
- <div style="text-align: center;padding-top: 20px;">璁惧鍒楄〃</div>
- <el-menu v-loading="loading">
- <el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
- <template slot="title" >
- <i class="el-icon-location-outline"></i>
- {{device.name}}
- </template>
- <ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
- </el-submenu>
- </el-menu>
- </el-aside>
- <el-container>
- <!-- <LivePlay></LivePlay> -->
- <el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
- 鍒嗗睆:
- <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
- <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
- <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
- </el-header>
- <el-main>
- <div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;">
- <div v-for="i in spilt" :key="i" class="play-box"
- :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
- @click="playerIdx = (i-1)"
- >
- <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
- <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
- :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
- <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
- </div>
- </div>
- </el-main>
- </el-container>
+ <div id="devicePosition" style="height: 100%;width: 100%">
+ <el-container v-loading="loading" element-loading-text="鎷煎懡鍔犺浇涓�">
+ <el-aside width="300px" style="background-color: #ffffff">
+ <div style="text-align: center;padding-top: 20px;">璁惧鍒楄〃</div>
+ <el-menu v-loading="loading">
+ <el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)">
+ <template slot="title" >
+ <i class="el-icon-location-outline"></i>
+ {{device.name}}
+ </template>
+ <ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree>
+ </el-submenu>
+ </el-menu>
+ </el-aside>
+ <el-container>
+ <!-- <LivePlay></LivePlay> -->
+ <el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;">
+ 鍒嗗睆:
+ <i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/>
+ <i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/>
+ <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
+ </el-header>
+ <el-main>
+ <div style="width: 100%;height: calc( 100vh - 150px );display: flex;flex-wrap: wrap;background-color: #000;">
+ <div v-for="i in spilt" :key="i" class="play-box"
+ :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
+ @click="playerIdx = (i-1)"
+ >
+ <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div>
+ <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true"
+ :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
+ <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
+ </div>
+ </div>
+ </el-main>
</el-container>
</el-container>
</div>
</template>
<script>
- import uiHeader from "./UiHeader.vue";
+ import uiHeader from "../layout/UiHeader.vue";
import player from './dialog/jessibuca.vue'
import ChannelTree from './channelTree.vue'
--
Gitblit v1.8.0