Web_TracerMethodology/pages/mission/mission.vue

<template>
	<view class="mission-page">
		<view class="message-remind" @click="toMessagePage">
			<image :src="messageType?'/static/message-unread.png':'/static/message-read.png'" mode=""></image>
		</view>
	 	<scroll-view class="scroll-y" scroll-y="true">
			<list-item
				v-for="(item, i) in improvingTaskList"
				:key="item.id"
				:task="item"
			/>
			<view class="completed-box">
				<view class="btn-box" >
					<view class="btn" v-show="completeTaskList.length > 0" @click="toggleBtn">
						<image class="icon" :src="`/static/${btnSetting.icon}.png`"></image>
						<text class="text">
						  {{ btnSetting.name }}
						</text>
					</view>
				</view>
				<template v-if="showCloseList">
					<list-item
						v-for="(item, i) in completeTaskList"
						:key="item.id"
						:task="item"
						:isComplete="true"
					/>
				</template>
			</view>
		</scroll-view>
		<tm-tabbar />
	</view>
</template>

<script>
	// 任务列表
	import listItem from './components/list-item.vue';
	import websocket from '../../utils/ws.js';//引入websocket
	export default {
		data(){
			return {
				// 是否展开历史任务
				showCloseList: false,
				btnSetting: {
					icon: 'up-icon', // 图标名
					name: '展示历史任务' // 按钮显示名字
				},
				// 改善中任务
				improvingTaskList: [
					// {
					// 	appointFlag: false, // 已指派标志, 0 未指派 1已指派
					// 	checkGroupId: 1, // 查核组id
					// 	checkGroupName: "测试群组", // 查核组名称
					// 	checkId: 1,
					// 	checkItemId: 1, // 查核项目id
					// 	checkItemName: "测试点", // 查核项目名称
					// 	checkPlan: "第1/3次查核计划", // 查核计划
					// 	checkPointId: 1, // 查核要点id
					// 	checkPointName: "测试", // 查核要点名称(查核项)
					// 	createDate: "2021-02-03T01:44:09.000+0000", // 任务创建时间
					// 	createEmpId: 1, //创建人
					// 	createEmpName: "管理员", // 创建人姓名
					// 	delFlag: false,
					// 	deptId: 1, // 单位id
					// 	deptName: "测试部门", // 单位名称
					// 	desicion: "", // 改善工具:0,进行PDCA改善 1,暂不改善
					// 	endFlag: false, // 完结标识
					// 	id: 1, // 任务id
					// 	needApproveFlag: false, // 需要审核标志
					// 	recordTime: "2021-02-03 09:44:17", // 最终修改时间
					// 	situationId: 1, // 情景id
					// 	situationName: "测试情景", // 情景名称
					// 	taskType: 0, // 任务当前状态
          //   updateTime: "2021-02-03T01:44:17.000+0000", // 修改时间 (发送时间)
          //   improveEmpName: '', //改善人
          //   improveEmpId: '', //改善人id
					// }
				],
				// 历史任务
				completeTaskList: [],
				refTimer: null,
				isInitWs:null,
				messageType:null,
			}
		},
		created() {
			// this.getMissionList();
			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: {
			toggleBtn() {
				let flag = !this.showCloseList;
				this.showCloseList = flag;
				this.btnSetting = {
					icon: flag ? 'up-icon' : 'down-icon',
					name: flag ? '收起历史任务' : '展示历史任务'
				}
			},
			init(isInitWs) {
				this.isInitWs = isInitWs;
			    this.getMissionList()
			},
			// 获取改善任务列表
			getMissionList(data) {
				this.$store.dispatch({
					type: 'mission/commActions',
					payload: {
						key: "getMissionList",
						data
					}
				}).then(data => {
					if(data) {
						this.improvingTaskList = data.improvingTaskResponses || [];
						this.completeTaskList = data.improveCompleteResponses || [];
						let hiId = uni.getStorageSync('hiId');
						let user = uni.getStorageSync('id');
						let permission = uni.getStorageSync('nowPermission');
						this.isInitWs && this.initWebsocket(hiId,user,permission);
					}
				});
				/** 请求参数 data
				 * situationId: 情境id 当管路员或者查核者通过情境进入任务列表时 必传
				 * checkItemId 单位负责人通过 查核要点进入改善任务列表时 必传
				 */
			},
			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;
			  }
			},
			toMessagePage(){
				// this.messageType = false;
				uni.navigateTo({
				  url: `/pages/messages/messages`
				});
			},
			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++;
				},100)
			}
		},
		components: {
			listItem
		},
	}
</script>

<style lang="less">
 .mission-page {
   height: 100%;
   padding-top: 15rpx;
	.message-remind{
		width: 62.5rpx;
		height: 62.5rpx;
		position: fixed;
		top: 25rpx;
		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;
		}
	}
   	.scroll-y {
			height: calc(100% - 87.5rpx);

			.completed-box {

				.btn-box {
					display: flex;
					justify-content: center;
					margin-bottom: 25rpx;
					height: 50rpx;

					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 225rpx;
						height: 50rpx;
						border-radius: 37.5rpx;
						border: 1.25rpx solid #98A1B3;

						.icon {
							margin-right: 6.25rpx;
							width: 21.25rpx;
							height: 12.5rpx;
						}

						.text {
							font-size: 22.5rpx;
							color: #98A1B3;
						}
					}
				}
			}
		}
 }
</style>