cx-wed/src/components/index3.vue

<template>
	<div id="app">
		<div class="topx">
			<div class="Left" @click="tz()">
				<img src="../assets/title.png">
			</div>
			<div class="right">
				<ul>
					<li @click="dp()" style="cursor:pointer "><img src="../assets/home-LargeScreenicon.png">
						<h2>大屏</h2>
					</li>
					<li @click="lpb()" style="cursor:pointer "><img src="../assets/home-roomlisticon.png">
						<h2>楼盘表</h2>
					</li>
					<li @click="dt()" style="cursor:pointer "><img src="../assets/home-mapicon.png">
						<h2>地图</h2>
					</li>
					<li @click="change" style="cursor:pointer ">
						<h2><i style="font-size: 22px;" :class="skin==1?'el-icon-sunny':'el-icon-moon-night'"></i></h2>
					</li>
					<li @click="dialogVisible=true"
						style="font-size: 19px;margin: 2.6% 0;max-width: 70px;cursor:pointer">
						<el-badge :is-dot='MessageReminder'>
							<i class="el-icon-message-solid"></i>
						</el-badge>
					</li>
				</ul>
				<el-dropdown>
					<img src="../assets/romeicon.png" style="cursor: pointer;">
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item disabled>
							<div>{{xm}}</div>
						</el-dropdown-item>
						<el-dropdown-item>
							<div @click="updatePassword()">修改密码</div>
						</el-dropdown-item>
						<el-dropdown-item>
							<div @click="retreat()">退出登录</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<router-view v-if="sengcontrol" :searchVal="searchVal" ref="relo" style="width: 100%;height: calc(100% - 43px);display: flex;">
		</router-view>
		<div class="tis" v-show="!drawer" v-if="dialogVisible"
			style="width: 388px;box-shadow: 0 0 13px rgba(0, 0, 0, 0.37);right:7px">
			<div class="tis-a" v-for="(item,i) in messageList" :key="i" v-show="item.control">
				<div class="tis-a-top">
					<div class="tis-a-top-left">
						<i class="el-icon-info"></i>
						<span>{{item.belong}}</span>
					</div>
					<i class="el-icon-close" @click="dialogVisible=!dialogVisible" style="cursor:pointer;"
						v-show="i == 0"></i>
				</div>
				<ul>
					<li v-for="(itemLabel,index) in item.messageCount" :key="index" @click="checkDetails(itemLabel)"
						v-show="itemLabel.count!= 0">
						<el-badge :value="itemLabel.count" class="item">
							<img v-if="MRimg[itemLabel.method]" :src="MRimg[itemLabel.method]">
							<img v-else src="../assets/news-default.png">
						</el-badge>
						<span>{{itemLabel.messageType}}</span>
					</li>
				</ul>
			</div>
			<div class="tis-a" v-if="!MessageReminder">
				<div class="tis-a-top">
					<div></div>
					<i class="el-icon-close" @click="dialogVisible=!dialogVisible" style="cursor:pointer;"></i>
				</div>
				<div class="tis-zwnr">
					暂无内容
				</div>
			</div>
		</div>

		<!-- ===========消息提醒============= -->
		<div class="details" v-if="drawer">
			<div class="details-top">
				<div class="details-top-ringth">
					<i class="el-icon-info"></i>
					{{title}}
				</div>
				<div class="details-top-leth">
					<i class="el-icon-close" style="cursor: pointer;" @click="drawer=false"></i>
				</div>
			</div>
			<div class="details-data">
				<div class="info" v-for="(item,i) in details" :key="i">
					<div class="info-acti">
						<div class="info-acti-indx">
							{{i+1}}
						</div>
					</div>
					<div class="details-data-details">
						<div>{{item.title}}</div>
						<span>{{item.msg}}</span>
						<p>{{item.dateTime}}</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改密码 -->
		<div class="tk">
			<el-dialog title="修改密码" :visible.sync="ChangePassword" width="35%">
				<div class="form">
					<el-form :model="passwordData" :rules="passRules" label-position="right" ref="passRule" label-width="120px">
					  <el-form-item label="原密码：" prop="oldPass" style="width: 100%;">
					    <el-input v-model="passwordData.oldPass" type="password" autocomplete="off" placeholder="请输入原密码"></el-input>
					  </el-form-item>
					  <el-form-item label="新密码：" prop="pass" style="width: 100%;">
					    <el-input v-model="passwordData.pass" type="password" autocomplete="off" placeholder="请输入新密码"></el-input>
					  </el-form-item>
					  <el-form-item label="确认新密码：" prop="checkPass" style="width: 100%;">
					    <el-input v-model="passwordData.checkPass" type="password" autocomplete="off" placeholder="请确认新密码"></el-input>
					  </el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="ChangePassword = false">取 消</el-button>
					<el-button type="primary" @click="passSubmit()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		
		<div v-if="dialogVisible" style="position: absolute;top: 0;width: 100%;height: 100%;z-index: 9;"
			@click="close()"></div>
	</div>
