<template>
|
<transition name="yh-setting-fade">
|
<div class="setting" :class="{ settingShow: settingShow }" v-show="settingShow">
|
<div class="setting_dislog" @click="settingShow = false">
|
|
</div>
|
<div class="setting_inner">
|
<div class="setting_header">
|
设置
|
</div>
|
<div class="setting_body">
|
<!-- <div class="left_shu"> 实时监测</div> -->
|
<div class="left_shu"> 全局设置</div>
|
|
<!-- 添加的全屏设置 -->
|
<div class="setting_item">
|
<span class="setting_label">
|
全屏显示:
|
</span>
|
<div class="setting_content">
|
<el-radio-group v-model="fullscreenRadio" @change="(val) => toggleFullscreen(val)">
|
<el-radio :label="true">是</el-radio>
|
<el-radio :label="false">否</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
|
<div class="setting_item">
|
<span class="setting_label">
|
是否进行自动适配<span class="setting_label_tip">(默认分辨率1920*1080)</span>:
|
</span>
|
<div class="setting_content">
|
<el-radio-group v-model="isScaleradio" @change="(val) => radiochange(val, 'isScale')">
|
<el-radio :label="true">是</el-radio>
|
<el-radio :label="false">否</el-radio>
|
</el-radio-group>
|
|
</div>
|
</div>
|
<div class="left_shu"> 实时监测</div>
|
<div class="setting_item">
|
<span class="setting_label">
|
设备提醒自动轮询: <span class="setting_label_tip"></span>
|
</span>
|
<div class="setting_content">
|
<el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'sbtxSwiper')">
|
<el-radio :label="true">是</el-radio>
|
<el-radio :label="false">否</el-radio>
|
</el-radio-group>
|
|
</div>
|
</div>
|
<div class="setting_item">
|
<span class="setting_label">
|
实时预警轮播:
|
</span>
|
<div class="setting_content">
|
<el-radio-group v-model="ssyjradio" @change="(val) => radiochange(val, 'ssyjSwiper')">
|
<el-radio :label="true">是</el-radio>
|
<el-radio :label="false">否</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
<div class="flex justify-center">
|
<!-- <el-button type="primary" round size="mini">确定</el-button> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
|
export default {
|
components: {},
|
data() {
|
return {
|
settingShow: false,
|
sbtxradio:true,
|
ssyjradio: true,
|
isScaleradio:true,
|
fullscreenRadio: false, // 全屏状态
|
fullscreenElement: null, // 全屏元素
|
};
|
},
|
computed: {},
|
methods: {
|
init() {
|
this.settingShow = true
|
},
|
radiochange(val, type) {
|
this.$store.commit('setting/updateSwiper', { val, type })
|
if(type==='isScale'){
|
// this.$router.go(0)
|
// location.reload()
|
// window.location.href=window.location.href+"?t="+Date.now()
|
}
|
},
|
|
// 切换全屏
|
toggleFullscreen(val) {
|
if (val) {
|
this.enterFullscreen();
|
} else {
|
this.exitFullscreen();
|
}
|
// 保存到store
|
this.$store.commit('setting/updateSwiper', {
|
val,
|
type: 'fullscreen'
|
});
|
},
|
|
// 进入全屏
|
enterFullscreen() {
|
const element = document.documentElement; // 整个页面
|
|
if (element.requestFullscreen) {
|
element.requestFullscreen();
|
} else if (element.mozRequestFullScreen) { // Firefox
|
element.mozRequestFullScreen();
|
} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
|
element.webkitRequestFullscreen();
|
} else if (element.msRequestFullscreen) { // IE/Edge
|
element.msRequestFullscreen();
|
}
|
|
this.fullscreenElement = element;
|
this.bindFullscreenEvents();
|
},
|
|
// 退出全屏
|
exitFullscreen() {
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
} else if (document.mozCancelFullScreen) {
|
document.mozCancelFullScreen();
|
} else if (document.webkitExitFullscreen) {
|
document.webkitExitFullscreen();
|
} else if (document.msExitFullscreen) {
|
document.msExitFullscreen();
|
}
|
|
this.unbindFullscreenEvents();
|
},
|
|
// 绑定全屏事件
|
bindFullscreenEvents() {
|
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
|
},
|
|
// 解绑全屏事件
|
unbindFullscreenEvents() {
|
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
|
},
|
|
// 处理全屏变化
|
handleFullscreenChange() {
|
const isFullscreen = !!(
|
document.fullscreenElement ||
|
document.mozFullScreenElement ||
|
document.webkitFullscreenElement ||
|
document.msFullscreenElement
|
);
|
|
// 如果用户通过其他方式（如按ESC）退出全屏，更新状态
|
if (!isFullscreen && this.fullscreenRadio) {
|
this.fullscreenRadio = false;
|
this.$store.commit('setting/updateSwiper', {
|
val: false,
|
type: 'fullscreen'
|
});
|
this.unbindFullscreenEvents();
|
}
|
},
|
|
// 检查当前全屏状态
|
checkFullscreenStatus() {
|
const isFullscreen = !!(
|
document.fullscreenElement ||
|
document.mozFullScreenElement ||
|
document.webkitFullscreenElement ||
|
document.msFullscreenElement
|
);
|
|
if (isFullscreen !== this.fullscreenRadio) {
|
this.fullscreenRadio = isFullscreen;
|
if (isFullscreen) {
|
this.bindFullscreenEvents();
|
}
|
}
|
}
|
},
|
created() {
|
this.$store.commit('setting/initSwipers')
|
this.sbtxradio = this.$store.state.setting.sbtxSwiper,
|
this.ssyjradio = this.$store.state.setting.ssyjSwiper,
|
this.isScaleradio = this.$store.state.setting.isScale;
|
this.fullscreenRadio = this.$store.state.setting.fullscreen || false;
|
|
// 初始化时检查全屏状态
|
if (this.fullscreenRadio) {
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.toggleFullscreen(true);
|
}, 100);
|
});
|
}
|
},
|
mounted() {
|
document.body.appendChild(this.$el);
|
|
// 监听全屏变化
|
this.checkFullscreenStatus();
|
|
// 添加键盘事件监听（可选：按F11也支持）
|
document.addEventListener('keydown', (e) => {
|
if (e.key === 'F11') {
|
e.preventDefault();
|
this.fullscreenRadio = !this.fullscreenRadio;
|
this.toggleFullscreen(this.fullscreenRadio);
|
}
|
});
|
},
|
beforeDestroy() {
|
this.unbindFullscreenEvents();
|
|
// 移除键盘事件
|
document.removeEventListener('keydown', (e) => {
|
if (e.key === 'F11') {
|
e.preventDefault();
|
}
|
});
|
},
|
destroyed() {
|
if (this.$el && this.$el.parentNode) {
|
this.$el.parentNode.removeChild(this.$el);
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
// 可以添加一些全屏相关的样式
|
.setting {
|
// 确保设置弹窗在全屏模式下也能正常显示
|
:fullscreen &,
|
:-webkit-full-screen &,
|
:-moz-full-screen &,
|
:-ms-fullscreen & {
|
z-index: 999999; // 提高层级确保在全屏模式下可见
|
position: fixed;
|
}
|
}
|
|
// 全屏模式下的全局样式
|
:fullscreen {
|
background-color: #000; // 全屏背景色
|
}
|
|
:-webkit-full-screen {
|
background-color: #000;
|
}
|
|
:-moz-full-screen {
|
background-color: #000;
|
}
|
|
:-ms-fullscreen {
|
background-color: #000;
|
}
|
</style>
|
