<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 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="flex justify-center">
|
<el-button
|
type="primary"
|
@click="toggleFullScreen"
|
class="fullscreen-btn"
|
>
|
{{ isFullScreen ? '退出全屏' : '全屏显示' }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</transition>
|
</template>
|
|
<script>
|
export default {
|
components: {},
|
data() {
|
return {
|
settingShow: false,
|
sbtxradio: true,
|
ssyjradio: true,
|
isScaleradio: true,
|
echartsAutoTime: 3000,
|
isFullScreen: false
|
};
|
},
|
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() {
|
if (!document.fullscreenElement) {
|
// 进入全屏
|
document.documentElement.requestFullscreen().catch(err => {
|
console.error(`全屏错误: ${err.message}`);
|
});
|
} else {
|
// 退出全屏
|
if (document.exitFullscreen) {
|
document.exitFullscreen();
|
}
|
}
|
},
|
handleFullScreenChange() {
|
this.isFullScreen = !!document.fullscreenElement;
|
}
|
},
|
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;
|
},
|
mounted() {
|
document.body.appendChild(this.$el);
|
document.addEventListener('fullscreenchange', this.handleFullScreenChange);
|
},
|
beforeDestroy() {
|
document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
|
},
|
destroyed() {
|
if (this.$el && this.$el.parentNode) {
|
this.$el.parentNode.removeChild(this.$el);
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.fullscreen-btn {
|
margin-top: 20px;
|
}
|
</style>
|
