<script setup>
|
import useUserInfoStore from '@/stores/userInfo'
|
import userInfo from '@/stores/userInfo'
|
import request from '@/utils/request'
|
import {ElMessage} from 'element-plus'
|
import {ref, watch, onMounted, onUnmounted } from 'vue'
|
import deepClone from '@/utils/deepClone'
|
import { useRouter } from 'vue-router';
|
import { useI18n } from 'vue-i18n'
|
import { provide } from 'vue';
|
// import {host, WebSocketHost} from '@/utils/constants'
|
// import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
|
const globalDate = ref('');
|
const { t } = useI18n()
|
let language = ref(localStorage.getItem('lang') || 'zh')
|
const store = userInfo()
|
const isCollapse = ref(false);
|
// const { $i18n } = useI18n(); // 获取 i18n 实例
|
const router = useRouter()
|
const userStore = useUserInfoStore()
|
// const user = userStore.user.userName
|
let userInfoStr = window.localStorage.getItem('userInfo')
|
// const userInfoStr = localStorage.getItem('userInfo');
|
// let userInfo = userInfoStr.user.token;
|
let token = userInfo; // 提取 token
|
// 退出登录方法
|
function quit() {
|
// localStorage.removeItem('token');
|
store.$patch({
|
user: null,
|
})
|
router.push('/login')
|
}
|
// let socket = null;
|
// const socketUrl = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/mainMes`;
|
// const handleMessage = (data) => {
|
// if(data.globalDate!=null){
|
// window.localStorage.setItem('getglobalDate', data.globalDate[0])
|
// }else{
|
// globalDate.value = ''
|
// }
|
// }
|
function replaceChineseWithEnglish(menuData) {
|
// 定义中俄文对照关系对象
|
const translation = {
|
'上片机': 'Стол загрузки',
|
'上片': 'Верхняя часть',
|
'掰片/识别': 'Разлом/идентификация',
|
'卧式缓存': ' Горизонтальный буфер',
|
'磨边前卧式缓存': 'Горизонтальный буфер перед шлифовкой',
|
'下片卧式缓存': 'Горизонтальный буфер стекла разгрузки',
|
'磨边（冷加工）': 'Шлифовать края (холодная обработка)',
|
'1线磨边(冷加工)': 'Шлифовать края 1 линии (холодная обработка)',
|
'2线磨边(冷加工)': 'Шлифовать края 2 линии (холодная обработка)',
|
'大理片笼': 'Буферная система',
|
'钢化': 'Закалка',
|
'钢化前': 'Перед закалки',
|
'钢化后': 'После закалки',
|
'下片台': 'Стол разгрузки',
|
'系统管理': 'Управление системой',
|
'用户管理': 'Управление пользователем',
|
'权限管理': 'Управление полномочиями',
|
'角色管理': 'Управление ролью',
|
'可视化系统': 'Визуальная система',
|
'报工管理': 'Управление отчетностью',
|
'仓储中心': 'Складской центр',
|
'原片仓储': 'Склад сырья',
|
};
|
menuData.forEach(menu => {
|
menu.menuName = translation[menu.menuName] || menu.menuName;
|
// if (menu.children) {
|
menu.children && menu.children.forEach(submenu => {
|
submenu.menuName = translation[submenu.menuName] || submenu.menuName;
|
});
|
// }
|
});
|
}
|
function replaceChineseWithRussian(menuData) {
|
// 定义中英文对照关系对象
|
const translation = {
|
'上片机': 'Loading Machine',
|
'上片一线': 'First line on film',
|
'上片二线': 'Second line on film',
|
'掰片/识别': 'Breaking /Identification',
|
'掰片一线': 'Broken piece line',
|
'掰片二线': 'Broken pieces with two lines',
|
'卧式缓存': 'Horizontal cache',
|
'卧式缓存一号线': 'Horizontal Cache 1',
|
'卧式缓存二号线': 'Horizontal Cache 2',
|
'磨边前卧式缓存': 'Horizontal buffer before edge grinding',
|
'下片卧式缓存': 'Offline horizontal cache',
|
'磨边（冷加工）': 'Grinding edge (cold processing)',
|
'磨边(冷加工)': 'Grinding edge (cold processing)',
|
'1线磨边(冷加工)': '1-line edge grinding (cold processing)',
|
'2线磨边(冷加工)': '2-line edge grinding (cold processing)',
|
'大理片笼': 'Dali slice cage',
|
'钢化': 'Toughened',
|
'钢化查询': 'Tempered steel inquiry',
|
'钢化前': 'Before Tempering',
|
'钢化后': 'After Tempering',
|
'下片台': 'Next Stage',
|
'系统管理': 'System Management',
|
'用户管理': 'User Management',
|
'权限管理': 'Rights Management',
|
'角色管理': 'Roles',
|
'系统配置': 'system configuration',
|
'可视化系统': 'visualization system',
|
'报工管理': 'Job reporting management',
|
'仓储中心': 'Storage Center',
|
'原片仓储': 'Original film storage',
|
'中空': 'Hollow',
|
'中空一线': 'Hollow Line',
|
'中空二线': 'Hollow Second Line',
|
'中空三线': 'Hollow three line',
|
'中空理片笼': 'Hollow Film processing cage',
|
'折铝框一线': '1 Fold aluminum frame',
|
'折铝框二线': '2 Fold aluminum frame',
|
'折铝框三线': '3 Fold aluminum frame',
|
'大屏显示': 'Large Screen Display',
|
};
|
menuData.forEach(menu => {
|
menu.menuName = translation[menu.menuName] || menu.menuName;
|
// if (menu.children) {
|
menu.children && menu.children.forEach(submenu => {
|
submenu.menuName = translation[submenu.menuName] || submenu.menuName;
|
});
|
// }
|
});
|
}
|
//提取菜单模块列表
|
let menuList = $ref([])
|
request.get('/loadGlass/sys/menu/getMenuTree').then((res) => {
|
if (res.code == 200) {
|
menuList = res.data
|
// translateMenu(menuList.value, language.value);
|
if (language.value === 'en') {
|
replaceChineseWithRussian(menuList);
|
}
|
if (language.value === 'py') {
|
replaceChineseWithEnglish(menuList);
|
}
|
} else {
|
ElMessage.warning(res.msg)
|
router.push('/login')
|
}
|
})
|
request.post('/loadGlass/sys/menu/getNowDate').then((res) => {
|
if (res.code == 200) {
|
window.localStorage.setItem('getglobalDate', res.data)
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
const menu = ref(null)
|
let indexKey = ref(null)
|
function handleOpen(key) {
|
indexKey.value = key
|
}
|
watch(
|
indexKey,
|
(newVal, oldVal) => {
|
if (oldVal !== newVal && oldVal !== null) {
|
menu.value.close(oldVal)
|
}
|
},
|
{deep: true}
|
)
|
router.beforeEach((to, from) => {
|
//return false
|
})
|
let openFlag = $ref(null)
|
//原始菜单打开
|
const openMenu = (menuID) => {
|
if (menuID === openFlag) {
|
openFlag = null
|
} else {
|
openFlag = menuID
|
}
|
}
|
function toggleCollapse() {
|
isCollapse.value = !isCollapse.value;
|
}
|
onMounted(() => {
|
// fetchlack()
|
// socket = initializeWebSocket(socketUrl, handleMessage);
|
});
|
// const fetchlack = async () => {
|
// try {
|
// console.log(33333);
|
// const response = await request.post('/loadGlass/sys/menu/getNowDate')
|
// console.log(response.code);
|
// if (response.code == 200) {
|
// console.log(11111);
|
// console.log(response.data);
|
// console.log(2222);
|
// // window.localStorage.setItem('getglobalDate', response.data)
|
// } else {
|
// ElMessage.error(response.message);
|
// }
|
// }
|
// catch (error) {
|
// // 处理错误
|
// }
|
// }
|
let getglobalDate = window.localStorage.getItem('getglobalDate')
|
provide('globalDate', getglobalDate);
|
// onUnmounted(() => {
|
// if (socket) {
|
// closeWebSocket(socket);
|
// }
|
// });
|
</script>
|
<template>
|
<div id="all">
|
<el-container>
|
<el-header>
|
<div style="height: 100%;width: 100%;display: flex;background-color: #fff;">
|
<img src="../assets/northGlass.ico"
|
alt="" @click="toggleCollapse"
|
style="max-width: 100%;max-height: 100%">
|
<h3 style="margin: 1rem;font-weight: bold;width: 33vw;"> {{ $t('main.titleFirst') }}{{ userName }}{{ $t('main.titleLast') }}</h3>
|
<span style="height: 70%;width: 78vw;margin-top: 1rem;">
|
<!-- <el-button class="sys-quit"
|
@click="quit"
|
round>
|
<el-icon size="large">
|
<SwitchButton size=""/>{{ $t('main.quit') }}
|
</el-icon>
|
</el-button> -->
|
<el-button class="sys-quit"
|
@click="quit"
|
round>
|
<el-icon size="large">
|
<SwitchButton size=""/>{{ $t('main.quit') }}
|
</el-icon>
|
</el-button>
|
<!-- <div class="header-left">
|
<el-button @click="toggleCollapse" style="height: 30px;">
|
<el-icon><Expand /></el-icon>
|
</el-button>
|
</div> -->
|
</span>
|
</div>
|
</el-header>
|
<div id="line"></div>
|
<el-container>
|
<el-aside :width="isCollapse ? '0px' : '200px'" style="background-color: #fff;">
|
<el-row :span="20">
|
<el-menu :default-active="activePath" class="el-menu-vertical-demo" >
|
<div class="menu">
|
<div v-for="items in menuList">
|
<div class='menu_title' v-show="!isCollapse"
|
@click="openMenu(items.id)">
|
<span>☰</span>
|
{{ items.menuName }}
|
</div>
|
<ul class='enter-x-left'
|
v-show="openFlag==items.id">
|
<li v-for="menuItem in items.children"
|
style="margin-bottom:2px">
|
<router-link :to="{path:menuItem.url}">
|
{{ menuItem.menuName }}
|
</router-link>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-menu>
|
</el-row>
|
</el-aside>
|
<el-main>
|
<div id="main">
|
<router-view></router-view>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
<style scoped>
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
text-align: left;
|
}
|
#all {
|
background-color: #eee;
|
height: 100%;
|
}
|
.el-container {
|
height: 100vh;
|
width: 99vw;
|
}
|
* {
|
padding: 0;
|
margin: 0;
|
}
|
:deep(.sys-quit) {
|
float: right;
|
margin-right: 1rem;
|
width: 5rem;
|
}
|
/* 横线 */
|
#line {
|
float: right;
|
width: 100%;
|
height: 1px;
|
/* margin-top: 0.5em; */
|
margin-bottom: 0.5em;
|
background: #d4c4c4;
|
position: relative;
|
text-align: center;
|
}
|
:deep(span) {
|
margin-right: 0;
|
}
|
.el-collapse {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
#main {
|
width: 99%;
|
float: right;
|
height: 99%;
|
background-color: #fff;
|
}
|
/*------------*/
|
/* .menu div div{
|
width: 138px;
|
height: 35px;
|
line-height: 35px;
|
background: #C6E2FF;
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
border-bottom: 12px ;
|
margin-bottom:4px;
|
text-align: left;
|
cursor: pointer; */
|
/* border-radius:8px; */
|
/* outline: none; */
|
/* background-color:#5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
/* } */
|
.menu {
|
width: 138px;
|
height: 33px;
|
line-height: 25px;
|
color: #000000;
|
font-size: 16px;
|
padding-left: 15px;
|
padding-right: 2px;
|
}
|
ul {
|
height: auto;
|
margin: 1px auto;
|
text-align: center;
|
}
|
ul li {
|
height: 28px;
|
width: 180px;
|
line-height: 30px;
|
/* background: rgb(128, 128, 128); */
|
color: #000000;
|
padding-left: 36px;
|
cursor: pointer;
|
overflow: hidden;
|
text-align: left;
|
/* border-radius:8px; */
|
/* outline: none; */
|
/* background: #5CADFE; */
|
/* box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); */
|
}
|
ul li:hover {
|
/* background:#5CADFE ; */
|
color: #ffffff;
|
}
|
ul li a {
|
text-decoration: none;
|
color: #000000;
|
font-size: 14px;
|
}
|
ul li a:hover {
|
color: #1087ff;
|
}
|
.item_divider {
|
width: 118px;
|
height: 0px;
|
/* background-color: white;
|
opacity: 0.8; */
|
margin-bottom: 2px;
|
}
|
.item a {
|
width: 138px;
|
height: 35px;
|
display: block;
|
/* text-align: justify; */
|
text-decoration: none;
|
color: white;
|
font-size: 14px;
|
text-decoration: none;
|
}
|
.menu_title {
|
width: 180px;
|
/* white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis; */
|
height: 45px;
|
line-height: 55px;
|
/* background: #fafafa; */
|
color: rgb(43, 42, 42);
|
font-size: 17px;
|
padding-left: 15px;
|
transition: all 0.3s ease;
|
cursor: pointer;
|
position: relative;
|
font-weight: bold;
|
overflow: hidden;
|
}
|
.menu_title:hover {
|
/* background: #dedede; */
|
color: #3b9af9;
|
}
|
.indicator {
|
display: block;
|
width: 40px;
|
height: 35px;
|
font-weight: bold;
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
transition: all 0.3s ease;
|
text-align: center;
|
}
|
/* 动画效果 */
|
.enter-x-left {
|
z-index: 9;
|
opacity: 0;
|
animation: enter-x-left 0.4s ease-in-out 0.3s;
|
animation-fill-mode: forwards;
|
transform: translateX(-50px);
|
transition: all 0.3s ease;
|
}
|
.enter-x-left:nth-child(1) {
|
animation-delay: 0.1s;
|
}
|
.enter-x-left:nth-child(2) {
|
animation-delay: 0.2s;
|
}
|
.enter-x-left:nth-child(3) {
|
animation-delay: 0.3s;
|
}
|
.enter-x-left:nth-child(4) {
|
animation-delay: 0.4s;
|
}
|
@keyframes enter-x-left {
|
to {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
.header-left{
|
margin-left: -350px;
|
}
|
</style>
|
