Web_TracerMethodology/pages/situationsCenter/situationsCenter.vue

<template>
	<view class="situationsCenter-page">
		<tmNavbar @onsearchChange="onsearchChangehandle" :is-back="false" @checkMessage="checkMessageHandle"
			:titleMod="nowPermission == 6||nowPermission == 4||nowPermission ==7||nowPermission == 8?'Filter':'Normal'"
			:filterKeys="filterKeys" :isShowFilter="true" :messageStatus="true" :isShowSearch="true"
			@filterClick="filterClickHandle" :title="pageTitle" title-color="#292C33"></tmNavbar>

		<view class="situation-list">

			<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="toLower" lower-threshold="5">
				<view class="content" :style="[situationList.length === 0 ?{height:'100%'}:{}]">
					<view class="situation" v-for="(item, index) in situationList" :key="item.id"
						@click="gotoDetail(item.situationID,item.systemSituationType,item)">
						<!-- <image v-if="item.systemSituationType != 2" class="situation-topic" :src="`/static/${
                item.topic ? 'situation-case' : 'situation-system'
              }.png`"></image> -->

						<view v-if="item.systemSituationType == 2&&nowPermission !=1 " :class="getClass(item)">
							{{situationStatusName(item)}}</view>

						<view :class="situationTypeName(item,0)"
							v-if="nowPermission !=4&&nowPermission !=7&&nowPermission !=8&&nowPermission !=6 ">
							{{situationTypeName(item,1)}}</view>

						<view class="title">
							<text class="title-name">{{ item.name }}</text>
						</view>
						<view class="check-group">
							<text class="group-text">
								{{
                  nowPermission == 2
                    ? "剩余" + (item.toDistributeCount || 0) + "个待分配"
                    : 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>
					<tm-no-data v-if="situationList.length === 0" :textArr="['还没有情境', '快点击右下方按钮新建一个吧']" />
				</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
	import tmNavbar from "@/components/tm-navbar/tm-navbar.vue";
	import {
		wsURL
	} from "../../utils/requestUrl.js";
	// import appUpdate from "@/components/app-update/app-update.vue"

	export default {
		components: {
			tmNavbar
		},
		data() {
			return {

				page: 1, //页数
				inputValue: "",
				nowPermission: "",
				isSearchBarShow: false, //搜索栏是否可见
				isSearchBoxShow: true, //搜索图标是否可见
				situationList: [], //情境卡片列表
				copied_situationList: [], //复制情境卡片列表 用于筛选
				totalCount: "", //返回数据的总条数
				refTimer: null,
				isInitWs: null,
				messageType: null,
				num: 1,
				pageTitle: '情境中心',
				// showUpdatePop:false,
				timer: null,
				// ws接口参数
				initParams: {},

			};
		},
		// components:{appUpdate},
		created: function() {
			this.nowPermission = uni.getStorageSync("nowPermission");
			this.init(true);
			this.refTimer = setInterval(() => {
				this.isInitWs = websocket.ws ? false : true;
				const {
					hiId,
					user,
					permission
				} = this.initParams;
				this.isInitWs && this.initWebsocket(hiId, user, permission);
			}, 3 * 60 * 1000);

			// this.messStatus();
		},
		beforeDestroy() {
			// 关闭ws连接
			websocket.close();
			clearInterval(this.refTimer);
			clearTimeout(this.timer);
		},
		computed: {
			statusBarHeight() {
				const {
					statusBarHeight
				} = uni.getSystemInfoSync();
				return statusBarHeight;
			},
			filterKeys() {

				const list = [{
						text: '全部',
						checked: true,
						key: '0'
					},
					{
						text: '已完成',
						checked: false,
						key: '6'
					},
					{
						text: '进行中',
						checked: false,
						key: '2'
					},
					{
						text: '待分配',
						checked: false,
						key: '4'
					}
				];
				
				return list;

				// const modify = (key) => {
				// 	const _list = list.map(a => {
				// 		if (a.key == key) {
				// 			return {
				// 				...a,
				// 				checked: true
				// 			}
				// 		} else {
				// 			return {
				// 				...a,
				// 				checked: false
				// 			}
				// 		}
				// 	});
				// 	return _list;
				// }

				// if (this.nowPermission == 6) {
				// 	//职能科室负责人
				// 	return modify(1);
				// }
				// if (this.nowPermission == 6) {
				// 	//职能科室负责人
				// 	return modify(4);
				// }

			}

		},
		mounted() {

		},
		methods: {
			filterClickHandle(filterData) {
				console.log({filterData});

				if (filterData.key != 0) {
					const _situationList = this.copied_situationList.filter(item => item.situationStatus == Number(
						filterData.key));
					console.log({
						_situationList,
						filterData,
						'this.copied_situationList':this.copied_situationList,'this.situationList':this.situationList
					});
					this.situationList = _situationList;
				} else {
					this.initSituationList();
				}

			},
			situationStatusName(item) {

				if (item.situationStatus == 2) {
					return '进行中'
				}
				if (item.situationStatus == 6) {
					return '全部完成'
				}
				if (item.situationStatus == 4) {
					return '待分配'
				}
				if (item.situationStatus == 5) {
					return '已完成'
				}

				return null

			},
			situationTypeName(item, type) {

				if (item.systemSituationType == 0) {
					return type == 1 ? '个案' : 'Mark case'
				}
				if (item.systemSituationType == 1) {
					return type == 1 ? '系统' : 'Mark system'
				}
				if (item.systemSituationType == 2) {
					return type == 1 ? '自查督查' : 'Mark zichaducha'
				}
			},
			getClass(item) {
				if (item.situationStatus == 2) {
					return 'topMark doing'
				}
				if (item.situationStatus == 6) {
					return 'topMark complete'
				}
				if (item.situationStatus == 4) {
					return 'topMark wait'
				}
				if (item.situationStatus == 5) {
					return 'topMark complete'
				}

				return 'topMark'
			},
			onsearchChangehandle(keywords) {
				this.searchByKeywords(keywords);
			},
			openSearchBar() {
				this.isSearchBarShow = true;
				this.isSearchBoxShow = false;
			},
			checkMessageHandle() {
				//查看消息
				uni.navigateTo({
					url: `/pages/messages/messages`,
				});
			},
			closeSearchBar() {
				this.isSearchBarShow = false;
				this.isSearchBoxShow = true;
			},
			valueEmpty() {
				this.inputValue = "";
			},
			gotoCreate() {
				uni.navigateTo({
					url: "/pages/creatingSituations/creatingSituations",
				});
			},
			gotoDetail(id, systemSituationType, item) {

				this.$store.commit({
					type: 'situationsCenter/comChangeState',
					key: 'currentSelectedSituation',
					data: item
				});

				uni.navigateTo({
					url: `/pages/situationDetail/situationDetail?situationId=${id}&systemSituationType=${systemSituationType}`,
				});
			},
			getSituationList(data, callback) {
				this.$store
					.dispatch({
						type: "situationsCenter/commActions",
						payload: {
							data,
							key: "situationList",
						},
					})
					.then((data) => {
						if (data) callback(data);
					});
			},
			searchByKeywords(keywords) {
				let data = {
					pageNum: 1,
					pageSize: 300,
					keyword: keywords,
				};
				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,
						systemSituationType: item.systemSituationType,
						//systemSituationType == 0 普通 1 自查督查
						checkGroupName: item.systemSituationType != 2 ? item.checkGroupName : (item
							.department.map(v => v.deptClassName)).join(','),
						topic: item.topic == 0 ? true : false,
						situationStatus: item.situationStatus,
						situationID: item.id,
						toDistributeCount: item.toDistributeCount,
					});
				});
			},
			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: 300,
					};
					// this.getSituationList(data, (data) => {
					// 	this.createSituationList(data.list);
					// 	let hiId = uni.getStorageSync("hiId");
					// 	let user = uni.getStorageSync("id");
					// 	let permission = uni.getStorageSync("nowPermission");
					// 	this.initParams = {
					// 		hiId,
					// 		user,
					// 		permission
					// 	};
					// 	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 = wsURL(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: 300,
				};
				this.getSituationList(data, (data) => {
					this.totalCount = data.totalCount;
					this.createSituationList(data.list);
					this.copied_situationList = data.list;
					let hiId = uni.getStorageSync("hiId");
					let user = uni.getStorageSync("id");
					let permission = uni.getStorageSync("nowPermission");
					this.initParams = {
						hiId,
						user,
						permission
					};
					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%;

		.navbar {
			background-color: #ffffff;
		}

		.calender-remind {
			width: 62.5rpx;
			height: 62.5rpx;
			position: fixed;
			top: 20rpx;
			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;
			}
		}

		.search-box {
			position: fixed;
			top: 20rpx;
			left: 25rpx;
			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: 0rpx;
				position: absolute;
				z-index: 2;

				.search-item {
					background-color: #ffffff;
					width: 593.75rpx;
					height: 62.5rpx;
					float: left;
					border-radius: 6.25rpx;
					border-right: 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;
				}
			}
		}

		.situation-list {
			position: relative;
			height: 100%;

			.scroll-box {
				width: 100%;
				height: calc(100% - 87.5rpx);

				.content {
					display: flex;
					flex-flow: row wrap;
					padding-bottom: 100rpx;

					.situation {
						position: relative;
						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;
						// overflow: hidden;

						.Mark {
							position: absolute;
							top: 0;
							right: 0;
							font-size: 15rpx;

							padding-left: 20rpx;
							padding-right: 10rpx;
							color: #ffffff;
							border-radius: 0px 8rpx 0px 25rpx;
							background: rgba(255, 51, 85, 1);

							&.case {
								background: rgba(0, 204, 170, 1);
							}

							&.system {
								background: rgba(61, 121, 242, 1);
							}
						}

						.topMark {
							position: absolute;
							top: 0;
							right: 0;
							padding: 3.75rpx 12.5rpx;
							font-size: 13.75rpx;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #FFFFFF;
							background: #FF6680;
							border-radius: 0px 5rpx 0px 20rpx;

							&.doing {
								background-color: rgba(255, 204, 102, 1);
							}

							&.wait {
								background-color: rgba(102, 179, 255, 1);
							}

							&.complete {
								background-color: rgba(173, 184, 204, 1);
							}
						}

						.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 {
								width: 300rpx;
								font-size: 22.5rpx;
								font-family: SourceHanSansCN-Bold, SourceHanSansCN;
								font-weight: bold;
								color: #292c33;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; //溢出不换行

							}
						}

						.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>