Web_TracerMethodology/pages/situationsCenter/situationsCenter.vue

<template>
	<view class="situationsCenter-page">
		<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>
	export default {
		data() {
			return {
				page:1,//页数
				inputValue:'',
				nowPermission:'',
				isSearchBarShow:false,//搜索栏是否可见
				isSearchBoxShow:true,//搜索图标是否可见
				situationList:[],//情境卡片列表
				totalCount:'',//返回数据的总条数
			}
		},
		created: function() {
			this.nowPermission=uni.getStorageSync('nowPermission');
			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,
						}
					});
				}
			});
		},
		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,
								}
							});
						}
					});
				}
				else{
					uni.showToast({
						title:'没有更多数据了',
						icon:'none',
						duration:1000
					});
				}
			},
		}
	}
</script>

<style lang="less">
	.situationsCenter-page{
		height: 100%;
		.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>