| | |
| | | <script setup> |
| | | import {useRouter} from 'vue-router' |
| | | import useUserInfoStore from '@/stores/userInfo' |
| | | import userInfo from '@/stores/userInfo' |
| | | import request from '@/utils/request' |
| | | import {ElMessage} from 'element-plus' |
| | | import {ref, watch} from 'vue' |
| | | import {ref, watch, onMounted } from 'vue' |
| | | import deepClone from '@/utils/deepClone' |
| | | |
| | | import { useRouter } from 'vue-router'; |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | const store = userInfo() |
| | | |
| | | // const { $i18n } = useI18n(); // 获取 i18n 实例 |
| | | const router = useRouter() |
| | | const userStore = useUserInfoStore() |
| | | const user = userStore.user.userName |
| | |
| | | // let userInfo = userInfoStr.user.token; |
| | | let token = userInfo; // 提取 token |
| | | // 退出登录方法 |
| | | const quit = async () => { |
| | | try { |
| | | const response = await request.get('/loadGlass/sys/user/logout', { |
| | | token: token, |
| | | user: null, |
| | | }) |
| | | if (response.code === 200) { |
| | | // 登出成功,清除本地存储的 userInfo |
| | | localStorage.removeItem('userInfo'); |
| | | // 可以在这里重置应用状态,如导航到登录页等 |
| | | console.log('登出成功'); |
| | | } else { |
| | | // 处理错误情况 |
| | | console.error('登出失败', response); |
| | | } |
| | | function quit() { |
| | | // removeToken() |
| | | router.push('/login') |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | | // const quit = async () => { |
| | | // try { |
| | | |
| | | // const response = await request.get('/loadGlass/sys/user/logout', { |
| | | // token: token, |
| | | // user: null, |
| | | // }) |
| | | // if (response.code === 200) { |
| | | // // 登出成功,清除本地存储的 userInfo |
| | | // localStorage.removeItem('userInfo'); |
| | | // // 可以在这里重置应用状态,如导航到登录页等 |
| | | // console.log('登出成功'); |
| | | // } else { |
| | | // // 处理错误情况 |
| | | // console.error('登出失败', response); |
| | | // } |
| | | // } |
| | | // catch (error) { |
| | | // // 处理错误 |
| | | // console.error(error); |
| | | // } |
| | | // } |
| | | // store.createWebSocket(); |
| | | // function quit() { |
| | | // userStore.$patch({ |
| | |
| | | // }); |
| | | // } |
| | | |
| | | |
| | | 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; |
| | | }); |
| | | // } |
| | | }); |
| | | } |
| | | //提取菜单模块列表 |
| | | let menuList = $ref([]) |
| | | // request.get('/loadGlass/menu/sysMenu/list').then((res) => { |
| | | |
| | | // onMounted(async () => { |
| | | // try { |
| | | // const res = await request.get('/loadGlass/sys/menu/getMenuTree'); // 假设 request.get 返回 Promise |
| | | // if (res.code == 200) { |
| | | // // 使用 value 属性来修改 ref 引用的值 |
| | | // menuList.value = deepClone(res.data); |
| | | // const language = $i18n.locale; |
| | | // if (language === 'en') { |
| | | // replaceChineseWithEnglish(menuList.value); // 传入 ref 的 value |
| | | // } |
| | | // console.log(res.data.token); // 如果 res.data 中有 token 的话 |
| | | // } else { |
| | | // ElMessage.warning(res.msg); |
| | | // router.push('/login'); |
| | | // } |
| | | // } catch (error) { |
| | | // // 处理请求错误 |
| | | // console.error('获取菜单列表时出错:', error); |
| | | // } |
| | | // }); |
| | | request.get('/loadGlass/sys/menu/getMenuTree').then((res) => { |
| | | if (res.code == 200) { |
| | | menuList = deepClone(res.data) |
| | | console.log(response.data.token); |
| | | menuList = res.data |
| | | console.log(language.value) |
| | | if (language.value === 'en') { |
| | | |
| | | replaceChineseWithEnglish(menuList); |
| | | } |
| | | } else { |
| | | ElMessage.warning(res.msg) |
| | | router.push('/login') |
| | | } |
| | | }) |
| | | |
| | | const menu = ref(null) |
| | | let indexKey = ref(null) |
| | | |
| | | function handleOpen(key) { |
| | | indexKey.value = key |
| | | } |
| | | |
| | | watch( |
| | | indexKey, |
| | | (newVal, oldVal) => { |
| | |
| | | <img src="../assets/northGlass.ico" |
| | | alt="" |
| | | style="max-width: 100%;max-height: 100%"> |
| | | <h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻MES系统!</h3> |
| | | <h3 style="margin: 1rem ;font-weight: bold;width: 33vw;"> {{ $t('main.titleFirst') }}{{ user }}{{ $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=""/>退出 |
| | | <SwitchButton size=""/>{{ $t('main.quit') }} |
| | | </el-icon> |
| | | </el-button> |
| | | </span> |
| | |
| | | </el-header> |
| | | <div id="line"></div> |
| | | <el-container> |
| | | <el-aside width="160px" |
| | | <!-- <el-aside width="160px" |
| | | style="height: 99%; background-color: #fff;"> |
| | | <div class="menu"> |
| | | <div v-for="items in menuList"> |
| | | <div class='menu_title' |
| | | @click="openMenu(items.id)"> |
| | | <!-- <span class='indicator' >⌵</span> --> |
| | | <!-- <span class='indicator' >≡</span> --> |
| | | <!-- <img src="../assets/9.png" alt="" style="max-width: 50%;max-height: 50%;"> --> |
| | | <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-aside> |
| | | |
| | | </el-aside> --> |
| | | <el-row :span="20"> |
| | | <el-menu :default-active="activePath" class="el-menu-vertical-demo" background-color="#fff"> |
| | | <div class="menu"> |
| | | <div v-for="items in menuList"> |
| | | <div class='menu_title' |
| | | @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-main> |
| | | <div id="main"> |
| | | <router-view></router-view> |
| | |
| | | </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%; |
| | |
| | | |
| | | ul li { |
| | | height: 28px; |
| | | width: 200px; |
| | | line-height: 30px; |
| | | /* background: rgb(128, 128, 128); */ |
| | | color: #000000; |
| | |
| | | } |
| | | |
| | | .menu_title { |
| | | width: 140px; |
| | | width: 180px; |
| | | /* white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; */ |
| | | |
| | | height: 45px; |
| | | line-height: 55px; |
| | | /* background: #fafafa; */ |