128 lines
5.0 KiB
Vue
128 lines
5.0 KiB
Vue
<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="left_shu"> 全屏设置</div>
|
|
<div class="setting_item">
|
|
<!-- <span class="setting_label">全屏显示:</span> -->
|
|
<div class="setting_content">
|
|
<!-- <el-button type="primary" round size="mini" @click="toggleFullScreen">全屏</el-button> -->
|
|
<el-radio-group v-model="sbtxradio" @change="(val) => radiochange(val, 'isFullScreen')">
|
|
<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,
|
|
isFullScreen: false,
|
|
};
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
init() {
|
|
this.settingShow = true
|
|
},
|
|
radiochange(val, type) {
|
|
this.$store.commit('setting/updateSwiper', { val, type })
|
|
if(type==='isFullScreen'){
|
|
this.toggleFullScreen()
|
|
}
|
|
},
|
|
toggleFullScreen() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(err => {
|
|
console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
|
|
});
|
|
this.isFullScreen = true;
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
this.isFullScreen = false;
|
|
}
|
|
},
|
|
},
|
|
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);
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
destroyed() {
|
|
if (this.$el && this.$el.parentNode) {
|
|
this.$el.parentNode.removeChild(this.$el);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
</style> |