forked from CatB/SamATV
tingzi
3d47011d12
自定义侧边栏按钮，点击跳转到大屏布局FullScreenLayout，数据大屏铺满屏幕 添加FullScreenLayout的路由 route.ts views\common\screen-vue3 数据大屏相关的文件 main.ts 为了使得数据大正常运行添加了一些配置 package.json添加了一些配置 postcss.config.js 安装postcss库的时候自带的 tailwind.config.js 安装tailwind的时候自带的 当前数据大屏使用的mock模拟数据请求
142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { useSettingStore } from "/@/views/common/screen-vue3/stores/index";
|
|
import { ref } from "vue";
|
|
import {storeToRefs} from "pinia"
|
|
const isScaleRadio = ref(false);
|
|
const leftBottomRadio=ref(true)
|
|
const rightBottomRadio=ref(true)
|
|
const settingStore = useSettingStore();
|
|
const {indexConfig}=storeToRefs(settingStore)
|
|
|
|
const init = () => {
|
|
settingStore.initSetting();
|
|
isScaleRadio.value = settingStore.isScale;
|
|
|
|
leftBottomRadio.value=indexConfig.value.leftBottomSwiper
|
|
rightBottomRadio.value=indexConfig.value.rightBottomSwiper
|
|
|
|
};
|
|
init();
|
|
const handleClose = () => {};
|
|
|
|
const cancelClick = () => {
|
|
settingStore.setSettingShow(false);
|
|
};
|
|
|
|
const confirmClick = () => {};
|
|
const isScaleChange = (flag: boolean) => {
|
|
settingStore.setIsScale(flag);
|
|
};
|
|
const radiochange = (blag: boolean) => {
|
|
settingStore.setIsScale(blag);
|
|
// this.$store.commit('setting/updateSwiper', { val, type })
|
|
};
|
|
const indexRadioChange=(flag: boolean)=>{
|
|
settingStore.setIndexConfig({
|
|
leftBottomSwiper: leftBottomRadio.value,//左轮播
|
|
rightBottomSwiper:rightBottomRadio.value,//右下轮播
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-drawer v-model="settingStore.settingShow" direction="rtl" size="360px">
|
|
<template #header>
|
|
<h2 class="setting-title">设置</h2>
|
|
</template>
|
|
<template #default>
|
|
<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="(flag)=>isScaleChange(flag as boolean)">
|
|
<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="leftBottomRadio"
|
|
@change="(flag)=>indexRadioChange(flag as boolean)"
|
|
>
|
|
<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="rightBottomRadio"
|
|
@change="(flag)=>indexRadioChange(flag as boolean)"
|
|
>
|
|
<el-radio :label="true">是</el-radio>
|
|
<el-radio :label="false">否</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- <template #footer>
|
|
<div style="flex: auto">
|
|
<el-button @click="cancelClick">取消</el-button>
|
|
<el-button type="primary" @click="confirmClick">确定</el-button>
|
|
</div>
|
|
</template> -->
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '/@/views/common/screen-vue3/assets/css/main.scss';
|
|
@import '/@/views/common/screen-vue3/assets/css/tailwind.css';
|
|
.setting-title {
|
|
font-size: 20px;
|
|
color: #000;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
.left_shu {
|
|
color: #000;
|
|
font-weight: 900;
|
|
position: relative;
|
|
text-indent: 10px;
|
|
padding: 16px 0 10px 0;
|
|
line-height: 1;
|
|
&::before {
|
|
display: block;
|
|
content: " ";
|
|
height: 16px;
|
|
width: 4px;
|
|
border-radius: 2px;
|
|
background: #0072ff;
|
|
position: absolute;
|
|
left: 0px;
|
|
}
|
|
}
|
|
.setting_item {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
|
|
// display: flex;
|
|
.setting_label {
|
|
color: #555454;
|
|
}
|
|
.setting_label_tip {
|
|
font-size: 12px;
|
|
color: #838282;
|
|
}
|
|
}
|
|
</style>
|