epmet-work-pc-chengyang/src/views/main-navbar.vue

<template>
	<div>
		<nav v-if="showHeader" class="aui-navbar">
			<div class="aui-navbar__header">
				<div class="aui-navbar__logo">
					<img
						v-if="$store.state.user.headUrl"
						:src="$store.state.user.headUrl"
					/>
				</div>
				<h1 class="aui-navbar__brand">
					<a class="aui-navbar__brand-lg" href="javascript:;">{{
						this.$store.state.user.agencyName
					}}</a>
					<a class="aui-navbar__brand-mini" href="javascript:;">{{
						this.$store.state.user.agencyName.slice(0, 2)
					}}</a>
				</h1>
			</div>

			<div class="aui-navbar__body">
				<el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
					<el-menu-item
						v-if="false"
						index="1"
						@click="
							$store.state.sidebarFold = !$store.state.sidebarFold
						"
					>
						<svg
							class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch"
							aria-hidden="true"
						>
							<use xlink:href="#icon-outdent"></use>
						</svg>
					</el-menu-item>

					<el-menu-item v-if="true" index="2" @click="refresh()">
						<svg
							class="icon-svg aui-navbar__icon-menu"
							aria-hidden="true"
						>
							<use xlink:href="#icon-sync"></use>
						</svg>
					</el-menu-item>
				</el-menu>

				<el-menu
					class="aui-navbar__menu"
					mode="horizontal"
					style="min-width: 180px"
				>
					<el-menu-item
						index="3"
						@click="$router.push({ name: 'dataBoard' })"
					>
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-sjdb.png" />
							<span>数据看板</span>
						</div>
					</el-menu-item>
					<el-menu-item
						index="3"
						@click="$router.push({ name: 'dataBoard' })"
					>
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-zntb.png" />
							<span>智能填报</span>
						</div>
					</el-menu-item>
					<el-menu-item
						index="3"
						@click="$router.push({ name: 'dataBoard' })"
					>
						<div class="nav-item">
							<img src="~@/assets/images/main/nav-sjjy.png" />
							<span>数据校验</span>
						</div>
					</el-menu-item>
				</el-menu>

				<el-menu
					class="aui-navbar__menu"
					mode="horizontal"
					style="min-width: 180px"
				>
					<el-menu-item index="3" @click="fullscreenHandle()">
						<div class="img-nav">
							<div class="img-wrap">
								<img src="~@/assets/images/main/time.png" />
							</div>
						</div>
					</el-menu-item>

					<el-menu-item index="2" @click="toNoticePage">
						<div class="img-nav" :class="{ 'z-on': false }">
							<span class="corner-dot" v-if="unreadMsgNum > 0">{{
								unreadMsgNum
							}}</span>
							<div class="img-wrap">
								<img src="~@/assets/images/main/hint.png" />
							</div>
						</div>
					</el-menu-item>

					<el-menu-item index="1" class="aui-navbar__avatar">
						<el-dropdown placement="bottom" :show-timeout="0">
							<span class="el-dropdown-link">
								<img
									v-if="$store.state.user.gender === '2'"
									src="~@/assets/images/main/default-avatar.png"
								/>
								<img
									v-else
									src="~@/assets/images/main/default-avatar.png"
								/>
								<span>{{ $store.state.user.realName }}</span>
								<i class="el-icon-arrow-down"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									@click.native="updatePasswordHandle()"
									>{{
										$t("updatePassword.title")
									}}</el-dropdown-item
								>
								<el-dropdown-item
									@click.native="logoutHandle()"
									>{{ $t("logout") }}</el-dropdown-item
								>
							</el-dropdown-menu>
						</el-dropdown>
					</el-menu-item>
				</el-menu>
			</div>
			<!-- 弹窗, 修改密码 -->
			<update-password-work
				v-if="updatePassowrdVisible"
				ref="updatePassowrd"
			></update-password-work>
		</nav>
		<nav v-else class="aui-navbar main-line"></nav>

		<div
			class="m-newMsg"
			v-if="noticeList.length > 0 && displayedNoticeList"
		>
			<div class="title">新提醒</div>
			<div class="btn-close" @click="displayedNoticeList = false">
				<img src="~@/assets/images/main/close.png" />
			</div>
			<div class="row">
				<span class="date">{{ noticeList[0].createdTime }}</span>
				<i class="i-new">NEW</i>
			</div>
			<div class="cnt" @click="toNoticePage">
				{{ noticeList[0].content }}
			</div>
		</div>
	</div>
</template>

<script>
import { messages } from "@/i18n";
import screenfull from "screenfull";
import UpdatePasswordWork from "./main-navbar-update-password-work";
import { clearLoginInfo } from "@/utils";
import { requestPost, requestGet } from "@/js/dai/request";
import nextTick from "dai-js/tools/nextTick";

