imcs_yj_fe/imcs-ui/src/views/zuihou/machiningClient/touchScreen/Index.vue

<template>
	<div id="playerMap" ref="playerMap" class="app-container yunMapDiv" style="height:200%;">
		<!-- 全屏 -->
		<el-row :gutter="20" class="rowCls">
			<div class="headerBg">
				<h2>现场工控端</h2>
    			<div class="battonDiv">
    				<el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
    					<a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
    				</el-tooltip>
    				<el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
    					<a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
    				</el-tooltip>
    			</div>
			</div>
		<!--
		<el-image
	      	style="width: 100%; height: 100%"
	      	:src="url"
	      	fit="fill"
	    ></el-image> -->	
	    </el-row>

		<!-- 区域模块 -->
  		<div style="text-align:left;margin-left:5%;">
            <!-- 搜索-部分 -->
	  		<div class="defaultRow noBorder">
		  		<el-select v-model="opValue" :span="2" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.name"
				      :value="item.value">
				    </el-option>
				  </el-select>

				  <span :span="2" style="margin-left: 2%;">
						<el-button plain type="primary" icon="el-icon-view" size="medium" @click="readView" >
		         			读RFID
		      			</el-button>
				  </span> 
				  <span :span="2" style="margin-right: 5%; float:right;">
                       <el-button plain type="primary" icon="el-icon-view" size="medium" @click="navigator">
		         			我的班表
		      			</el-button>
				  </span>	  
	  		</div>

			<el-tabs style="text-align: left;margin-top:25px;">
  				<el-tab-pane label="未完成">
    				<span class="tabTitle" slot="label"><el-badge :value="taskCount" class="badge"><i class="el-icon-date"></i> 未完成</el-badge> </span>					
                    	<el-col :span="(index==0)? 12:8" :gutter="24" v-for="(item, index) in taskData.slice(0,3)" :key="item.id" :offset="(index==0)?0:1"  v-show="(item.status==0)?true:false"  :style="(index==0)?'zoom:1;min-width:300px;':'zoom:0.6;min-width:180px;'">
                              <el-card :gutter="24" class="box-card" style="margin:5px;" >
                                    <div class="card_content">
									 <div class="block card_header">									 	
											<el-image
										  	style="width: 90px; height: 80px;max-width:200%;max-height:200%;"
										  	:src="resolveLogo('status'+(index+1)+'.png')"
	      								  	fit="fill"
											>						
											</el-image>
										<span>{{ item.taskName }}</span>																	
      									<div class="itemNo">任务编号: {{ item.no }}</div>
									 </div>
									<el-form style="margin-top:10px;">
    									<el-form-item label="零件名称:" >
      										<span>{{ item.name }}</span>
    									</el-form-item>
    									<el-form-item label="工序号:" >
                                            <span>{{ item.taskNo }}</span>
    									</el-form-item>
										<el-form-item label="托盘编号:" >
                                            <span>{{ item.trayNo }}</span>
    									</el-form-item>
										<el-form-item label="额定时间:" >
                                            <span>{{ item.time }}分钟</span>
											<div class="timeprogress">
						    					<el-progress :text-inside="true" :stroke-width="15" :percentage="setPercentage(item.time, item.left)" color="#FF3366" :format="setItemText(item.time, item.left)" ></el-progress>
											</div>
    									</el-form-item>
										<el-form-item>
                                            <span style="margin:2% 0; float:right;">
                       							<el-button plain type="primary" icon="el-icon-view" size="medium" @click="finishTask(item)">
		         									完成
		      									</el-button>
				  							</span>  
										</el-form-item>
  									</el-form> 					
      							</div>
							  </el-card>
						</el-col>				 					
  				</el-tab-pane>
  				 <el-tab-pane label="已完成">
                    <span class="tabTitle" slot="label">						  
						 <i class="el-icon-date"></i> 已完成						  
					</span>
				    <el-table
      					:data="finishData"
						stripe  
      					style="width: 100%">
      					<el-table-column
        					prop="taskName"
        					label="名称"
        					width="200">
      					</el-table-column>
						<el-table-column
        					prop="name"
        					label="零件名"
        					width="200">
      					</el-table-column>
						<el-table-column
        					prop="no"
        					label="编号"
        					width="200">
      					</el-table-column>  
						<el-table-column
        					prop="taskNo"
        					label="工序号"
        					width="150">
      					</el-table-column>
      					<el-table-column
        					prop="trayNo"
        					label="托盘编号"
        					width="200">
      					</el-table-column>
    				</el-table>				
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 【查看】组件 -->
	    <task-view
	      	ref="view"
	      	:dialog-visible="tenantViewVisible"
			@get-data="showRFID"
	      	@close="viewClose"
	    />
	</div>	
</template>


<script>
    // 【查看】组件
	import TaskView from "../waitingTasks/components/View"
	import { fullScreen, exitFullScreen } from '@/utils/commons'
	import stationMgrApi from "@/api/machiningClient/stationMgr";
