Web_TracerMethodology/pages/situationsCenter/situationsCenter.vue

<template>
	<view class="situationsCenter-page">
		<view class="calender-remind" @click="toMessagePage">
		  <image
		    :src="
		      messageType
		        ? '/static/message-unread.png'
		        : '/static/message-read.png'
		    "
		    mode=""
		  ></image>
		</view>
		<view class="situation-list">
			<view class="search-box">
				<view class="search-model" @click="openSearchBar" v-show="isSearchBoxShow">
					<image class="search-pic" src="/static/search.png"></image>
				</view>
				<view class="search-bar" v-show="isSearchBarShow">
					<view class="search-item">
						<image class="search-pic" src="/static/search.png"></image>
						<image class="text-clear" @click="valueEmpty" src="/static/text-clear.png"></image>
						<input class="searh-input" v-model="inputValue" @confirm="searchByKeywords($event)" placeholder="搜索项目" placeholder-style="font-weight: 400,color: #A1A7B3" />		
					</view>
					<text class="cancel-text" @click="closeSearchBar">取消</text>
				</view>
			</view>
		  <scroll-view class="scroll-box" scroll-y="true" @scrolltolower="toLower" lower-threshold="184">
				<view class="content">
					<view class="situation" v-for="(item,index) in situationList" :key="item.id" @click="gotoDetail(item.situationID)">
						<image class="situation-topic" :src="`/static/${item.topic ? 'situation-case' : 'situation-system'}.png`"></image>
						<view class="title">
							<text class="title-name">{{item.name}}</text>
						</view>
						<view class="check-group">
							<text class="group-text">{{item.checkGroupName}}</text>
						</view>
						<view class="row">
							<image class="situation-check" src="/static/situation-check.png"></image>
							<text class="text">{{item.checkStatus}}</text>
						</view>
						<view class="row">
							<image class="situation-time" src="/static/situation-time.png"></image>
							<text class="text">{{item.nextCheckTime}}</text>
						</view>
					</view>
				</view>
		  </scroll-view>
		</view>
		<view class="situaions-add" @click="gotoCreate">
			<image class="add-pic" src="/static/situation-add.png"></image>
		</view>
		<tm-tabbar :permission="nowPermission" />
	</view>
</template>
/**
 * 情境中心
 */
