修复了分配监控的页面自适应
This commit is contained in:
尚鹏暃
228
web/.eslintrc.js
228
web/.eslintrc.js
@@ -1,198 +1,44 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
sourceType: 'module'
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true,
|
||||
browser: true,
|
||||
},
|
||||
extends: ["plugin:vue/essential", "@vue/standard"],
|
||||
parserOptions: {
|
||||
parser: "babel-eslint",
|
||||
},
|
||||
extends: ['plugin:vue/recommended', 'eslint:recommended'],
|
||||
|
||||
// add your custom rules here
|
||||
//it is base on https://github.com/vuejs/eslint-config-vue
|
||||
rules: {
|
||||
"vue/max-attributes-per-line": [2, {
|
||||
"singleline": 10,
|
||||
"multiline": {
|
||||
"max": 1,
|
||||
"allowFirstLine": false
|
||||
}
|
||||
}],
|
||||
"vue/singleline-html-element-content-newline": "off",
|
||||
"vue/multiline-html-element-content-newline":"off",
|
||||
"vue/name-property-casing": ["error", "PascalCase"],
|
||||
"vue/no-v-html": "off",
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [2, '1tbs', {
|
||||
'allowSingleLine': true
|
||||
}],
|
||||
'camelcase': [0, {
|
||||
'properties': 'always'
|
||||
}],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
'eqeqeq': ["error", "always", {"null": "ignore"}],
|
||||
'generator-star-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'handle-callback-err': [2, '^(err|error)$'],
|
||||
'indent': [2, 2, {
|
||||
'SwitchCase': 1
|
||||
}],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [2, {
|
||||
'beforeColon': false,
|
||||
'afterColon': true
|
||||
}],
|
||||
'keyword-spacing': [2, {
|
||||
'before': true,
|
||||
'after': true
|
||||
}],
|
||||
'new-cap': [2, {
|
||||
'newIsCap': true,
|
||||
'capIsNew': false
|
||||
}],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-console': 'off',
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 0,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [2, {
|
||||
'allowLoop': false,
|
||||
'allowSwitch': false
|
||||
}],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [2, {
|
||||
'max': 1
|
||||
}],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [2, {
|
||||
'defaultAssignment': false
|
||||
}],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [2, {
|
||||
'vars': 'all',
|
||||
'args': 'none'
|
||||
}],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [2, {
|
||||
'initialized': 'never'
|
||||
}],
|
||||
'operator-linebreak': [2, 'after', {
|
||||
'overrides': {
|
||||
'?': 'before',
|
||||
':': 'before'
|
||||
}
|
||||
}],
|
||||
'padded-blocks': [2, 'never'],
|
||||
'quotes': [2, 'single', {
|
||||
'avoidEscape': true,
|
||||
'allowTemplateLiterals': true
|
||||
}],
|
||||
'semi': [2, 'never'],
|
||||
'semi-spacing': [2, {
|
||||
'before': false,
|
||||
'after': true
|
||||
}],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [2, {
|
||||
'words': true,
|
||||
'nonwords': false
|
||||
}],
|
||||
'spaced-comment': [2, 'always', {
|
||||
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
|
||||
}],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
'yoda': [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', {
|
||||
objectsInObjects: false
|
||||
}],
|
||||
'array-bracket-spacing': [2, 'never']
|
||||
}
|
||||
// Disable or downgrade problematic rules
|
||||
"vue/require-prop-types": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
"vue/no-unused-vars": "warn",
|
||||
"no-unused-vars": "warn",
|
||||
"no-undef": "warn",
|
||||
eqeqeq: "warn",
|
||||
"no-return-assign": "warn",
|
||||
"new-cap": "warn",
|
||||
"vue/html-self-closing": "off",
|
||||
"vue/html-closing-bracket-spacing": "off",
|
||||
"vue/this-in-template": "off",
|
||||
"vue/require-v-for-key": "warn",
|
||||
"vue/valid-v-model": "warn",
|
||||
"vue/attributes-order": "off",
|
||||
"no-multiple-empty-lines": "warn",
|
||||
|
||||
// Style rules - make them warnings instead of errors
|
||||
quotes: ["warn", "single"],
|
||||
"comma-dangle": ["warn", "never"],
|
||||
"space-in-parens": "warn",
|
||||
"comma-spacing": "warn",
|
||||
"object-curly-spacing": "warn",
|
||||
"arrow-spacing": "warn",
|
||||
semi: ["warn", "never"],
|
||||
"no-multi-spaces": "warn",
|
||||
},
|
||||
globals: {
|
||||
// Define global variables to prevent 'undefined' errors
|
||||
ZLMRTCClient: "readonly",
|
||||
jessibuca: "readonly",
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto; padding: 30px">
|
||||
<div style="height: 30px; display: grid; grid-template-columns: auto auto">
|
||||
<div>通道列表</div>
|
||||
<div>
|
||||
<div id="DeviceTree" class="device-tree-container">
|
||||
<div class="device-tree-header">
|
||||
<div class="header-title">通道列表</div>
|
||||
<div class="header-switch">
|
||||
<el-switch
|
||||
v-model="showRegion"
|
||||
active-color="#13ce66"
|
||||
@@ -12,9 +12,27 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<RegionTree v-if="showRegion" ref="regionTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
|
||||
<GroupTree v-if="!showRegion" ref="groupTree" :edit="false" :show-header="false" :has-channel="true" :click-event="treeNodeClickEvent" />
|
||||
<div class="tree-content">
|
||||
<div class="tree-wrapper">
|
||||
<RegionTree
|
||||
v-if="showRegion"
|
||||
ref="regionTree"
|
||||
:edit="false"
|
||||
:show-header="false"
|
||||
:has-channel="true"
|
||||
:click-event="treeNodeClickEvent"
|
||||
:default-expanded-keys="[]"
|
||||
/>
|
||||
<GroupTree
|
||||
v-if="!showRegion"
|
||||
ref="groupTree"
|
||||
:edit="false"
|
||||
:show-header="false"
|
||||
:has-channel="true"
|
||||
:click-event="treeNodeClickEvent"
|
||||
:default-expanded-keys="[]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -26,7 +44,24 @@ import GroupTree from './GroupTree.vue'
|
||||
export default {
|
||||
name: 'DeviceTree',
|
||||
components: { GroupTree, RegionTree },
|
||||
props: ['device', 'onlyCatalog', 'clickEvent', 'contextMenuEvent'],
|
||||
props: {
|
||||
device: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
onlyCatalog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clickEvent: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
contextMenuEvent: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showRegion: true,
|
||||
@@ -37,15 +72,67 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
// if (this.jessibuca) {
|
||||
// this.jessibuca.destroy();
|
||||
// }
|
||||
// this.playing = false;
|
||||
// this.loaded = false;
|
||||
// this.performance = "";
|
||||
mounted() {
|
||||
// Apply fix for Element UI tree scrollbars after component is mounted
|
||||
this.$nextTick(() => {
|
||||
this.fixTreeScrollbars()
|
||||
this.adjustTreeHeight()
|
||||
|
||||
// Add resize event listener to handle window resizing
|
||||
window.addEventListener('resize', this.adjustTreeHeight)
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
// Re-apply fix when component updates (e.g., when switching between RegionTree and GroupTree)
|
||||
this.$nextTick(() => {
|
||||
this.fixTreeScrollbars()
|
||||
this.adjustTreeHeight()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
// Remove event listener when component is destroyed
|
||||
window.removeEventListener('resize', this.adjustTreeHeight)
|
||||
},
|
||||
methods: {
|
||||
adjustTreeHeight() {
|
||||
// Get the container height
|
||||
const containerHeight = this.$el.clientHeight
|
||||
|
||||
// Get the header height
|
||||
const headerHeight = this.$el.querySelector('.device-tree-header').clientHeight
|
||||
|
||||
// Calculate available height for tree
|
||||
const availableHeight = containerHeight - headerHeight - 30 // 30px for padding
|
||||
|
||||
// Set the tree content height
|
||||
const treeContent = this.$el.querySelector('.tree-content')
|
||||
if (treeContent) {
|
||||
treeContent.style.height = `${availableHeight}px`
|
||||
}
|
||||
|
||||
// Ensure tree components adapt to the available height
|
||||
const treeComponents = this.$el.querySelectorAll('.el-tree')
|
||||
treeComponents.forEach(tree => {
|
||||
tree.style.height = '100%'
|
||||
tree.style.maxHeight = '100%'
|
||||
})
|
||||
},
|
||||
fixTreeScrollbars() {
|
||||
// Find all el-tree elements within this component and fix their scrolling behavior
|
||||
const trees = this.$el.querySelectorAll('.el-tree')
|
||||
trees.forEach(tree => {
|
||||
tree.style.overflow = 'visible'
|
||||
tree.style.width = '100%'
|
||||
|
||||
// Also fix any scrollable containers within the tree
|
||||
const scrollContainers = tree.querySelectorAll('[style*="overflow"]')
|
||||
scrollContainers.forEach(container => {
|
||||
if (container.style.overflow === 'auto' || container.style.overflow === 'scroll') {
|
||||
container.style.overflow = 'visible'
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
handleClick: function(tab, event) {
|
||||
},
|
||||
treeNodeClickEvent: function(data) {
|
||||
@@ -62,13 +149,130 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.device-tree-main-box{
|
||||
.device-tree-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
overflow: hidden !important; /* Force no overflow on container */
|
||||
}
|
||||
|
||||
.device-tree-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tree-content {
|
||||
flex: 1;
|
||||
overflow: hidden !important;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0; /* Prevent flex items from overflowing */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Global fixes for Element UI tree components */
|
||||
.el-tree {
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.el-tree-node {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content {
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
word-break: break-word !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
/* Fix for any scrollable containers */
|
||||
[style*="overflow: auto"],
|
||||
[style*="overflow:auto"],
|
||||
[style*="overflow: scroll"],
|
||||
[style*="overflow:scroll"] {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Make sure tree nodes are fully visible */
|
||||
.el-tree-node__children {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Ensure tree nodes can be expanded/collapsed */
|
||||
.el-tree-node__expand-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.device-tree-main-box {
|
||||
text-align: left;
|
||||
}
|
||||
.device-online{
|
||||
|
||||
.device-online {
|
||||
color: #252525;
|
||||
}
|
||||
.device-offline{
|
||||
|
||||
.device-offline {
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.device-tree-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.device-tree-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-switch {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.device-tree-container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Adjust el-switch text size for mobile */
|
||||
.el-switch__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,26 @@
|
||||
<template>
|
||||
<div id="live" style="height: calc(100vh - 124px)">
|
||||
<div v-loading="loading" style="height: 100%; display: grid; grid-template-columns: 400px auto" element-loading-text="拼命加载中">
|
||||
<div style="background-color: #ffffff">
|
||||
<div id="live" class="live-container">
|
||||
<div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
|
||||
<div class="device-tree-container">
|
||||
<DeviceTree :click-event="clickEvent" :context-menu-event="contextMenuEvent" />
|
||||
</div>
|
||||
<div style="display: grid; grid-template-rows: 5vh auto">
|
||||
<div style="font-size: 17px;line-height:5vh; display: grid; grid-template-columns: 1fr 1fr">
|
||||
<div style="text-align: left">
|
||||
<div class="video-container">
|
||||
<div class="control-bar">
|
||||
<div class="split-controls">
|
||||
分屏:
|
||||
<i class="iconfont icon-a-mti-1fenpingshi btn" :class="{active:spiltIndex === 0}" @click="spiltIndex=0" />
|
||||
<i class="iconfont icon-a-mti-4fenpingshi btn" :class="{active: spiltIndex === 1}" @click="spiltIndex=1" />
|
||||
<i class="iconfont icon-a-mti-6fenpingshi btn" :class="{active: spiltIndex === 2}" @click="spiltIndex=2" />
|
||||
<i class="iconfont icon-a-mti-9fenpingshi btn" :class="{active: spiltIndex === 3}" @click="spiltIndex=3" />
|
||||
</div>
|
||||
<div style="text-align: right; margin-right: 10px;">
|
||||
<div class="fullscreen-control">
|
||||
<i class="el-icon-full-screen btn" @click="fullScreen()" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0; margin: 0 auto;">
|
||||
<div class="player-container">
|
||||
<div
|
||||
ref="playBox"
|
||||
class="play-grid"
|
||||
:style="liveStyle"
|
||||
>
|
||||
<div
|
||||
@@ -29,7 +30,7 @@
|
||||
:class="getPlayerClass(spiltIndex, i)"
|
||||
@click="playerIdx = (i-1)"
|
||||
>
|
||||
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 15px;font-weight: bold;">{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}</div>
|
||||
<div v-if="!videoUrl[i-1]" class="no-signal">{{ videoTip[i-1]?videoTip[i-1]:"无信号" }}</div>
|
||||
<player
|
||||
v-else
|
||||
:ref="'player'[i-1]"
|
||||
@@ -111,21 +112,13 @@ export default {
|
||||
|
||||
computed: {
|
||||
liveStyle() {
|
||||
if (!this.$store.getters.sidebar.opened) {
|
||||
return { width: '151vh', height: '85vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
|
||||
} else {
|
||||
return { width: '140vh', height: '79vh', display: 'grid', gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows, gap: '4px', backgroundColor: '#a9a8a8' }
|
||||
return {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: this.layout[this.spiltIndex].columns,
|
||||
gridTemplateRows: this.layout[this.spiltIndex].rows,
|
||||
gap: '4px',
|
||||
backgroundColor: '#a9a8a8'
|
||||
}
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// for (let i = 0; i < this.spilt; i++) {
|
||||
// const player = this.$refs.player
|
||||
// player && player[i] && player[i].updatePlayerDomSize()
|
||||
// }
|
||||
// })
|
||||
// return style
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -149,15 +142,37 @@ export default {
|
||||
'$route.fullPath': 'checkPlayByParam'
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Add window resize event listener to handle responsive behavior
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
this.handleResize()
|
||||
},
|
||||
created() {
|
||||
this.checkPlayByParam()
|
||||
},
|
||||
destroyed() {
|
||||
clearTimeout(this.updateLooper)
|
||||
// Remove event listener when component is destroyed
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
// Force update to recalculate responsive layout
|
||||
this.$forceUpdate()
|
||||
|
||||
// Resize any active players
|
||||
this.$nextTick(() => {
|
||||
for (let i = 0; i < this.layout[this.spiltIndex].spilt; i++) {
|
||||
const playerRef = this.$refs[`player${i + 1}`]
|
||||
if (playerRef) {
|
||||
if (playerRef instanceof Array) {
|
||||
playerRef[0].resize && playerRef[0].resize()
|
||||
} else {
|
||||
playerRef.resize && playerRef.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
destroy(idx) {
|
||||
console.log(idx)
|
||||
this.clear(idx.substring(idx.length - 1))
|
||||
@@ -212,8 +227,6 @@ export default {
|
||||
}
|
||||
},
|
||||
shot(e) {
|
||||
// console.log(e)
|
||||
// send({code:'image',data:e})
|
||||
var base64ToBlob = function(code) {
|
||||
const parts = code.split(';base64,')
|
||||
const contentType = parts[0].split(':')[1]
|
||||
@@ -257,9 +270,86 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.live-container {
|
||||
height: calc(100vh - 124px);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.live-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.device-tree-container {
|
||||
width: 300px;
|
||||
min-width: 250px;
|
||||
max-width: 400px;
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.live-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.device-tree-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
min-height: 150px;
|
||||
max-height: 300px;
|
||||
resize: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control-bar {
|
||||
height: 5vh;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.split-controls {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.fullscreen-control {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.player-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.play-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc(100vh - 180px);
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 10px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@@ -268,7 +358,6 @@ export default {
|
||||
|
||||
.btn.active {
|
||||
color: #409EFF;
|
||||
|
||||
}
|
||||
|
||||
.redborder {
|
||||
@@ -280,13 +369,39 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.no-signal {
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.play-box-2-1 {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 576px) {
|
||||
.control-bar {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.split-controls, .fullscreen-control {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user