refactor(touchScreen): 优化代码格式并移除无用注释

- 调整代码缩进和格式以提高可读性
- 移除底部版权链接注释
- 简化全屏功能相关代码
- 统一字符串引号风格
This commit is contained in:
2025-12-18 17:09:08 +08:00
parent 7a18ed1c4c
commit 9cdd638b99

View File

@@ -17,13 +17,18 @@
<!-- 右侧菜单 -->
<v-navigation-drawer permanent location="right" :width="150">
<template v-slot:prepend>
<v-list-item lines="two" :prepend-avatar="userInfo.user.avatar" :subtitle="userInfo.roles[0]"
:title="userInfo.user.nickName"></v-list-item>
<v-list-item lines="two" :prepend-avatar="userInfo.user.avatar" :subtitle="userInfo.roles[0]" :title="userInfo.user.nickName"></v-list-item>
</template>
<v-divider></v-divider>
<v-list lines="two">
<v-list-item v-for="(item, index) in listItems" :key="index" :value="item.value" :title="item.title"
@click="selectItem(item)" rounded="shaped" :prepend-icon="item.icon"></v-list-item>
<v-list-item
v-for="(item, index) in listItems"
:key="index"
:value="item.value"
:title="item.title"
@click="selectItem(item)"
rounded="shaped"
:prepend-icon="item.icon"></v-list-item>
</v-list>
</v-navigation-drawer>
<!-- 操作主体 -->
@@ -34,12 +39,11 @@
</v-fade-transition>
<!-- 底部logo -->
<v-footer class="footer-center" app>
<el-link type="info" style="font-size: larger" href="http://www.doan-tech.com/"
<!-- <el-link type="info" style="font-size: larger" href="http://www.doan-tech.com/"
target="_blank">版权所有苏州道安自动化技术有限公司
</el-link>
</el-link> -->
</v-footer>
</v-main>
</v-layout>
</template>
@@ -55,7 +59,7 @@ const goBack = () => {
}
/// =========================== 全屏监听 ==========================
// 定义全屏状态
const isFullScreen = ref(false);
const isFullScreen = ref(false)
function doScreen() {
if (isFullScreen.value) {
exitFullScreen()
@@ -64,56 +68,51 @@ function doScreen() {
}
}
// 检查当前是否为全屏模式
const checkIsFullScreen = () => {
isFullScreen.value = document.fullscreenElement !== null;
};
isFullScreen.value = document.fullscreenElement !== null
}
// 进入全屏
const goFullScreen = () => {
const appEl = document.documentElement;
const appEl = document.documentElement
if (appEl) {
appEl.requestFullscreen();
checkIsFullScreen(); // 更新状态
appEl.requestFullscreen()
checkIsFullScreen() // 更新状态
}
};
}
// 退出全屏
const exitFullScreen = () => {
document.exitFullscreen()
.catch(() => {
console.error('退出全屏失败');
});
checkIsFullScreen(); // 更新状态
};
document.exitFullscreen().catch(() => {
console.error('退出全屏失败')
})
checkIsFullScreen() // 更新状态
}
// 监听全屏状态变化
const fullScreenChangeHandler = () => {
checkIsFullScreen();
};
checkIsFullScreen()
}
// 在组件挂载时设置事件监听
onMounted(() => {
document.addEventListener('fullscreenchange', fullScreenChangeHandler);
});
document.addEventListener('fullscreenchange', fullScreenChangeHandler)
})
// 在组件卸载时移除事件监听
onUnmounted(() => {
document.removeEventListener('fullscreenchange', fullScreenChangeHandler);
});
document.removeEventListener('fullscreenchange', fullScreenChangeHandler)
})
/// ==================================================================================
// 右侧菜单
const listItems = ref([
{ title: '报工', value: '报工', icon: 'mdi-clipboard-file-outline' },
{ title: '质量', value: '质量', icon: 'mdi-application-edit' },
{ title: '报警', value: '报警', icon: 'mdi-bell-alert' },
{ title: '打印', value: '打印', icon: 'mdi-printer' },
{ title: '设置', value: '设置', icon: 'mdi-tools' },
{ title: '设置', value: '设置', icon: 'mdi-tools' }
])
const menuActivated = ref('报工')
function selectItem(val) {
@@ -128,8 +127,7 @@ const userInfo = ref({
avatar: '',
isAdmin: ''
},
roles: [],
roles: []
})
function getUser() {
getUserProfile().then((response) => {
@@ -141,47 +139,43 @@ function getUser() {
}
getUser()
import { onMounted } from "vue";
import { useDisplay } from "vuetify";
import { onMounted } from 'vue'
import { useDisplay } from 'vuetify'
const { mobile, name } = useDisplay();
const { mobile, name } = useDisplay()
onMounted(() => {
checkSerial()
console.log('是否是移动设备', mobile.value); // false
console.log('桌面大小', name.value); // false
});
console.log('是否是移动设备', mobile.value) // false
console.log('桌面大小', name.value) // false
})
/// ================= 串口通讯 =================
function checkSerial() {
if ("serial" in navigator) {
console.log(true);
if ('serial' in navigator) {
console.log(true)
} else {
console.log(false);
console.log(false)
}
}
const port = ref(null)
const ports = ref([])
async function doGetPort() {
try {
const portInfo = await navigator.serial.requestPort();
port.value = await portInfo.open({ baudRate: 9600 });
const portInfo = await navigator.serial.requestPort()
port.value = await portInfo.open({ baudRate: 9600 })
port.value.addEventListener('data', (event) => {
const decoder = new TextDecoder('utf-8');
const data = decoder.decode(event.data);
console.log('接收到串口数据:', data);
});
console.log('串口已打开');
const decoder = new TextDecoder('utf-8')
const data = decoder.decode(event.data)
console.log('接收到串口数据:', data)
})
console.log('串口已打开')
} catch (error) {
console.error('串口请求或打开失败:', error);
console.error('串口请求或打开失败:', error)
}
}
/// ==========================================
</script>
<style scoped>
@@ -198,12 +192,12 @@ async function doGetPort() {
}
.header {
background-color: #006B8C;
background-color: #006b8c;
padding: 20px;
}
.title {
color: #F1F1E6;
color: #f1f1e6;
font-size: 24px;
}
@@ -224,7 +218,7 @@ async function doGetPort() {
}
:deep(.el-tabs__nav-wrap) {
background-color: #00258B;
background-color: #00258b;
}
:deep(.el-tabs__content) {
@@ -242,6 +236,6 @@ async function doGetPort() {
height: 100px;
font-size: 30px;
font-weight: bold;
color: #E6F4F1;
color: #e6f4f1;
}
</style>
</style>