| | |
| | | <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
| | | </div>
|
| | | <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
|
| | | <div class="center-menu">
|
| | | <span class="label">{{ userStore.currentFactoryName }}</span>
|
| | | <el-dropdown @command="handleFactoryChange" class="right-menu-item hover-effect" trigger="click">
|
| | | <div>
|
| | | <el-icon size="20">
|
| | | <Switch />
|
| | | </el-icon>
|
| | | </div>
|
| | | <template #dropdown>
|
| | | <el-dropdown-menu>
|
| | | <el-dropdown-item v-for="item in factoryList" :key="item.deptId" :command="item">
|
| | | {{ item.deptName }}
|
| | | </el-dropdown-item>
|
| | | </el-dropdown-menu>
|
| | | </template>
|
| | | </el-dropdown>
|
| | | </div>
|
| | | <div class="right-menu">
|
| | | <!-- 消息通知 -->
|
| | | <el-popover
|
| | |
| | | import useAppStore from '@/store/modules/app'
|
| | | import useUserStore from '@/store/modules/user'
|
| | | import useSettingsStore from '@/store/modules/settings'
|
| | | import { userLoginFacotryList } from "@/api/system/user.js"
|
| | | import Cookies from "js-cookie";
|
| | | import { decrypt } from "@/utils/jsencrypt"
|
| | |
|
| | | const appStore = useAppStore()
|
| | | const userStore = useUserStore()
|
| | | const settingsStore = useSettingsStore()
|
| | | const factoryList = ref([])
|
| | | const notificationVisible = ref(false)
|
| | | const notificationCenterRef = ref(null)
|
| | | const unreadCount = ref(0)
|
| | |
| | | settingsStore.toggleTheme()
|
| | | }
|
| | |
|
| | | function getUserLoginFacotryList() {
|
| | | if (userStore.id) {
|
| | | userLoginFacotryList({ userId: userStore.id }).then(res => {
|
| | | console.log('res', res)
|
| | | factoryList.value = res.data
|
| | | })
|
| | | } else {
|
| | | factoryList.value = []
|
| | | }
|
| | | }
|
| | |
|
| | | function handleFactoryChange(command) {
|
| | | console.log('command', command)
|
| | | handleLogin(command.deptId);
|
| | | }
|
| | |
|
| | | function handleLogin(currentFatoryId) {
|
| | | const loginForm = {
|
| | | username: Cookies.get("username"),
|
| | | password: Cookies.get("password") === undefined ? null : decrypt(Cookies.get("password")),
|
| | | currentFatoryId: currentFatoryId
|
| | | }
|
| | | userStore.loginCheckFactory(loginForm).then(res => {
|
| | | forceReload();
|
| | | }).catch((err) => {
|
| | | console.log(err)
|
| | | })
|
| | | }
|
| | | function forceReload() {
|
| | | const currentUrl = window.location.origin + window.location.pathname;
|
| | | const timestamp = new Date().getTime();
|
| | | window.location.href = `${currentUrl}?reload=${timestamp}`;
|
| | | }
|
| | |
|
| | | getUserLoginFacotryList();
|
| | |
|
| | | // 消息通知相关
|
| | | function handleUnreadCountChange(count) {
|
| | | unreadCount.value = count
|
| | |
| | | </script>
|
| | |
|
| | | <style lang='scss' scoped>
|
| | | .navbar {
|
| | | height: 50px;
|
| | | overflow: hidden;
|
| | | position: relative;
|
| | | background: var(--navbar-bg);
|
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
| | |
|
| | | .center-menu {
|
| | | line-height: 50px;
|
| | | position: absolute;
|
| | | left: 50%;
|
| | | transform: translateX(-50%);
|
| | | display: flex;
|
| | | align-items: center;
|
| | |
|
| | | .label {
|
| | | font-weight: bold;
|
| | | font-size: 18px;
|
| | | color: #333333;
|
| | | margin-right: 10px;
|
| | | }
|
| | | }
|
| | | .navbar { |
| | | height: 56px; |
| | | overflow: hidden; |
| | | position: relative; |
| | | background: var(--navbar-bg); |
| | | border: 1px solid rgba(216, 225, 219, 0.9); |
| | | border-radius: 22px; |
| | | backdrop-filter: blur(18px); |
| | | box-shadow: var(--shadow-sm); |
| | | padding: 0 18px; |
| | |
|
| | | .hamburger-container {
|
| | | line-height: 46px;
|
| | | line-height: 52px; |
| | | height: 100%;
|
| | | float: left;
|
| | | cursor: pointer;
|
| | |
| | | -webkit-tap-highlight-color: transparent;
|
| | |
|
| | | &:hover {
|
| | | background: rgba(0, 0, 0, 0.025);
|
| | | background: var(--navbar-hover); |
| | | }
|
| | | }
|
| | |
|
| | |
| | | vertical-align: top;
|
| | | }
|
| | |
|
| | | .right-menu {
|
| | | float: right;
|
| | | height: 100%;
|
| | | line-height: 50px;
|
| | | display: flex;
|
| | | .right-menu { |
| | | float: right; |
| | | height: 100%; |
| | | align-items: center; |
| | | display: flex; |
| | |
|
| | | &:focus {
|
| | | outline: none;
|
| | | }
|
| | |
|
| | | .right-menu-item {
|
| | | display: inline-block;
|
| | | padding: 0 8px;
|
| | | height: 100%;
|
| | | font-size: 18px;
|
| | | color: var(--navbar-text);
|
| | | vertical-align: text-bottom;
|
| | | .right-menu-item { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 0 8px; |
| | | height: 100%; |
| | | font-size: 18px; |
| | | color: var(--navbar-text); |
| | | border-radius: 14px; |
| | |
|
| | | &.hover-effect {
|
| | | cursor: pointer;
|
| | | transition: background 0.3s;
|
| | |
|
| | | &:hover {
|
| | | background: rgba(0, 0, 0, 0.025);
|
| | | background: var(--navbar-hover); |
| | | }
|
| | | }
|
| | |
|
| | |
| | | }
|
| | |
|
| | | .notification-container {
|
| | | margin-right: 20px;
|
| | | margin-right: 12px; |
| | | display: flex;
|
| | | align-items: center;
|
| | | cursor: pointer;
|
| | |
| | | }
|
| | | }
|
| | |
|
| | | .avatar-container {
|
| | | margin-right: 40px;
|
| | |
|
| | | .avatar-wrapper {
|
| | | margin-top: 5px;
|
| | | position: relative;
|
| | |
|
| | | .user-avatar {
|
| | | cursor: pointer;
|
| | | width: 40px;
|
| | | height: 40px;
|
| | | border-radius: 50px;
|
| | | }
|
| | |
|
| | | i {
|
| | | cursor: pointer;
|
| | | position: absolute;
|
| | | right: -20px;
|
| | | top: 14px;
|
| | | font-size: 12px;
|
| | | }
|
| | | }
|
| | | .avatar-container { |
| | | margin-right: 4px; |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | :deep(.el-dropdown) { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .avatar-wrapper { |
| | | position: relative; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | gap: 10px; |
| | | padding: 6px 10px 6px 6px; |
| | | height: 44px; |
| | | border-radius: 999px; |
| | | background: rgba(247, 250, 248, 0.92); |
| | | border: 1px solid var(--surface-border); |
| | | |
| | | .user-avatar { |
| | | cursor: pointer; |
| | | width: 34px; |
| | | height: 34px; |
| | | border-radius: 50px; |
| | | } |
| | | |
| | | i { |
| | | cursor: pointer; |
| | | position: static; |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | }
|
| | | }
|
| | | }
|
| | |
| | | </style>
|
| | |
|
| | | <style lang="scss">
|
| | | .notification-popover {
|
| | | padding: 0 !important;
|
| | | .notification-popover { |
| | | padding: 0 !important; |
| | | border-radius: 20px !important; |
| | | border: 1px solid var(--surface-border) !important; |
| | | box-shadow: var(--shadow-md) !important; |
| | |
|
| | | .el-popover__title {
|
| | | display: none;
|