rd_mes_uniapp/pages/bom/cleaningRecords.vue

<template>
	<view>
		<div class="head">
			<table>
				<tr>
					<td>设&emsp;&emsp;备:</td>
					<td>
						<uni-easyinput type="text" prefixIcon="scan"
						placeholder="请扫描设备!" 
						v-model="machineCode"
						@iconClick="iconClick('machineCode')"
						/>
						<div class="button" @click="clickButton('getSelect')">查询</div>
					</td>
				</tr>
				<tr>
					<td>当前状态：</td><td>{{head.statusChina}}</td>
				</tr>
				<tr>
					<td>开炉时间：</td><td>{{head.openTime}}</td>
				</tr>
				<tr>
					<td>关炉时间：</td><td>{{head.closeTime}}</td>
				</tr>
			</table>
			<div class="button" v-show="open" @click="clickButton('inClick')">清炉</div>
		</div>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.msgType" :message="message.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="popup" type="center" background-color="#fff" :is-mask-click="false">
			<!-- 加载动画 -->
			<loding-vue/>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listMesFurnaceOperationRecord,
		addMesFurnaceOperationRecord
	} from '@/api/mes/bom.js'
	//引入加载动画
	import lodingVue from "@/utils/loding/loding.vue";
	export default {
		components:{
			lodingVue
		},
		data() {
			return {
				head:{
					statusChina:'',
					closeTime:'',
					openTime:'',
				},
				machineCode:'',
				message:{
					msgType:'warn',
					messageText:'请先查询设备信息'
				},
				open:false
			}
		},
		methods: {
			/**
			 * 按钮点击事件
			 * @param {Object} value
			 */
			clickButton(value){
				const _self= this
				_self.open = false;
				if(_self.machineCode == '') {
					return _self.messageType({
						msgType:'warn',
						messageText:'请输入设备代码'
					})
				}
				if( _self.head.statusChina === undefined && value !== 'getSelect'){
					return _self.messageType({
						msgType:'warn',
						messageText:'请先查询设备信息'
					})
				}
				_self[value]()
			},
			
			/**
			 * 提示信息
			 * @param {Object} obj
			 */
			messageType(obj){
				const _self = this;
				let message ={}
				if(obj === undefined){
					message = {
						msgType:'error',
						messageText:'请填写设备代码'
					}	
				}else{
					message = {
						msgType:obj.msgType,
						messageText:obj.messageText
					}
				}
				_self.message = Object.assign({},message)
				return _self.$refs.message.open()
			},
			/**
			 * 接口访问方法
			 * @param {Object} api 接口名称
			 * @param {Object} value 带入参数
			 */
			async fnApi(api,value){
				const _self = this;
				const objApi = {
					listMesFurnaceOperationRecord,
					addMesFurnaceOperationRecord,
				}
				try{
					//打开蒙层
					_self.$refs.popup.open()
					//查询接口
					const data = (await objApi[api](value)).rows
					return data
				}catch(e){
					_self.messageType({
						msgType:'error',
						messageText:'接口请求出错'
					})
				}finally{
					//关闭蒙层
					_self.$refs.popup.close()
				}
			},
			/**
			 * 查询设备最近的记录
			 */
			async getSelect(){
				const _self = this
				const query = {
					pageNum: 1,
					pageSize: 1,
					machineCode: _self.machineCode,
					orderByColumn: "id",
					isAsc: "desc",
				}
				let rows = (await _self.fnApi('listMesFurnaceOperationRecord',query))[0];
				if(rows === undefined) return
				const statusChina = await getStatus(rows)
				rows = Object.assign(rows,{statusChina})
				_self.open = statusChina =='关炉' ? true :false;
				_self.head = rows
				/**
				 * 判断当期是清炉|关|开
				 * @param {Object} arr
				 */
				function getStatus (arr){
					const obj = {
						0:'开炉',
						1:'关炉',
						2:'清炉'
					}
					return obj[arr.status]
				}
			},
			/**
			 * 清炉事件
			 */
			async inClick(){
				const _self = this;
				
				const {closeBy,closeTime,createBy,createTime,machineCode, machineId} =  _self.head
				
				// 获取当前北京时间的时间戳（单位为毫秒）
				var stamp= new Date().getTime() + 8 * 60 * 60 * 1000;
				var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
				
				const clearBy = uni.getStorageSync('HBusername');
				
				const obj = Object.assign(_self.head,{
					clearBy,
					clearTime:beijingTime,
					updateTime:beijingTime,
					id:null,
					status:2
				})
				
				await _self.fnApi('addMesFurnaceOperationRecord',obj)
				_self.getSelect()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff;
		$fontSize:5vw; //设置变量，以字体为基础大小
		font-size: $fontSize;
		color: #6a6663;
		view{
			width: 96vw;
			margin: 0 auto;
			&>div{
				display: flex;
				justify-content:center;
				flex-wrap: wrap ; //设置换行
			}
			.head{
				border-bottom: 0.5vw solid #a2adab;
				table{
					
					&>tr:first-child>td:last-child{
						&>* {
							float: left;
						}
						&>*:first-child{
							margin-right: 2%;
							width: 75%;
						}
						
						&>*:last-child{
							width: 20%;
							min-height: 35px;
							max-height: 50px;
							margin:0;
							border: 1px solid #a3cccc;
						}
					}
				}
			}
			table{
				width: 100%;
				&>tr td:last-child{
					width: 71%;
				}
			}
			.button{
				width: 4 * $fontSize;
				// aspect-ratio: 2; //设置元素纵横比，宽是高的两倍
				border: $fontSize / 10 solid #a3cccc;
				border-radius: 15%;
				text-align: center;
				line-height: 2 * $fontSize;
				margin: $fontSize /2 0;
			}
		}
	}
	@media (min-width: 100px) and (max-width: 600px) {
	    .head tr:first-child>td:last-child>*:last-child{
	        font-size: 15px;
	        line-height: 35px;
	    }
	}
	@media (min-width: 600px) {
	    .head tr:first-child>td:last-child>*:last-child{
			font-size: 30px;
			line-height: 50px;
	    }
	}
</style>


<style>
	page{
		background-color: #ffffff ;
	}
</style>