export default {
	inject: ["refresh"],
	data() {
		return {
			showHeader: true,
			i18nMessages: messages,
			updatePassowrdVisible: false,
			customerName: "",

			unreadMsgNum: 0,

			noticeList: [],

			displayedNoticeList: true,
		};
	},
	components: {
		UpdatePasswordWork,
	},
	created() {
		let platformToken = localStorage.getItem("showHeader") || "";
		if (
			typeof platformToken !== "undefined" &&
			platformToken !== "undefined" &&
			platformToken !== ""
		) {
			this.showHeader = false;
		}
		this.changeCustomerName();
		console.log("=============================", this.userType);

		this.pollGetNoticeData();
	},
	computed: {
		userType() {
			return localStorage.getItem("userType");
		},
	},
	methods: {
		toNoticePage() {
			this.displayedNoticeList = false;
			this.$router.replace("/main/home-notice");
		},

		toIndexPage() {
			this.$router.replace("/index");
		},
		// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
		gotoRouteHandle(menuId, idx) {
			var route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
				(item) => item.meta.menuId === menuId
			)[0];
			if (route) {
				if (route.meta.iframeURL.endsWith("【跳转新页面】")) {
					return window.open(route.meta.iframeURL.slice(0, -7));
				} else {
					this.$router.push({ name: route.name });
				}
			}
			this.$store.state.LevelOneMenuActiveName = menuId;
			this.$store.state.sidebarActiveSubMenuList =
				this.$store.state.sidebarMenuList[idx].children || [];
			console.log("this.$store.state", this.$store.state);
			console.log("this.$route", this.$route);
		},
		changeCustomerName(customerName) {
			this.customerName =
				localStorage.getItem("customerName") ||
				"党建引领基层治理互联管理平台";
		},
		// 全屏
		fullscreenHandle() {
			if (!screenfull.enabled) {
				return this.$message({
					message: this.$t("fullscreen.prompt"),
					type: "warning",
					duration: 500,
				});
			}
			screenfull.toggle();
		},
		// 修改密码
		updatePasswordHandle() {
			this.updatePassowrdVisible = true;
			this.$nextTick(() => {
				this.$refs.updatePassowrd.init();
			});
		},
		// 退出
		logoutHandle() {
			this.$confirm(
				this.$t("prompt.info", { handle: this.$t("logout") }),
				this.$t("prompt.title"),
				{
					confirmButtonText: this.$t("confirm"),
					cancelButtonText: this.$t("cancel"),
					type: "warning",
				}
			)
				.then(() => {
					//关闭所有标签页
					// tabs, 关闭全部
					this.$store.state.contentTabs =
						this.$store.state.contentTabs.filter(
							(item) => item.name === "home"
						);

					this.$http
						.post("/auth/login/logout")
						.then(({ data: res }) => {
							if (res.code !== 0) {
								//别处登陆时 退出不提示 直接跳登陆页即可
								if (res.code !== 10007) {
									this.$message.error(res.msg);
								}
							}

							clearLoginInfo();
							this.$router.push({ name: "login" });
							// if (localStorage.getItem('userType') === 'work') {
							//   this.$router.push({ name: 'loginWork' })
							// } else {
							//   this.$router.push({ name: 'login' })
							// }
						})
						.catch(() => {});
				})
				.catch(() => {});
		},

		async pollGetNoticeData() {
			this.getNoticeData();
			await nextTick(60000);
			this.pollGetNoticeData();
		},

		// 智能提醒数据
		async getNoticeData() {
			const url = "/message/intelligentMessage/msg/notice";
			const { data, code, msg } = await requestGet(url, {});
			if (code === 0) {
				console.log("列表请求成功！！！！！！！！！！！！！！");
				if (data.unreadNum > 0 && this.unreadMsgNum < data.unreadNum) {
					this.getNoticeList();
					this.displayedNoticeList = true;
				}
				this.unreadMsgNum = data.unreadNum;
			} else {
			}
		},

		//加载组织数据
		async getNoticeList() {
			const url = "/message/intelligentMessage/page";
			let params = {
				page: this.pageNo,
				limit: this.pageSize,
				readFlag: 0,
			};

			const { data, code, msg } = await requestGet(url, params);

			if (code === 0) {
				this.noticeList = data.list;
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/c/function.scss";

.main-line {
	height: 50px;
	background: #eeeeee;
}
.img-nav {
	position: relative;

	.corner-dot {
		position: absolute;
		z-index: 100;
		display: block;
		top: -5px;
		right: 2px;
		padding: 0 3px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		transform: translateX(50%);
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		background: #ff4d4f;
		border-radius: 8px;
		border: 1px solid #ffffff;
		text-align: center;
	}
}

.m-newMsg {
	position: fixed;
	z-index: 2000;
	right: 30px;
	box-sizing: border-box;
	padding: 16px;
	width: 320px;
	background: #ffffff;
	box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
		0px 3px 6px -4px rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	.title {
		margin-bottom: 16px;
		height: 22px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 22px;
	}
	.btn-close {
		position: absolute;
		top: 15px;
		right: 10px;
		padding: 6px;
		img {
			width: 16px;
		}
	}
	.row {
		display: flex;
		align-items: center;
	}
	.date {
		height: 17px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		line-height: 17px;
	}
	.i-new {
		margin-left: 8px;
		width: 40px;
		height: 16px;
		background: #eb512f;
		border-radius: 2px;
		font-size: 12px;
		font-family: Arial-BoldItalicMT, Arial;
		font-weight: normal;
		color: #ffffff;
		line-height: 16px;
		text-align: center;
	}
	.cnt {
		@include toeM(2);
		margin-top: 3px;
		padding-bottom: 0;
		width: 288px;
		height: 44px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 22px;
	}
}
</style>