</template>

<script>
	export default {
		name: "app",
		data() {
			var validatePass = (rule, value, callback) => {
			  if (value === '') {
			    callback(new Error('请再次输入新密码'));
			  } else if (value !== this.passwordData.pass) {
			    callback(new Error('两次输入新密码不一致!'));
			  } else {
			    callback();
			  }
			};
			return {
				sengcontrol:true,
				
				//修改密码
				ChangePassword:false,
				passwordData: {
				  id: '',
				  oldPass: '',
				  pass: '',
				  checkPass: ''
				},
				passRules: {
				  oldPass: [{
				    required: true,
				    message: '请输入原密码',
				    trigger: 'blur'
				  }],
				  pass: [{
				    required: true,
				    message: '请输入新密码',
				    trigger: 'blur'
				  }],
				  checkPass: [{
				    required: true,
				    validator: validatePass,
				    trigger: 'blur'
				  }],
				},
				
				skin: 1,
				activeName: '',
				xm: '',
				dialogVisible: false,
				searchVal: '',
				messageList: [],
				drawer: false,
				title: '',
				details: [],
				MessageReminder: false,
				MRimg: {
					projectPropertyCheck: require('../assets/news-projectPropertyCheck.png'),
					propertyCheckReturned: require('../assets/news-propertyCheckReturned.png'),
					projectAwait: require('../assets/news-projectAwait.png'),
					projectReturned: require('../assets/news-projectReturned.png'),
					contDut: require('../assets/news-contDut.png'),
					nextPayDut: require('../assets/news-nextPayDut.png'),
					excessContDut: require('../assets/news-excessContDut.png'),
					patrolAudit: require('../assets/news-patrolAudit.png'),
					repairAudit: require('../assets/news-repairAudit.png')
				}
			}
		},
		mounted() {
			this.nam()
			if (sessionStorage.getItem("skin")) {
				this.skin = sessionStorage.getItem("skin")
			} else {
				this.skin = 1
			}
			this.getMessage();
		},
		methods: {
			// 修改密码
			updatePassword() {
			  const that = this;
			  for (let key in that.passwordData) {that.passwordData[key] = '';}
			  this.nam();
			  this.ChangePassword=true
			},
			// 修改密码
			passSubmit() {
			  const that = this;
			  that.$refs['passRule'].validate((valid) => {
			    if (valid) {
			      let info = that.passwordData;
			      let data = {
			        id: info.id,
			        oldPassword: info.oldPass,
			        newPassword: info.checkPass
			      }
			      that.$http.post('api/auth/user/updatePassword', data).then(res => {
			        if (res.status == 200 && res.data.code == 0) {
			          that.$message.success('修改密码成功！');
					  this.ChangePassword = false
			        } else {
			          // that.$message.error(res.data.msg);
			        }
			      })
			    } else {
			      return false;
			    }
			  });
			},
			close() {
				if (this.drawer == true) {
					this.drawer = false
					this.dialogVisible = true
				} else if (this.dialogVisible == true) {
					this.drawer = false
					this.dialogVisible = false
				}
			},
			// 获取消息提醒
			getMessage() {
				this.$http.get('api/auth/message/count', null).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						this.messageList = res.data.data;
						this.MessageReminder = false
						// 判断是否有消息显示红点                  break
						this.messageList.forEach((rrs, inde) => {
							this.messageList[inde].control = false
							this.messageList[inde].messageCount.forEach((rrs, index) => {
								if (this.messageList[inde].messageCount[index].count != 0) {
									this.messageList[inde].control = true
									this.MessageReminder = true
								}
							})
						})
					} else {
						this.$message.error('获取消息提醒失败!');
					}
				})
			},
			// 查看消息详情
			checkDetails(data) {
				let that = this;
				that.drawer = true;
				that.title = data.messageType;
				that.$http.get('api/auth/message/getMessage?method=' + data.method, null).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						that.details = res.data.data;
					} else {
						that.$message.error('获取消息详情失败!');
					}
				})
			},
			// 退出登录
			retreat() {
				this.$http.post('/api/v1/pub/logout', null).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						this.$router.push('/')
					} else {
						this.$message.error('失败!');
					}
				})
			},
			// 获取姓名
			nam() {
				this.$http.get('/api/v1/pri/userInfo', null).then((res) => {
					if (res.status == 200 && res.data.code == 0) {
						this.xm = res.data.user.name
						this.passwordData.id=res.data.user.depid
					} else {
						this.$message.error('失败!');
					}
				})
			},
			// 换肤
			change() {
				if (this.skin == 1) {
					document.getElementById('style').setAttribute("href", "./static/css/one.less");
					sessionStorage.setItem("style", "./static/css/one.less");
					window.location.reload()
					this.skin = 2
					sessionStorage.setItem("skin", this.skin);
					this.searchVal = 2;
				} else if (this.skin == 2) {
					document.getElementById('style').setAttribute("href", "./static/css/two.less");
					sessionStorage.setItem("style", "./static/css/two.less");
					window.location.reload()
					this.skin = 1
					sessionStorage.setItem("skin", this.skin);
					this.searchVal = 1;
				}
			},
			// 跳转首页
			tz() {
				this.$router.push('/home')
			},
			// 跳转消息详情
			xxtx() {
				this.$router.push('/index3/notice')
			},
			//楼盘表
			lpb() {
				
				  // 获取菜单列表
				  this.sengcontrol=false
				  var data=[]
				      this.$http.get('api/auth/userMenus', null).then((res) => {
				        if (res.status == 200 && res.data.code == 0) {
				          data=res.data.userMenus
				          this.sengcontrol=true
				          this.$store.commit("add",data[3].roleMenuDTOS)
				          this.$store.commit("Jurisdiction",data[3].roleMenuDTOS[2].id)
				          window.sessionStorage.setItem("Highlight",data[3].roleMenuDTOS[2].url);
				          this.$router.push(data[3].roleMenuDTOS[2].url)
				        } else {
				            this.$message.error('失败!');
				          }
				      })
				
			},
			// 大屏
			dp() {
				let {href} = this.$router.resolve({path: '/LargeScreenOnt'})
				window.open(href, '_blank')
				// if (document.documentElement.clientWidth > 2000) {
				// 	let {
				// 		href
				// 	} = this.$router.resolve({
				// 		path: '/index1'
				// 	})
				// 	window.open(href, '_blank')
				// } else {
				// 	// let { href } = this.$router.resolve({ path: '/index21' })
				// 	let {
				// 		href
				// 	} = this.$router.resolve({
				// 		path: '/LargeScreenOnt'
				// 	})
				// 	window.open(href, '_blank')
				// }
			},
			// 地图
			dt() {
				window.sessionStorage.setItem('route', '/ResidentialResettlement');
				let {
					href
				} = this.$router.resolve({
					path: '/ResidentialResettlement'
				})
				window.open(href, '_blank')

			}
		}
	}
