Newer
Older
KaiFengPC / src / layout / components / HeaderSys / index.vue
@zhangdeliang zhangdeliang on 7 Sep 8 KB update
  1. <template>
  2. <!-- 系统页面头部 -->
  3. <div class="headerPage">
  4. <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
  5. <!-- 标题 等保之后名称显示 -->
  6. <!-- <img src="@/assets/images/login/login.png" alt="logo" class="logo" /> -->
  7. <!-- 标题 等保之前名称不显示显示 -->
  8. <img src="@/assets/images/login/loginNoName.png" alt="logo" class="logo" @click="goOneMap" />
  9. <!-- 菜单 -->
  10. <div class="headerMenu">
  11. <p :class="['part', activeIndex == item.name ? 'active' : '']" v-for="item in menuList1" :key="item.name" @click="getSelfMenu(item)">
  12. {{ item.title }}
  13. </p>
  14. </div>
  15.  
  16. <div @click="goNews" class="goNews" title="消息通知">
  17. <el-badge :value="NumPer" :max="99">
  18. <img :src="xiaoxi" alt="" />
  19. </el-badge>
  20. </div>
  21.  
  22. <div @click="goOneMap" class="toOneMap" title="前往海绵一张图">
  23. <el-icon><HomeFilled /></el-icon>
  24. </div>
  25. <!-- 全屏+个人中心 -->
  26. <div class="right-menu">
  27. <template v-if="appStore.device !== 'mobile'">
  28. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  29. </template>
  30. <div class="avatar-container">
  31. <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
  32. <div class="avatar-wrapper">
  33. <img :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : userImg" class="user-avatar" />
  34. <el-icon><caret-bottom /></el-icon>
  35. </div>
  36. <template #dropdown>
  37. <el-dropdown-menu>
  38. <el-dropdown-item @click="dialogShow = true">个人中心</el-dropdown-item>
  39. <el-dropdown-item @click="getSelfMenu({ name: 'System', title: '系统管理' })">系统管理</el-dropdown-item>
  40. <el-dropdown-item command="logout">
  41. <span>退出登录</span>
  42. </el-dropdown-item>
  43. </el-dropdown-menu>
  44. </template>
  45. </el-dropdown>
  46. </div>
  47. </div>
  48. <!-- 个人中心弹窗 -->
  49. <el-dialog v-model="dialogShow" title="个人中心" width="1100px" append-to-body>
  50. <UserCenter></UserCenter>
  51. </el-dialog>
  52.  
  53. <!-- 消息通知弹窗 -->
  54. <el-dialog v-model="dialogNews" title="消息通知" width="600px" append-to-body @close="closed">
  55. <newsDiaLOG :tableData="tableData" @handleClose="handleClose"></newsDiaLOG>
  56. <template>
  57. <div class="dialog-footer">
  58. <el-button @click="dialogClose">取 消</el-button>
  59. </div>
  60. </template>
  61. </el-dialog>
  62. </div>
  63. </template>
  64.  
  65. <script setup name="headerPage">
  66. import Hamburger from '@/components/Hamburger';
  67. import Screenfull from '@/components/Screenfull';
  68. import useAppStore from '@/store/modules/app';
  69. import useUserStore from '@/store/modules/user';
  70. import UserCenter from '@/views/system/user/profile/index'; //个人中心
  71. import newsDiaLOG from '@/views/system/user/profile/newsDiaLOG'; //消息通知
  72. import userImg from '@/assets/images/login/user.png'; //默认头像
  73. import xiaoxi from '@/assets/images/login/xiaoxi_icon.png';
  74. import { countUnread, projectNoticeUserPage } from '@/api/publicService/index';
  75. import bus from '@/utils/mitt';
  76. import { ElMessageBox } from 'element-plus';
  77. import usePermissionStore from '@/store/modules/permission';
  78. import { getUserProfile } from '@/api/system/user';
  79.  
  80. const permissionStore = usePermissionStore();
  81. const { proxy } = getCurrentInstance();
  82. const dialogShow = ref(false);
  83. const dialogNews = ref(false);
  84. const appStore = useAppStore();
  85. const userStore = useUserStore();
  86. const menuList = ref([]);
  87. const menuList1 = ref([]);
  88. const tableData = ref({});
  89. const NumPer = ref('');
  90. const activeIndex = ref('FloodSys');
  91. const router = useRouter();
  92. // 加载对应子菜单
  93. function getSelfMenu(item) {
  94. console.log(item, 'itemitem');
  95. activeIndex.value = item.name;
  96. localStorage.setItem('routerPartKFC', item.name);
  97. localStorage.setItem('fromDoorKFC', 'chengguanweiScreen');
  98. bus.emit('selfMenuXG', item);
  99. }
  100.  
  101. // 菜单展开收起
  102. function toggleSideBar() {
  103. bus.emit('toggleSideBarClick', appStore.sidebar.opened); //操作展开收起
  104. appStore.toggleSideBar();
  105. if (window.newfiberMapbox && newfiberMapbox.map) {
  106. let newniberMapContainer = newfiberMapbox.map.getContainer();
  107. let newniberMapCanvas = newfiberMapbox.map.getCanvas();
  108. newniberMapCanvas.style.width = newniberMapContainer.style.width;
  109. }
  110. }
  111.  
  112. // 个人中心下拉
  113. function handleCommand(command) {
  114. switch (command) {
  115. case 'setLayout':
  116. setLayout();
  117. break;
  118. case 'logout':
  119. logout();
  120. break;
  121. default:
  122. break;
  123. }
  124. }
  125. // 退出登录
  126. function logout() {
  127. ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
  128. confirmButtonText: '确定',
  129. cancelButtonText: '取消',
  130. type: 'warning',
  131. })
  132. .then(() => {
  133. userStore.logOut().then(() => {
  134. location.href = '/';
  135. });
  136. Cookies.remove('kaifeng-Token'); //清除token
  137. })
  138. .catch(() => {});
  139. }
  140.  
  141. function goOneMap() {
  142. router.push({ path: '/chengguanweiScreen' });
  143. }
  144.  
  145. // 消息弹框
  146. function goNews() {
  147. dialogNews.value = true;
  148. getDataListA();
  149. }
  150. /** 获取搜索数据列表 */
  151. const getDataListA = async () => {
  152. projectNoticeUserPage({ noticeUserId: Userid.value }).then(response => {
  153. tableData.value = response.data;
  154. });
  155. };
  156. /** 获取搜索人数 */
  157. function getDataListB() {
  158. countUnread().then(response => {
  159. NumPer.value = response.data;
  160. });
  161. }
  162. function handleClose() {
  163. // dialogNews.value = false;
  164. getDataListA();
  165. }
  166. function closed() {
  167. dialogNews.value = false;
  168. getDataListB();
  169. }
  170. const Userid = ref('');
  171. function getUser() {
  172. getUserProfile().then(response => {
  173. Userid.value = response.data.user.userId;
  174. });
  175. }
  176. onMounted(() => {
  177. // 动态获取路由返回子菜单
  178. permissionStore.sidebarRouters.map(item => {
  179. if (!!!item.meta) return;
  180. menuList.value.push({
  181. title: item.meta.title,
  182. name: item.name,
  183. });
  184. });
  185. menuList.value = menuList.value.filter(item => item.name != 'System'); //不显示系统管理
  186. menuList.value = menuList.value.filter(item => item.name != 'SponeScreen'); //不显示一张图
  187. menuList1.value = menuList.value;
  188. activeIndex.value = localStorage.getItem('routerPartKFC'); //默认选中
  189. bus.on('closeUserCenter', e => {
  190. dialogShow.value = false;
  191. });
  192. bus.on('Refresh', e => {
  193. getDataListB();
  194. });
  195. getDataListB();
  196. getUser();
  197. });
  198. onBeforeUnmount(() => {
  199. bus.off('closeUserCenter');
  200. bus.off('Refresh');
  201. });
  202. </script>
  203. <style lang="scss">
  204. .headerPage {
  205. width: 100%;
  206. height: 65px;
  207. background: #00456d;
  208. display: flex;
  209. align-items: center;
  210. .hamburger-container {
  211. cursor: pointer;
  212. }
  213. .logo {
  214. width: 393px;
  215. height: 44px;
  216. cursor: pointer;
  217. }
  218. .toOneMap {
  219. cursor: pointer;
  220. .el-icon {
  221. font-size: 28px;
  222. }
  223. }
  224. .goNews {
  225. width: 29px;
  226. height: 29px;
  227. text-align: center;
  228. padding-right: 8px;
  229. cursor: pointer;
  230. img {
  231. width: 22px;
  232. height: 22px;
  233. margin-top: 4px;
  234. }
  235. }
  236. .headerMenu {
  237. width: 1400px;
  238. height: 100%;
  239. display: flex;
  240. align-items: center;
  241. overflow: hidden;
  242. .part {
  243. background: url('@/assets/images/login/moren_img.png') no-repeat;
  244. // background: red;
  245. background-size: 100% 100%;
  246. font-size: 18px;
  247. font-weight: 400;
  248. padding: 8px 15px;
  249. cursor: pointer;
  250. margin-left: 15px;
  251. &:hover {
  252. color: #fff;
  253. }
  254. }
  255. .active {
  256. background: url('@/assets/images/login/xz_img.png') no-repeat;
  257. background-size: 100% 100%;
  258. color: #fff;
  259. }
  260. }
  261. .right-menu {
  262. width: 120px;
  263. height: 100%;
  264. display: flex;
  265. align-items: center;
  266. &:focus {
  267. outline: none;
  268. }
  269. .iconReturn {
  270. margin-top: 10px;
  271. cursor: pointer;
  272. }
  273. .right-menu-item {
  274. display: inline-block;
  275. padding: 0 8px;
  276. font-size: 18px;
  277. vertical-align: text-bottom;
  278.  
  279. &.hover-effect {
  280. cursor: pointer;
  281. transition: background 0.3s;
  282.  
  283. &:hover {
  284. background: rgba(0, 0, 0, 0.025);
  285. }
  286. }
  287. }
  288.  
  289. .avatar-container {
  290. margin-right: 20px;
  291.  
  292. .avatar-wrapper {
  293. position: relative;
  294.  
  295. .user-avatar {
  296. cursor: pointer;
  297. width: 40px;
  298. height: 40px;
  299. border-radius: 10px;
  300. }
  301.  
  302. i {
  303. cursor: pointer;
  304. position: absolute;
  305. right: -20px;
  306. top: 25px;
  307. font-size: 12px;
  308. }
  309. }
  310. }
  311. }
  312. }
  313. </style>