refactor(touchScreen): 优化代码格式并移除无用注释
- 调整代码缩进和格式以提高可读性 - 移除底部版权链接注释 - 简化全屏功能相关代码 - 统一字符串引号风格
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user