</script>

<style scoped lang="less">
	#app {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
		min-width: 1400px;
		min-height: 500px;
		overflow: auto;
		background-color: #dfdfdf;
		.topx {
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			width: 100%;
			height: 43px;

			.Left {
				display: flex;
				width: 384px;
				padding: 0.3% 0% 0.3% 0.5%;
				cursor: pointer;

				img {
					width: 100%;
				}
			}

			.right {
				display: flex;
				width: 537px;

				ul {
					display: flex;
					width: 100%;

					li {
						width: 26%;
						height: 38.5%;
						margin: 2.5% 0;
						color: #707070;
						list-style: none;
						border-right: 2px solid #707070;
						display: flex;
						justify-content: center;

						img {
							width: auto;
							height: auto;
							margin: 0 5%;
						}

						h2 {
							margin: 0;
							font-size: 0.0625rem;
							line-height: 14px;
							font-size: 12px;
							font-weight: 400;
							line-height: 20px;
							color: #707070;
							opacity: 1;
						}
					}
				}

				.el-dropdown {
					display: inline-block;
					position: relative;
					color: #606266;
					font-size: 14px;

					img {
						margin: 10% 17px;
						height: 57%;
					}
				}
			}
		}

		.tis {
			position: absolute;
			top: 50px;
			right: 60px;
			width: auto;
			background: #fff;
			border-radius: 24px;
			padding: 1.5%;
			box-sizing: border-box;
			z-index: 999;

			.tis-a {
				.tis-a-top {
					display: flex;
					justify-content: space-between;

					i {
						font-size: 30px;
						color: #167AA1;
					}

					.tis-a-top-left {
						i {
							font-size: 24px;
							color: #167AA1;
						}

						span {
							font-size: 18px;
							font-weight: 400;
							line-height: 31px;
							color: #167AA1;
						}
					}
				}

				ul {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					li {
						width: 80px;
						text-align: center;
						border-radius: 24px;
						padding: 5px;
						margin: 0 10px;
						cursor: pointer;

						.el-badge {
							width: 80px;
							height: 80px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
							background: #167AA1;
							border-radius: 14px;

							img {
								width: 42px;
								margin: 0 auto;
							}

							span {
								font-size: 13px;
								font-weight: 400;
								color: #707070;
								text-align: center;
								display: block;
								margin-top: 12px;
							}
						}

						span {
							font-size: 13px;
							font-weight: 400;
							color: #707070;
							text-align: center;
							display: block;
							margin-top: 12px;
						}
					}
				}

				/deep/.el-badge__content.is-fixed {
					top: 4%;
					right: 19%;
				}

				/deep/.el-badge__content {
					font-size: 18px;
				}
			}
		}

		.details {
			width: 388px;
			height: calc(100% - 45px);
			box-shadow: rgba(0, 0, 0, 0.37) 0px 0px 13px;
			position: absolute;
			top: 45px;
			right: 0px;
			box-sizing: border-box;
			z-index: 999;
			overflow: hidden;

			.details-top {
				width: 100%;
				height: 40px;
				background-color: #167aa1;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;

				.details-top-ringth {
					line-height: 40px;
					font-size: 16px;
					color: #fff;

					i {
						color: #FFFFFF;
						font-size: 18px;
					}
				}

				.details-top-leth {
					i {
						line-height: 40px;
						color: #FFFFFF;
						font-size: 20px;
					}
				}
			}

			.details-data {
				background: #fff;
				height: calc(100% - 40px);
				overflow: auto;
				scrollbar-width: thin;

				.info {
					border-bottom: 4px solid #f2f2f2;
					padding: 15px 15px 0 0;
					font-size: 15px;
					display: flex;

					.info-acti {
						width: 28px;
						padding: 0 15px;

						.info-acti-indx {
							/* margin: 0 auto; */
							width: 28PX;
							height: 28PX;
							background-color: #167AA1;
							color: #FFFFFF;
							text-align: center;
							line-height: 28px;
							border-radius: 28px;
						}
					}

					.details-data-details {
						width: 100%;

						div {
							font-size: 16px;
							color: #167aa1;
						}

						span {
							margin: 10px 0;
							color: #666;
							font-size: 14px;
							display: flex;
							flex-direction: column;
							justify-content: center;
						}

						p {
							color: rgb(181, 181, 181);
							font-size: 14px;
							width: 100%;
							text-align: end;
							padding: 10px 0;
							border-top: 1px solid #F2F2F2;
						}
					}
				}

				&::-webkit-scrollbar {
					width: 8px;
				}

				&::-webkit-scrollbar-track {
					background-color: #f0f0f0;
				}

				&::-webkit-scrollbar-thumb {
					background-color: #cdcdcd;
				}
			}
		}
	}
</style>