<script>
	import websocket from "../../utils/ws.js"; //引入websocket
	export default {
		data() {
			return {
				page:1,//页数
				inputValue:'',
				nowPermission:'',
				isSearchBarShow:false,//搜索栏是否可见
				isSearchBoxShow:true,//搜索图标是否可见
				situationList:[],//情境卡片列表
				totalCount:'',//返回数据的总条数
				refTimer: null,
				isInitWs: null,
				messageType: null,
			}
		},
		created: function() {
			this.nowPermission=uni.getStorageSync('nowPermission');
			
			this.init(true);
			this.refTimer = setInterval(() => {
			  this.isInitWs = websocket.ws ? false : true;
			  this.init(this.isInitWs);
			}, 3 * 60 * 1000);
			this.messStatus();
		},
		beforeDestroy() {
		  // 关闭ws连接
		  websocket.close();
		  clearInterval(this.refTimer);
		},
		watch:{
			  "$route":{
				  handler(route){
					  this.messStatus();
				  }
			  }
		},
		methods: {
			openSearchBar(){
				this.isSearchBarShow=true;
				this.isSearchBoxShow=false;
			},
			closeSearchBar(){
				this.isSearchBarShow=false;
				this.isSearchBoxShow=true;
			},
			valueEmpty(){
			 this.inputValue='';
			},
			gotoCreate(){
				uni.navigateTo({
					url: '/pages/creatingSituations/creatingSituations'
				});
			},
			gotoDetail(id){
				uni.navigateTo({
					url: `/pages/situationDetail/situationDetail?situationId=${id}`
				});
			},
			searchByKeywords(event){
				console.log(event);
				this.$store.dispatch({
					type: 'situationsCenter/commActions',
					payload: {
						key: 'situationList',
						data:{
							pageNum:1,
							pageSize:10,
							keyword:event.target.value,
						}
					}
				}).then((data)=>{
					if (data) {
						this.situationList=data.list.map((item,index)=>{
							return{
								name:item.name,
								checkStatus:item.checkStatus,
								nextCheckTime:item.nextCheckTime,
								checkGroupName:item.checkGroupName,
								topic:item.topic==0?true:false,
							}
						});
					}
				});
			},
			toLower(){
				uni.showToast({
					title:'加载中....',
					icon:'loading',
					duration:2000
				});
				let count=this.situationList.length;
				if(this.totalCount!=count){
					this.page++;
					this.$store.dispatch({
						type: 'situationsCenter/commActions',
						payload: {
							key: 'situationList',
							data:{
								pageNum:this.page,
								pageSize:10
							}
						}
					}).then((data) => {
						if (data) {
							this.situationList=data.list.map((item,index)=>{
								return{
									name:item.name,
									checkStatus:item.checkStatus,
									nextCheckTime:item.nextCheckTime,
									checkGroupName:item.checkGroupName,
									topic:item.topic==0?true:false,
									situationID:item.id,
								}
							});
							let hiId = uni.getStorageSync("hiId");
							let user = uni.getStorageSync("id");
							let permission = uni.getStorageSync("nowPermission");
							this.isInitWs && this.initWebsocket(hiId, user, permission);
						}
					});
				}
				else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none',
						duration:1000
					});
				}
			},
			toMessagePage() {
			  // this.messageType = false;
			  uni.navigateTo({
			    url: `/pages/messages/messages`,
			  });
			},
			
			init(isInitWs) {
			  this.isInitWs = isInitWs;
			  this.getSituationList();
			},
			initWebsocket(hiId, user, permission) {
			  websocket.url = `ws://192.168.1.45:8088/imed/pfm/websocket/${hiId}/${user}/${permission}`;
			  websocket.createWebSocket(this.resolverWsData.bind(this));
			},
			// 解析websocket返回数据
			resolverWsData(type) {
			  let types = JSON.parse(type);
			  switch (types.type) {
			    case "TO_READ":
			      this.messageType = true;
			      break;
			    default:
			      this.messageType = false;
			      break;
			  }
			},
			getSituationList(){
				this.$store.dispatch({
					type: 'situationsCenter/commActions',
					payload: {
						key: 'situationList',
						data:{
							pageNum:1,
							pageSize:10
						}
					}
				}).then((data) => {
					if (data) {
						this.totalCount=data.totalCount;
						this.situationList=data.list.map((item,index)=>{
							return{
								name:item.name,
								checkStatus:item.checkStatus,
								nextCheckTime:item.nextCheckTime,
								checkGroupName:item.checkGroupName,
								topic:item.topic==0?true:false,
								situationID:item.id,
							}
						});
						let hiId = uni.getStorageSync("hiId");
						let user = uni.getStorageSync("id");
						let permission = uni.getStorageSync("nowPermission");
						this.isInitWs && this.initWebsocket(hiId, user, permission);
					}
				});
			},
			messStatus(){
				let num = 1;
				let timer = setInterval(()=>{
				  this.$store.dispatch({
					  type: "calendar/commActions",
					  payload: {
						key: "messagesList",
						data: {
						  pageNum: num,
						  pageSize: 100,
						},
					  },
					}).then((res)=>{
						if(res && res.list.length == 0){
							clearInterval(timer)
						}else if(res && res.list.length != 0){
							res.list.map((item)=>{
								if(!item.readStatus){
									this.messageType = true;
									return;
								}
							})
						}
					})
				  num++;
				},200)
			}
		}
	}
</script>

