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>
		<view class="radio-group" v-if="permission == 1 || permission == 4">
			<text :style="checkIndex==1?{background:'#3377ff',color:'#fff'}:{background:'#F5F6FA',color:'#3377ff'}" @click="cheangeRadioIndex(1)">我的单位</text>
			<text :style="checkIndex==2?{background:'#3377ff',color:'#fff'}:{background:'#F5F6FA',color:'#3377ff'}" @click="cheangeRadioIndex(2)">待处理</text></view>
	 	<scroll-view class="scroll-y" scroll-y="true">
			<list-item
				v-for="(item, i) in improvingTaskList"
				:key="item.id"
				:task="item"
			/>
			<tm-no-data v-show="improvingTaskList.length === 0 && !showCloseList"
				:textArr="['目前没有任务需要处理']" />
			<view class="completed-box" 
				:style="{marginTop: improvingTaskList.length === 0 && !showCloseList ? '-50rpx' : 0}">
				<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
	import {wsURL} from "../../utils/requestUrl.js";
	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,
				checkIndex:2,
				improvingTaskList2:[],
				list:[],
				permission:'',
			}
		},
		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.improvingTaskList2 = 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);
						this.permission = permission;
						if(this.checkIndex == 2){
							let list = [];
							this.improvingTaskList2.map(item=>{
								if(item.tackCare){
									list.push(item)
								}
							})
							this.list = list;
							this.improvingTaskList = list;
						}
					}
				});
				/** 请求参数 data
				 * situationId: 情境id 当管路员或者查核者通过情境进入任务列表时 必传
				 * checkItemId 单位负责人通过 查核要点进入改善任务列表时 必传
				 */
			},
			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;
			  }
			},
			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)
			// }
			cheangeRadioIndex(index){
				this.checkIndex = index;
				if(this.checkIndex == 1){
					this.improvingTaskList = this.improvingTaskList2;
				}else{
					this.improvingTaskList = this.list;
				}
			},
		},
		components: {
			listItem
		},
	}
</script>

<style lang="less">
 .mission-page {
   height: 100%;
   padding-top: 15rpx;
	.message-remind{
		width: 62.5rpx;
		height: 62.5rpx;
		position: fixed;
		top: 6.25rpx;
		right: 6.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;
		}
	}
   	.radio-group{
		margin: 12.5rpx 25rpx;
		width: calc(100% - 50rpx);
		border: 0.62rpx solid #3377ff;
		border-radius: 25rpx;
		font-size: 22.5rpx;
		line-height: 50rpx;
		color: #3377ff;
		overflow: hidden;
		text{
			width: 50%;
			display: inline-block;
			text-align: center;
		}
	}
	.scroll-y {
			height: calc(100% - 176rpx);

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