| | |
| | | <div class="navbar"> |
| | | <div class="sys-name-wrapper"> |
| | | <div class="sys-icon"> |
| | | <svg-icon icon-class="lock-hdw"></svg-icon> |
| | | <svg-icon icon-class="lock1"></svg-icon> |
| | | </div> |
| | | <div class="sys-name">{{ title }}</div> |
| | | </div> |
| | |
| | | <div class="label">锁具控制模式</div> |
| | | <div class="value">{{ ctrlModel ? '在线模式' : '离线模式' }}</div> |
| | | <!-- 切换模式 --> |
| | | <div class="btn" v-if="uname == 'admin'" @click="changeModel">切换模式</div> |
| | | <div class="btn" v-if="uname == 'admin'" @click="changeModel"> |
| | | 切换模式 |
| | | </div> |
| | | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> |
| | | </div> |
| | | <el-dropdown |
| | | class="avatar-container right-menu-item hover-effect" |
| | | trigger="click" |
| | | > |
| | | <div class="avatar-wrapper"> |
| | | <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" alt="" /> |
| | | <img |
| | | :src="avatar + '?imageView2/1/w/80/h/80'" |
| | | class="user-avatar" |
| | | alt="" |
| | | /> |
| | | <span>{{ uname }}</span> |
| | | <el-icon class="el-icon-caret-bottom" size="small"> |
| | | <CaretBottom /> |
| | |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <router-link to="/"> |
| | | <el-dropdown-item>首页</el-dropdown-item> |
| | | <el-dropdown-item @click="pwdVisible = true">修改密码</el-dropdown-item> |
| | | </router-link> |
| | | <el-dropdown-item @click="logout"> |
| | | <span style="display: block">退出登录</span> |
| | |
| | | </template> |
| | | </el-dropdown> |
| | | </div> |
| | | <!-- 密码修改 --> |
| | | <el-dialog |
| | | title="密码修改" |
| | | width="400px" |
| | | v-model="pwdVisible" |
| | | :close-on-click-modal="false" |
| | | top="0" |
| | | class="dialog-center" |
| | | :modal-append-to-body="false" |
| | | > |
| | | <pwd-change v-if="pwdVisible" @success="pwdVisible = false"></pwd-change> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="Navbar"> |
| | | import { computed, ref, watchEffect, onMounted } from "vue"; |
| | | import { computed, ref, reactive, watchEffect, onMounted } from "vue"; |
| | | import { useRoute, useRouter } from "vue-router"; |
| | | import { CaretBottom } from "@element-plus/icons-vue"; |
| | | import SvgIcon from "@/components/SvgIcon/index.vue"; |
| | | import useWebSocket from "@/hooks/useWebSocket"; |
| | | import useElement from "@/hooks/useElement.js"; |
| | | import { changeControlMode } from '@/api/system.js'; |
| | | import useUserStore from '@/store/user'; |
| | | import useAppStore from '@/store/app'; |
| | | import { useUserStore } from '@/store/user'; |
| | | import { useAppStore } from '@/store/app'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { updatePassword } from '@/api/user.js'; |
| | | import PwdChange from '@/components/PwdChange.vue'; |
| | | const userStore = useUserStore(); |
| | | const appStore = useAppStore(); |
| | | const { sidebar, device } = storeToRefs(appStore); |
| | | const { avatar, name: uname } = storeToRefs(userStore); |
| | | const { avatar, uname } = storeToRefs(userStore); |
| | | |
| | | const { updateSessionId, logout: _logout } = userStore; |
| | | const { updateSessionId, logout: _logout, getInfo } = userStore; |
| | | const { toggleSidebar: _toggleSidebar } = appStore; |
| | | |
| | | |
| | |
| | | |
| | | const { $alert, $loading, $message, $confirm } = useElement(); |
| | | |
| | | const pwdVisible = ref(false); |
| | | |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | const ctrlModel = ref(0); |
| | | |
| | | const title = ref("鸿蒙智能电子锁管理平台"); |
| | | |
| | | |
| | | watchEffect(() => { |
| | | if (message.value) { |
| | |
| | | position: relative; |
| | | background: #fff; |
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
| | | |
| | | background: |
| | | url("@/assets/images/site-title-bg2.png") right center e('/') auto 100% no-repeat, |
| | | url("@/assets/images/site-title.png") center center e('/') auto 100% repeat-x; |
| | | // border-image: url("@/assets/images/site-title-bg2.png") 64 0 780 0 / 64px 0 788px 0; |
| | | .sys-name-wrapper { |
| | | display: inline-block; |
| | | line-height: 64px; |
| | | color: var(--light-color); |
| | | font-size: 24px; |
| | | font-size: 34px; |
| | | width: 894px; |
| | | padding-left: 1.6em; |
| | | |
| | | // url("@/assets/images/logo-lock.png") 70px center / auto 60% no-repeat, |
| | | background: |
| | | url("@/assets/images/site-title-bg.png") left center / 100% 100% no-repeat; |
| | | |
| | | .sys-icon { |
| | | display: inline-block; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .flex-inline { |
| | | display: inline-flex; |
| | | line-height: normal; |
| | |
| | | height: 100%; |
| | | margin-right: 2em; |
| | | float: left; |
| | | |
| | | .label { |
| | | &::after { |
| | | content: ':'; |
| | | } |
| | | |
| | | } |
| | | |
| | | .value { |
| | | margin-left: 0.4em; |
| | | } |
| | | |
| | | .btn { |
| | | margin-left: 2em; |
| | | background: #0ff; |