<style lang="less">
	.situationsCenter-page{
		height: 100%;
		.calender-remind {
		  width: 62.5rpx;
		  height: 62.5rpx;
		  position: fixed;
		  right: 25rpx;
		  background: rgba(255, 255, 255, 0.95);
		  border-radius: 50%;
		  z-index: 2;
		  image {
		    margin-left: 17.5rpx;
		    margin-top: 16.87rpx;
		    width: 27.5rpx;
		    height: 28.75rpx;
		  }
		}
		.situation-list{
			// display: flex;
			// flex-flow: row wrap;
			// margin-top: 12.5rpx;
			position: relative;
			.search-box{
				position: absolute;
				left: 25rpx;
				top: 0rpx;
				z-index: 2;
				.search-model{
					height: 62.5rpx;
					width: 62.5rpx;
					background-color: #FFFFFF;
					text-align: center;
					border-radius: 50%;
					box-shadow: 0px 10px 10px 0px rgba(217, 221, 228, 0.5);
					border: 1px solid #E6EAF2;
					opacity: 0.85;
					.search-pic{
						width: 27.5rpx;
						height: 27.5rpx;
						margin-top: 17.5rpx;
					}
				}
				.search-bar{
						background-color: #FFFFFF;
						width: 700rpx;
						height: 62.5rpx;
						top: 31.25rpx;
						position: absolute;
						z-index: 2;
					.search-item{
						background-color: #FFFFFF;
						width: 593.75rpx;
						height: 62.5rpx;	
						float: left;
						border-radius: 6.25rpx;
						border: 1.25rpx solid #F0F2F7;
						.search-pic{
							width: 21.87rpx;
							height: 21.87rpx;
							margin-left:12.5rpx ;
							margin-top: 20.62rpx;
							float: left;
						}
						.searh-input{
							background-color: #FFFFFF;
							width: 525rpx;
							height: 55rpx;	
							font-size: 22.5rpx;
							float: right;
							margin-top: 3.75rpx;
							margin-left: 3.12rpx;
						}
						.text-clear{
							width: 21.87rpx;
							height: 21.87rpx;
							float: right;
							margin-top: 20.62rpx;
							margin-right: 6.25rpx;
						}
						
					}
					.cancel-text{
						font-size: 22.5rpx;
						line-height: 62.5rpx;
						color: #A1A7B3;
						margin-right: 31.25rpx;
						float: right;
					}
				}
				
			}
			
			.scroll-box{
				height: 1072.5rpx;
				width: 750rpx;
				// margin-top: 25rpx;
				.content{
					display: flex;
					flex-flow: row wrap;
					.situation{
						height: 187.5rpx;
						width: 337.5rpx;
						background: #FFFFFF;
						box-shadow: 0px 6px 20px 0px rgba(0, 13, 51, 0.1);
						border-radius: 8px;
						margin-left: 25rpx;
						margin-top: 25rpx;
						
						.situation-topic{
							width: 62.5rpx;
							height: 25rpx;
							float: right;
						}
						.title{
							height: 22.5rpx;
							margin-left: 20rpx;
							margin-top: 25rpx;
							display: flex;
							align-items: center;
							.title-name{
								font-size: 22.5rpx;
								font-family: SourceHanSansCN-Bold, SourceHanSansCN;
								font-weight: bold;
								color: #292C33;
							}
						}
						.check-group{
							margin-left: 20rpx;
							margin-top: 15rpx;
							margin-bottom: 25rpx;
							height: 17.5rpx;
							display: flex;
							align-items: center;
							.group-text{
								font-size: 17.5rpx;
								font-family: SourceHanSansCN-Normal, SourceHanSansCN;
								font-weight: 400;
								color: #666E80;
							}
						}
						.row{
							margin-left: 20rpx;
							margin-bottom: 17.5rpx;
							display: flex;
							align-items: center;
							height: 20rpx;
							.situation-check{
								width: 20rpx;
								height: 20rpx;
							}
							.situation-time{
								width: 20rpx;
								height: 20rpx;
							}
							.text{
								font-size: 20rpx;
								font-family: SourceHanSansCN-Normal, SourceHanSansCN;
								font-weight: 400;
								color: #292C33;
								margin-left: 11.25rpx;
							}
							
						}
					}
				}
				
			}
			
			
		}
		.situaions-add{
			position: absolute;
			right: 25rpx;
			bottom: 130rpx;
			.add-pic{
				width: 75rpx;
				height: 75rpx;
			}
		}
	}
</style>