export default {
  name: 'TouchScreen',
  components: { TaskView },
  props: {
  },
  data () {
    return {
		options:[{name:"上下料站1",value:1},{name:"上下料站2",value:2},{name:"上下料站2",value:3},{name:"上下料站4",value:4}],
    	opValue: 1,
		taskCount:6,
		taskData:[{id:1,taskName:"上料",no:"12235566",name:"框体",taskNo:"OP10",trayNo:"TP7788",time:15,left:2,status:0},{id:2,taskName:"翻面",no:"12235566",name:"框体",taskNo:"OP50",trayNo:"TP7788",time:25,left:6,status:0},{id:3,taskName:"下料",no:"12235566",name:"框体",taskNo:"OP90",trayNo:"TP7788",time:5,left:1,status:0},{id:4,taskName:"下料",no:"12235566",name:"框体",taskNo:"OP90",trayNo:"TP7788",time:5,left:1,status:0}],
		finishData:[],		
		step: 1,
		tenantViewVisible: false,
		isFullSreen: false, // 默认不全屏    	
    }
  },
  	// 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
  	created() {
	   this.fetch()	  
	},
  	computed: {
	   currentUser () {
	      return this.$store.state.account.user
	   }  
  	},
  	mounted () {
  	},
  	methods: {
  		
  		// 全屏
	  	fullPing(){
	  		this.$nextTick(() => {
	  			// 显示【退出全屏】
	  			this.isFullSreen = true
	  			// 如果是退出全屏
	  			let $playerMap = this.$refs.playerMap
	  			if($playerMap){
	  				fullScreen($playerMap)
	  			}
	  		})
	  	},
	  	
	  	// 退出全屏
	  	exitFullPing(){
	  		this.$nextTick(() => {
	  			// 显示【全屏】
	  			this.isFullSreen = false
	  			// 如果是全屏
	  			exitFullScreen(document.getElementById('playerMap'))
	  		})
	  	},
		selectChange(value){
          console.log(value)
		},
		fetch(){		   	
		   stationMgrApi.getStation({userId:this.$store.state.account.user.id}).then((res) => {
              	res = res.data;
				if(res.isSuccess){
					if(res.data.length>0){
                      this.options = res.data
					}					
				}  
		     });		
		},
		readView(){			
			//this.tenantViewVisible = true
			this.$refs.view.read(null)			
		},  
		showRFID(code){
           console.log(code)		   
		},
		resolveLogo(logo) {
        	return require(`@/assets/yunMap/${logo}`);
        },
		viewClose () {
	      	this.tenantViewVisible = false
	    },
		setPercentage(time, left){			
			return this.formatGap(time, left)[0]>100? 100 : this.formatGap(time, left)[0]			
	    },
		// 设置进度文本内容
	   setItemText(time, left){
	       return () => {
		        return this.formatGap(time, left)[1]
			}	  
	    },
		//时间差转换
        formatGap(time, left) {			
			return [Number(parseInt(100*left/time)),  "剩余"+ left +"分钟"]
		},	  
		finishTask(item){			
			item.status = 1
			this.taskCount = this.taskCount - 1
			this.finishData.push(item)
			this.taskData.shift()
		},
		navigator(){
			this.$router.push("/classScheduleMgr/classScheduleMgr")
		}	
  	}
}
</script>


<style lang="scss" scoped>
	.tabDiv{
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		.battonDiv {
			z-index: 9;
		}
	}
	.tabTitle {
		font-size: 24px;
		height: 24px;
		line-height:24px;
	}
	.card_content{
		padding: 8px;
		width:100%;
		text-align:left;
		color:#fff;
	}
	.card_header{
	    position:relative;
		border-bottom:1px solid #fff;
		margin:10px 0;		
	}
	.indexNo {
	   position:absolute;
	   top:25%;
	   left:9%;	
       font-size:24px;
	   line-height:24px;
	   height:24px;
	   color:#fff;
	   z-index:999;
	}
	.indexNo2 {
	   position:absolute;
	   top:25%;
	   left:6%;	
       font-size:24px;
	   line-height:24px;
	   height:24px;
	   color:#fff;
	   z-index:999;
	}
	.itemNo {	   	
       font-size:12px;
	   line-height:12px;
	   height:12px;
	   text-align:right;
	   color:#fff;
	   margin-left:20%;
	   margin-bottom:10px;
	}
	.timeprogress >>> .el-progress-bar__outer {
	  background-color: #1890ff;
	}
	.timeprogress .el-progress-bar__inner {
	  text-align:center;	 
	}	
	.el-form-item >>> .el-form-item__label {
		color: #fff;
	}	
	.el-form-item {
		margin-bottom: 0;
	}
	
	.tabTitle >>> .el-badge {
		position: relative;
        display: inline-block;
		vertical-align: baseline;
	} 
	.badge {
	   margin-top: 10px;
  	   margin-right: 20px;	
	}
</style>