844 lines
24 KiB
Vue
844 lines
24 KiB
Vue
<!--
|
|
* @Author: zhangtq 2452618307@qq.com
|
|
* @Date: 2024-11-15 14:26:52
|
|
* @LastEditors: zhangtq 2452618307@qq.com
|
|
* @LastEditTime: 2025-01-20 18:30:16
|
|
* @FilePath: src/views/screen/components/video/components/VideoPlay.vue
|
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
|
-->
|
|
<template>
|
|
<div style="height: 100%">
|
|
<div class="handle-header">
|
|
<div class="btn-container">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-search"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
@click="openPlayBack"
|
|
v-if="logBtnShow"
|
|
>
|
|
查看回放
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-search"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
@click="openLog"
|
|
v-if="logBtnShow"
|
|
>
|
|
日志查看
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="closeVideos(1)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
>
|
|
关闭
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="closeVideos(2)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
>
|
|
全关闭
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
id="startTiming"
|
|
v-if="timingShow"
|
|
size="small"
|
|
icon="el-icon-check"
|
|
@click="changeTimingStatus(1)"
|
|
style="background: #a4a4a4; border: 1px solid #a4a4a4; padding: 6px"
|
|
:disabled="timingStatus"
|
|
>
|
|
开启定时
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
id="closeTiming"
|
|
v-if="timingShow"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="changeTimingStatus(2)"
|
|
style="background: #1aa4e1; border: 1px solid #1aa4e1; padding: 6px"
|
|
:disabled="!timingStatus"
|
|
>
|
|
关闭定时
|
|
</el-button>
|
|
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-arrow-left"
|
|
@click="onChangePages(1)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
:disabled="currentPage === 1"
|
|
>
|
|
上页
|
|
</el-button>
|
|
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-arrow-right"
|
|
@click="onChangePages(2)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
:disabled="currentPage === maxPages"
|
|
>
|
|
下页
|
|
</el-button>
|
|
|
|
<span style="margin-left: 10px; font-size: 1rem; color: #fff">
|
|
<el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
|
|
当前页：{{ currentPage }}
|
|
</span>
|
|
</div>
|
|
<div class="cell-tool">
|
|
<div class="bk-button-group">
|
|
<span
|
|
:class="{ active: cellCount === 1 }"
|
|
@click="changCellCount(1)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
1路
|
|
</span>
|
|
<span
|
|
:class="{ active: cellCount === 4 }"
|
|
@click="changCellCount(4)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
4路
|
|
</span>
|
|
<span
|
|
:class="{ active: cellCount === 6 }"
|
|
@click="changCellCount(6)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
6路
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="status">
|
|
<span>
|
|
<el-badge is-dot class="item" type="primary" style="margin-top: 8px"></el-badge>
|
|
总数：{{ videoNum.totalNum }}
|
|
</span>
|
|
<span style="margin-left: 10px">
|
|
<el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
|
|
在线：{{ videoNum.onlineNum }}
|
|
</span>
|
|
<span style="margin-left: 10px">
|
|
<el-badge is-dot class="item" type="info" style="margin-top: 8px"></el-badge>
|
|
离线：{{ videoNum.offlineNum }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- <el-form layout="inline" class="header">
|
|
<div style="display: flex; flex-direction: row">
|
|
<el-form-item style="width: 40%">
|
|
<div style="display: inline-block; float: left">
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-search"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
@click="openPlayBack"
|
|
v-if="logBtnShow"
|
|
>
|
|
查看回放
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-search"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
@click="openLog"
|
|
v-if="logBtnShow"
|
|
>
|
|
日志查看
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="closeVideos(1)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
>
|
|
关闭
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="closeVideos(2)"
|
|
style="background: #1aa4e1; padding: 6px"
|
|
>
|
|
全关闭
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
id="startTiming"
|
|
v-if="timingShow"
|
|
size="small"
|
|
icon="el-icon-check"
|
|
@click="changeTimingStatus(1)"
|
|
style="background: #a4a4a4; border: 1px solid #a4a4a4; padding: 6px"
|
|
:disabled="timingStatus"
|
|
>
|
|
开启定时
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
id="closeTiming"
|
|
v-if="timingShow"
|
|
size="small"
|
|
icon="el-icon-error"
|
|
@click="changeTimingStatus(2)"
|
|
style="background: #1aa4e1; border: 1px solid #1aa4e1; padding: 6px"
|
|
:disabled="!timingStatus"
|
|
>
|
|
关闭定时
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item style="width: 30%">
|
|
<div class="cell-tool">
|
|
<div class="bk-button-group">
|
|
<span
|
|
:class="{ active: cellCount === 1 }"
|
|
@click="changCellCount(1)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
1路
|
|
</span>
|
|
<span
|
|
:class="{ active: cellCount === 4 }"
|
|
@click="changCellCount(4)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
4路
|
|
</span>
|
|
<span
|
|
:class="{ active: cellCount === 6 }"
|
|
@click="changCellCount(6)"
|
|
style="margin-right: 5px; cursor: pointer; font-size: 22px"
|
|
>
|
|
6路
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<div class="status">
|
|
<span>
|
|
<el-badge is-dot class="item" type="primary" style="margin-top: 8px"></el-badge>
|
|
总数：{{ videoNum.totalNum }}
|
|
</span>
|
|
<span style="margin-left: 10px">
|
|
<el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
|
|
在线：{{ videoNum.onlineNum }}
|
|
</span>
|
|
<span style="margin-left: 10px">
|
|
<el-badge is-dot class="item" type="info" style="margin-top: 8px"></el-badge>
|
|
离线：{{ videoNum.offlineNum }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</el-form> -->
|
|
<div class="main-body">
|
|
<div class="left">
|
|
<div class="left-upper"></div>
|
|
<div class="left-lower"></div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="cell">
|
|
<div class="cell-player">
|
|
<div :class="cellClass(i)" v-for="i in cellCount" :key="i">
|
|
<player
|
|
:title="i"
|
|
:id="`player${i}`"
|
|
@playerClick="handlePlayerClick"
|
|
@dblclick="toggleFullScreen()"
|
|
v-if="cellCount != 6"
|
|
:activePlayer="activePlayer"
|
|
:is_history="true"
|
|
:ref="`player${i}`"
|
|
></player>
|
|
<player
|
|
:title="i"
|
|
:id="`player${i}`"
|
|
@playerClick="handlePlayerClick"
|
|
@dblclick="toggleFullScreen()"
|
|
v-if="cellCount == 6 && i != 2 && i != 3"
|
|
:activePlayer="activePlayer"
|
|
:is_history="true"
|
|
:ref="`player${i}`"
|
|
></player>
|
|
<template v-if="cellCount == 6 && i == 2">
|
|
<div class="cell-player-6-2-cell">
|
|
<player
|
|
:title="i"
|
|
:id="`player${i}`"
|
|
@playerClick="handlePlayerClick"
|
|
@dblclick="toggleFullScreen()"
|
|
:activePlayer="activePlayer"
|
|
:is_history="true"
|
|
:ref="`player${i}`"
|
|
></player>
|
|
<player
|
|
:title="i + 1"
|
|
:id="`player${i + 1}`"
|
|
@playerClick="handlePlayerClick"
|
|
@dblclick="toggleFullScreen()"
|
|
:activePlayer="activePlayer"
|
|
:is_history="true"
|
|
:ref="`player${i + 1}`"
|
|
></player>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<canvas id="canvas_video" style="display: none"></canvas>
|
|
<canvas id="huaImg" style="display: none"></canvas>
|
|
</div>
|
|
<div class="right-lower"></div>
|
|
</div>
|
|
</div>
|
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="55%" style="height: 90%">
|
|
<el-form
|
|
label-width="80px"
|
|
style="display: flex; flex-direction: column; justify-content: center; align-items: center"
|
|
>
|
|
<img :src="base64" alt="" style="width: 95vh; height: 53vh" />
|
|
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
|
|
<span style="color: red">*</span>
|
|
<span>备注：</span>
|
|
<el-input
|
|
type="textarea"
|
|
v-model="reason"
|
|
placeholder="请输入备注"
|
|
clearable
|
|
maxlength="200"
|
|
show-word-limit
|
|
style="width: 92vh; margin-left: 3vh; margin-top: 2vh"
|
|
v-no-whitespace
|
|
></el-input>
|
|
</div>
|
|
<el-form-item style="position: absolute; left: 75%; top: 93%">
|
|
<el-button type="primary" @click="storeCapture" v-preventReClick="3000">确定</el-button>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
<el-dialog title="日志" :visible.sync="logOpen" :destroy-on-close="true">
|
|
<VideoLog />
|
|
</el-dialog>
|
|
<el-dialog title="回放" :visible.sync="playBackOpen" :destroy-on-close="true">
|
|
<VideoPlayBack ref="playBack" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import player from './Player.vue'
|
|
import { insertCapture } from '@/api/screen/screen'
|
|
import screenfull from 'screenfull'
|
|
import VideoLog from '@/views/screen/components/video/components/VideoLog.vue'
|
|
import VideoPlayBack from '@/views/screen/components/video/components/VideoPlayBack.vue'
|
|
import doc from '@/components/bonus/Doc/index.vue'
|
|
|
|
import JessibucaH265 from '@/components/JessibucaH265'
|
|
import { getVideoList } from '@/api/screen/screen'
|
|
import { getQxToken } from '@/api/video/camera'
|
|
import { selectVideoLoginInfo } from '@/api/screen/screen'
|
|
|
|
export default {
|
|
components: { VideoPlayBack, VideoLog, player, JessibucaH265 },
|
|
props: {
|
|
videoArray: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
item: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
videoNum: {
|
|
type: Object,
|
|
default: () => ({
|
|
totalNum: 0,
|
|
onlineNum: 0,
|
|
offlineNum: 0,
|
|
}),
|
|
},
|
|
logBtnShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
timingShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
timingStatus: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
logOpen: false,
|
|
playBackOpen: false,
|
|
cellCount: 4,
|
|
treeData: [],
|
|
activeArray: [],
|
|
activePlayer: 1,
|
|
puidArray: [],
|
|
dialogVisible: false,
|
|
reason: '',
|
|
base64: '',
|
|
blob: '',
|
|
fullscreen: false,
|
|
fixedData: [],
|
|
}
|
|
},
|
|
methods: {
|
|
play(item) {
|
|
console.log('item', item)
|
|
console.log('puidArray', this.puidArray)
|
|
let tf = this.puidArray.some(val => {
|
|
return val.puid === item.puid
|
|
})
|
|
if (tf) {
|
|
this.$message({
|
|
message: '此设备已经在播放中！！！',
|
|
type: 'warning',
|
|
})
|
|
return
|
|
} else {
|
|
this.puidArray.push(item)
|
|
this.playRealtimeVideo(item.puid, Number(item.ballIndex))
|
|
}
|
|
},
|
|
playVideo: function (i, activePlayer) {
|
|
setTimeout(() => {
|
|
const playerRef = `player${activePlayer}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
if (!this.activeArray.includes(activePlayer)) {
|
|
this.activeArray.push(activePlayer)
|
|
}
|
|
setTimeout(() => {
|
|
playerInstance[0].openVideo(this.puidArray[i].puid, Number(this.puidArray[i].ballIndex))
|
|
}, 500)
|
|
} else {
|
|
console.error(`Player instance for ${playerRef} is not available.`)
|
|
}
|
|
}, 500)
|
|
},
|
|
changCellCount(count) {
|
|
this.cellCount = count
|
|
let length = this.puidArray.length > count ? count : this.puidArray.length
|
|
this.puidArray = this.puidArray.sort((a, b) => a.activePlayer - b.activePlayer)
|
|
for (let i = 0; i < length; i++) {
|
|
this.closeVideoByChange(this.puidArray[i].activePlayer)
|
|
if (this.puidArray[i].activePlayer !== i + 1) {
|
|
this.activePlayer = i + 1
|
|
this.puidArray[i].activePlayer = i + 1
|
|
} else {
|
|
this.activePlayer = this.puidArray[i].activePlayer
|
|
}
|
|
this.playVideo(i, this.activePlayer)
|
|
this.$emit('changCellCount', count)
|
|
}
|
|
},
|
|
closeVideoByChange(activePlayer) {
|
|
const playerRef = `player${activePlayer}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
playerInstance[0].closeVideo()
|
|
this.activeArray.splice(this.activeArray.indexOf(activePlayer), 1)
|
|
}
|
|
},
|
|
closeVideos(type) {
|
|
if (type === 2) {
|
|
this.$emit('changeTimingStatus', 2)
|
|
while (this.activeArray.length > 0) {
|
|
this.closeVideoOne(this.activeArray[0])
|
|
}
|
|
} else {
|
|
this.closeVideoOne(this.activePlayer)
|
|
}
|
|
},
|
|
closeVideoOne(playerIndex) {
|
|
const playerRef = `player${playerIndex}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
playerInstance[0].closeVideo()
|
|
this.activeArray.splice(this.activeArray.indexOf(playerIndex), 1)
|
|
this.puidArray.splice(
|
|
this.puidArray.find(item => item.activePlayer === playerIndex),
|
|
1
|
|
)
|
|
}
|
|
},
|
|
async playRealtimeVideo(puid, ballIndex) {
|
|
if (this.activeArray.length === this.cellCount) {
|
|
this.$message.error('请先关闭一个视频再打开新视频！')
|
|
return
|
|
}
|
|
for (let i = 1; i <= this.cellCount; i++) {
|
|
if (!this.activeArray.includes(i)) {
|
|
this.activePlayer = i
|
|
break
|
|
}
|
|
}
|
|
const playerRef = `player${this.activePlayer}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
this.activeArray.push(Number(this.activePlayer))
|
|
this.puidArray[this.puidArray.length - 1].activePlayer = this.activePlayer
|
|
playerInstance[0].openVideo(puid, ballIndex)
|
|
} else {
|
|
console.error(`Player instance for ${playerRef} is not available.`)
|
|
}
|
|
this.$emit('playerClick', {
|
|
item: this.puidArray[this.puidArray.length - 1],
|
|
})
|
|
},
|
|
handlePlayerClick(e) {
|
|
this.activePlayer = e.title
|
|
let item = this.puidArray.find(item => item.activePlayer === this.activePlayer)
|
|
this.$emit('playerClick', {
|
|
item: item,
|
|
})
|
|
},
|
|
captureScreen(e) {
|
|
console.log('e:====', e)
|
|
console.log('this.activePlayer:====', this.activePlayer)
|
|
var canvas = document.getElementById('huaImg')
|
|
var video = document.getElementById(`player${this.activePlayer}`)
|
|
// const playerRef = `player${this.activePlayer}`
|
|
// const video = this.$refs[playerRef]
|
|
let ctx = canvas.getContext('2d')
|
|
canvas.width = 1080
|
|
canvas.height = 720
|
|
ctx.drawImage(video, 0, 0, 1080, 720)
|
|
const base64Image = canvas.toDataURL('image/png')
|
|
this.base64 = base64Image
|
|
this.blob = this.base64ToBlob(base64Image, 'image/png')
|
|
if (e === 2) {
|
|
saveAs(base64Image, new Date().getTime() + '.png')
|
|
} else {
|
|
this.openDialog()
|
|
}
|
|
},
|
|
openDialog() {
|
|
this.dialogVisible = true
|
|
},
|
|
base64ToBlob(base64, mime) {
|
|
const byteString = atob(base64.split(',')[1])
|
|
const ab = new ArrayBuffer(byteString.length)
|
|
const ia = new Uint8Array(ab)
|
|
for (let i = 0; i < byteString.length; i++) {
|
|
ia[i] = byteString.charCodeAt(i)
|
|
}
|
|
return new Blob([ab], { type: mime })
|
|
},
|
|
storeCapture() {
|
|
if (!this.reason) {
|
|
this.$message({
|
|
message: '请输入备注',
|
|
type: 'warning',
|
|
})
|
|
return
|
|
}
|
|
const param = new FormData()
|
|
param.append('file', this.blob)
|
|
|
|
const activePlayerItem = this.puidArray.find(item => item.activePlayer === this.activePlayer)
|
|
activePlayerItem.fileType = 1
|
|
activePlayerItem.reason = this.reason
|
|
param.append('params', JSON.stringify(activePlayerItem))
|
|
insertCapture(param).then(res => {
|
|
this.$message({
|
|
message: '保存成功',
|
|
type: 'success',
|
|
})
|
|
this.dialogVisible = false
|
|
this.reason = ''
|
|
this.blob = ''
|
|
this.base64 = ''
|
|
this.$parent.getSnapPhotoList()
|
|
})
|
|
},
|
|
//双击全屏
|
|
toggleFullScreen() {
|
|
const playerRef = `player${this.activePlayer}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
if (screenfull.isEnabled) {
|
|
if (screenfull.isFullscreen) {
|
|
screenfull.exit()
|
|
} else {
|
|
screenfull.request(playerInstance[0].$el)
|
|
}
|
|
} else {
|
|
this.$message.error('当前不支持全屏模式！！！')
|
|
}
|
|
} else {
|
|
console.error(`Player instance for ${playerRef} is not available.`)
|
|
}
|
|
},
|
|
openLog() {
|
|
this.logOpen = true
|
|
},
|
|
openPlayBack() {
|
|
this.playBackOpen = true
|
|
},
|
|
changeTimingStatus(type) {
|
|
const startTiming = document.getElementById('startTiming')
|
|
const closeTiming = document.getElementById('closeTiming')
|
|
if (type === 1) {
|
|
startTiming.style.background = '#a4a4a4'
|
|
startTiming.style.border = '1px solid #a4a4a4'
|
|
closeTiming.style.background = '#1aa4e1'
|
|
closeTiming.style.border = '1px solid #1aa4e1'
|
|
} else {
|
|
startTiming.style.background = '#1aa4e1'
|
|
startTiming.style.border = '1px solid #1aa4e1'
|
|
closeTiming.style.background = '#a4a4a4'
|
|
closeTiming.style.border = '1px solid #a4a4a4'
|
|
}
|
|
this.$emit('changeTimingStatus', type)
|
|
},
|
|
autoPlayVideo(item) {
|
|
const playerRef = `player${this.activePlayer}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
this.activeArray.push(Number(this.activePlayer))
|
|
item.activerPlayer = this.activePlayer
|
|
this.puidArray.push(item)
|
|
setTimeout(() => {
|
|
playerInstance[0].openVideo(item.puid, item.ballIndex)
|
|
}, 1000 * this.activePlayer)
|
|
} else {
|
|
console.error(`Player instance for ${playerRef} is not available.`)
|
|
}
|
|
this.activePlayer++
|
|
},
|
|
closeAllVideo() {
|
|
for (let i = 0; i <= this.activeArray.length; i++) {
|
|
const playerRef = `player${this.activeArray[i]}`
|
|
const playerInstance = this.$refs[playerRef]
|
|
if (playerInstance && playerInstance[0]) {
|
|
setTimeout(() => {
|
|
playerInstance[0].closeVideo()
|
|
}, 1000 * i)
|
|
}
|
|
}
|
|
this.activePlayer = 1
|
|
this.activeArray = []
|
|
this.puidArray = []
|
|
},
|
|
|
|
// 获取设备列表
|
|
async getDeviceList() {
|
|
const res = await getVideoList({
|
|
deviceType: '固定摄像头',
|
|
})
|
|
this.fixedData = res.data
|
|
},
|
|
},
|
|
computed: {
|
|
cellClass() {
|
|
return function (index) {
|
|
switch (this.cellCount) {
|
|
case 1:
|
|
return ['cell-player-1']
|
|
case 4:
|
|
return ['cell-player-4']
|
|
case 6:
|
|
if (index == 1) return ['cell-player-6-1']
|
|
if (index == 2) return ['cell-player-6-2']
|
|
if (index == 3) return ['cell-player-6-none']
|
|
return ['cell-player-6']
|
|
case 9:
|
|
return ['cell-player-9']
|
|
case 16:
|
|
return ['cell-player-16']
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
},
|
|
cellClassNew() {
|
|
if (this.cellCount === 1) return 'container-1'
|
|
if (this.cellCount === 4) return 'container-4'
|
|
},
|
|
},
|
|
|
|
// mounted() {
|
|
// this.getDeviceList()
|
|
// },
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.header {
|
|
background-color: transparent;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 7vh;
|
|
padding: 10px;
|
|
}
|
|
|
|
.main-body {
|
|
width: 100%;
|
|
height: 90%;
|
|
display: flex;
|
|
|
|
.right {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.cell {
|
|
margin-top: 0.5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bk-button-group .active {
|
|
color: skyblue;
|
|
}
|
|
|
|
.cell-tool {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
margin-top: -1px;
|
|
color: whitesmoke;
|
|
// margin-left: 18.5%;
|
|
}
|
|
|
|
.cell-player {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 75vh;
|
|
}
|
|
|
|
.cell-player-4 {
|
|
width: 50%;
|
|
height: 50% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-6-1 {
|
|
width: 66.66%;
|
|
height: 66.66% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-6-2 {
|
|
width: 33.33%;
|
|
height: 66.66% !important;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cell-player-6-none {
|
|
display: none;
|
|
}
|
|
|
|
.cell-player-6-2-cell {
|
|
width: 100%;
|
|
height: 50% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-6 {
|
|
width: 33.33%;
|
|
height: 33.33% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-9 {
|
|
width: 33.33%;
|
|
height: 33.33% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cell-player-16 {
|
|
width: 25%;
|
|
height: 25% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ant-select {
|
|
width: 180px;
|
|
}
|
|
|
|
.status {
|
|
// width: 30%;
|
|
float: right;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: right;
|
|
// margin-right: 2rem;
|
|
font-size: 1rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: white;
|
|
|
|
span {
|
|
margin: 0 10px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.container-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.container-4 {
|
|
width: calc((100% / 2) - 6px);
|
|
margin-left: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.container-4:nth-child(2n) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.handle-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 7vh;
|
|
padding: 10px 0;
|
|
|
|
.btn-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|