Web_TracerMethodology/pages/situationsCenter/situationsCenter.vue

<template>
	<view class="situationsCenter-page">
		<view class="calender-remind" @click="toMessagePage">
		  <image :src="`/static/message-${messageType? 'unread':'read'}.png`"></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 v-if="nowPermission == 1" 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,
				num: 1,
				timer: 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(1);
		},
		beforeDestroy() {
		  // 关闭ws连接
		  websocket.close();
		  clearInterval(this.refTimer);
			clearTimeout(this.timer);
		},
		watch:{
			  "$route":{
				  handler(route){
					  this.messStatus(1);
				  }
			  }
		},
		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}`
				});
			},
			getSituationList(data, callback) {
				this.$store.dispatch({
					type: 'situationsCenter/commActions',
					payload: {
						data,
						key: 'situationList'
					}
				}).then((data)=> {
					if(data) callback(data);
				});
			},
			searchByKeywords(event){
				let data = {
					pageNum:1,
					pageSize:10,
					keyword:event.target.value,
				};
				this.getSituationList(data,(data)=>{
					this.situationList = [];
					this.createSituationList(data.list);
				});
			},
			createSituationList(list=[]) {
				list.map((item,index)=>{
					this.situationList.push({
						name:item.name,
						checkStatus:item.checkStatus,
						nextCheckTime:item.nextCheckTime,
						checkGroupName:item.checkGroupName,
						topic:item.topic==0?true:false,
						situationID:item.id,
					});
				});
			},
			toLower(){
				uni.showToast({
					title:'加载中....',
					icon:'loading',
					duration:2000
				});
				let count=this.situationList.length;
				if(this.totalCount!=count){
					this.page++;
					let data = {
						pageNum:this.page,
						pageSize:10
					};
					this.getSituationList(data,(data)=>{
						this.createSituationList(data.list);
						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.initSituationList();
			},
			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;
			  }
			},
			initSituationList(){
				let data = {
					pageNum:1,
					pageSize:10
				};
				this.getSituationList(data, (data)=>{
					this.totalCount=data.totalCount;
					this.createSituationList(data.list);
					let hiId = uni.getStorageSync("hiId");
					let user = uni.getStorageSync("id");
					let permission = uni.getStorageSync("nowPermission");
					this.isInitWs && this.initWebsocket(hiId, user, permission);
				});
			},
			messStatus(num){
				this.$store.dispatch({
					type: "calendar/commActions",
					payload: {
					key: "messagesList",
					data: {
						pageNum: num,
						pageSize: 100,
					},
					},
				}).then((res)=>{
					if(res && res.list.length != 0){
						res.list.map((item)=>{
							if(!item.readStatus){
								this.messageType = true;
								return;
							}
						})
						this.num++;
						this.timer = setTimeout(()=>{
							this.messStatus(this.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{
			position: relative;
			height: 100%;
			.search-box{
				position: fixed;
				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{
				width: 100%;
				height: calc(100% - 87.5rpx);
				.content{
					display: flex;
					flex-flow: row wrap;
					padding-bottom: 25rpx;
					.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: fixed;
			right: 25rpx;
			bottom: 130rpx;
			.add-pic{
				width: 75rpx;
				height: 75rpx;
			}
		}
	}
</style>