intelligent-medicine-cabinet/mini-pro-web/src/views/machine/index.vue

<template>
	<div class="machine-index">
		<div v-show="step==3&&rsType!=3" class="back-btn" @click="onPrev">
			<img src="./img/fanhui_icon.png" alt="">
			<span>{{times}}s</span>
		</div>

		<div v-show="step===0" class="tc">
			<div class="plr15 pt20">
				<van-field v-model="deviceNum" clearable label="" placeholder="请输入设备编号" />
			</div>
			<div class="tc mt20">
				<van-button color="#17b3ec" @click="init" type="primary">   启动  </van-button>
			</div>
		</div>
		<div v-show="step==1" class="step-1">
			<div class="title-banner ">
				<img src="./img/biaoti_img.png" alt="">
			</div>

			<div class="video-swipe">
				<van-swipe :autoplay="0" indicator-color="white">
					<template v-if="videoList&& videoList.length">
						<van-swipe-item v-for="(item, i) in videoList" :key="i">
							<video class="swipe-item-video" :autoplay="i==0" loop controls muted :src="setImgUrl(item.url)"></video>
						</van-swipe-item>
					</template>
					<van-swipe-item v-else>
						<!-- <img class="swipe-item-img" src="./img/banner01.png"> -->
						<video class="swipe-item-video" autoplay loop controls muted src="./img/default.mp4"></video>
					</van-swipe-item>
				</van-swipe>
			</div>

			<div class="img-swipe">
				<van-swipe :autoplay="3000" indicator-color="white">
					<template v-if="imgList && imgList.length">
						<van-swipe-item v-for="(item, i) in imgList" :key="i">
							<img class="swipe-item-img" :src="setImgUrl(item.url)">
						</van-swipe-item>
					</template>
					<van-swipe-item v-else>
						<img class="swipe-item-img" src="./img/banner01.png">
					</van-swipe-item>
				</van-swipe>
			</div>

			<div class="banner-list kitbox">
				<div class="item">
					<img @click="curImg=1;illustrationMskShow=true" src="./img/btn_ccfsm.png" alt="">
					<img @click="curImg=2;illustrationMskShow=true" src="./img/btn_qylc.png" alt="">
				</div>
				<div class="arrow">
					<img src="./img/jiantou_icon.png" alt="">
				</div>
				<div class="item">
					<img @click="step=2" src="./img/btn_saoma.png" alt="">
					<img @click="sendReadCard" src="./img/btn_ybk.png" alt="">
				</div>
			</div>

			<div class="footer">
				<img src="./img/erweima.png" alt="">
			</div>

			<div class="illustration-mask" v-show="illustrationMskShow">
				<div class="illustration-inner">
					<img v-show="curImg==1" class="pic" src="./img/chufang_tankang_img.png" alt="">
					<img v-show="curImg==2" class="pic" src="./img/quyao_tankuang_img.png" alt="">
					<div class="close">
						<img @click="illustrationMskShow=false;curImg=''" src="./img/guanbi_btn.png" alt="">
					</div>
				</div>
			</div>
		</div>

		<Scan @onComplete="onComplete" v-show="step==2" @onBack="step=1"/>
		<Result @showOrderDetail="showOrderDetail" @outDrug="sendShipment" @onPrint="SetPrintPage" :rsType.sync="rsType" :orderList="orderList" :orderdetail="orderdetail" v-show="step==3" @onBack="step=2" @onBackIndex="step=1"/>
	</div>
</template>
<script>
import Scan from './components/Scan.vue';
import Result from './components/Result.vue';
import medicineAbinetApi from '@/api/api-medicineAbinet'
var countDownFunc
export default {
	name: "machineIndex",
	components: {
		Scan,
		Result
  	},
  	data() {
    	return {
			deviceNum: this.$route.query.deviceNum || '14912202107000001500000000000000',//14912202107000001500000000000000
			step: 0, //0启动页  1首页  2扫码页  3订单页
			curImg: '',
			illustrationMskShow: false,
			socketUrl: '',
			path: "ws://yik.ab-inbev.vip/c/websocket/",
			socket: "",
			mess: [],
			layerNo: "0",
			wayerNo: "0",
			forceClose: false,
			heartbitInterval: '',
			currindex: 0,
			orderdetail: [],
			rsType: 0,// 1:订单信息 2订单错误  3订单成功  4出药完成  5订单列表
			imgList: [],
			videoList: [],
			inCheckBarcode: false,
			orderInfo: '',
			orderList: [],
			times: 30
    	}
  	},
	watch:{
		step(n){
			if(n!=3){
				this.rsType = 0
			}
		},
		rsType(n){
			clearInterval(countDownFunc)
			if(n!=4 && this.step==3){
				this.countDown()
			}
		}
	},
	created(){
		
	},
  	methods: {
		onPrev(){
			if(this.rsType == 5){
				this.step = 1
			} else if(this.rsType==1 || this.rsType==2 || this.rsType==4){
				var orderLen = this.orderList&&this.orderList.length>1
				if(orderLen){
					if(this.rsType==4){
						this.orderList.splice(this.orderList.indexOf(this.orderInfo), 1)
					}
					this.rsType = 5
				} else {
					this.step = 1
				}
			} 
		},
		devinfoAdvList(){
			var p = {
				equNum: this.deviceNum
			}
			medicineAbinetApi
                .devinfoAdvList(p)
                .then(res=>{
                    console.log('devinfoAdvList', res)
					this.$toast.clear()
					if(res.status == 200){
						res.detailModelList.forEach(v => {
							if(v.categoryCode==2){
								this.imgList.push(v)
							} else {
								this.videoList.push(v)
							}
						});
					} else {
						this.$toast(res.message || '获取广告失败')
					}
                })
                .catch(err=>{
                    console.error(err)
                })
		},
		onComplete(data){
			this.checkOrderAndReturn({pickUpNum: data, cardNum: ""})
		},
		checkOrderAndReturn({pickUpNum="", cardNum=""}){
			this.$toast.clear()
            this.$loading('加载中..')
            let p = {
                deviceId: this.deviceNum, //设备编号
				pickUpNum, //取药码
				cardNum: cardNum //社保卡号 //"DA7292254" ||
            }
            console.log('params', p)
            medicineAbinetApi
                .checkOrderAndReturnOrderList(p)
                .then(res=>{
                    console.log('checkOrderAndReturnOrderList', res)
					if(res.status == 200){
						this.$toast.clear()
						if(res.obj && res.obj.orderList && res.obj.orderList.length){
							if(res.obj.orderList.length == 1){
								this.showOrderDetail(res.obj.orderList[0])
							} else {
								this.orderList = res.obj.orderList || []
								this.rsType = 5
								this.step = 3
							}
						} else {
							this.$toast('查不到订单信息')
						}
					} else {
						this.$toast(res.message || '获取订单失败')
					}
					this.inCheckBarcode = false
                })
                .catch(err=>{
                    console.error(err)
					this.inCheckBarcode = false
                })
        },
		showOrderDetail(item){
			item.drugList.forEach(v=>{
				v.success = false
			})
			this.orderdetail = item.drugList
			this.orderInfo = item
			this.rsType = item.status==1? 1 : 2
			this.step = 3
		},
		init: function() {
			if(!this.deviceNum){
				return
			}
			this.devinfoAdvList()
			if(!this.socketUrl){
				this.socketUrl = this.path + this.deviceNum + "_T"
			}
			if (typeof(WebSocket) === "undefined") {
				alert("您的浏览器不支持socket")
			} else {
				// 实例化socket
				this.socket = new WebSocket(this.socketUrl)
				// 监听socket连接
				this.socket.onopen = this.open
				// 监听socket错误信息
				this.socket.onerror = this.error
				// 监听socket消息
				this.socket.onmessage = this.getMessage
				this.socket.onclose = this.close
				this.step = 1
			}
		},
		open: function() {
			console.log("socket连接成功")
			this.heartbit()
		},
		error: function() {
			this.$dialog.confirm({
				title: '',
				message: '连接服务器失败',
				confirmButtonText: "重试"
			})
			.then(()=>{
				this.init()
			})
			console.log("连接错误")
		},
		getMessage: function(msg) {
			console.log(msg.data)
			this.mess.push(msg.data); //返回数据信息，包含医保瞳
			var msgobj = JSON.parse(msg.data)
			if (msgobj.type == 'ShipInfo') {
				var item = this.orderdetail[this.currindex]
				if (msgobj.mess == ( item.layerNo +";"+ item.wayerNo) ) {
					this.updateOrderOutStatus(item.id, 2, msgobj.mess)
					this.currindex++;
					if (this.orderdetail.length > this.currindex) {
						this.$loading(`正在出第${this.currindex+1}个药..`)
						this.nextShipment(this.orderdetail[this.currindex]);
					} else {
						this.$toast.clear()
						setTimeout(()=>{
							this.shipComplete()
						}, 200)
					}
				} else {
					this.updateOrderOutStatus(item.id, 3, msgobj.mess)
					this.shipComplete(msgobj.mess)
				}
			} else if (msgobj.type == 'BarCodeInfo') {
				if (msgobj.mess.indexOf("异常") != -1) {
					this.$toast(msgobj.mess)
					console.log(msgobj.mess)
					return
				}
				if(this.inCheckBarcode || this.step!=2){
					return
				}
				this.checkOrderAndReturn({pickUpNum: msgobj.mess})
			} else if(msgobj.type == 'CardInfo'){
				if (msgobj.mess.indexOf("异常") != -1) {
					this.$toast(msgobj.mess)
					return
				}
				var arr = msgobj.mess.split("\n");
				var json = {}
				arr.forEach(v => {
					var tmp = v.split("：")
					json[tmp[0]] = tmp[1]
				});
				this.checkOrderAndReturn({cardNum: json['卡号']})
			} else if(msgobj.type == 'PrintComplete'){
				this.$dialog.alert({
					title: '',
					message: '打印完成',
					confirmButtonText: "返回首页"
				}).then(() => {
					this.onPrev()
				});
			}
		},
		sendReadCard: function() {
			this.$loading('加载中..')
			var obj = {
				type: "ReadCard",
				mess: ""
			}
			this.socket.send(JSON.stringify(obj));
		},
		sendShipment: function() {
			this.currindex = 0;
			this.$loading(`正在出第${this.currindex+1}个药..`)
			//循环订单返回的列表，读取第一个
			if (this.orderdetail.length > this.currindex) {
				this.nextShipment(this.orderdetail[this.currindex]);
			} else {
				this.shipComplete()
			}
		},
		nextShipment: function(row) {
			//检查刷新是否已经完成数据，没有完成继续，这个设计是为了防断网
			var obj = {
				type: "Shipment",
				mess: "{detailid:'" + row.id + "'}", //整串返回
				layerNo: row.layerNo,
				wayerNo: row.wayerNo
			}
			this.socket.send(JSON.stringify(obj));
		},
		send: function() {
			var obj = {
				type: "读取设备功能列表",
				mess: "",
				layerNo: this.layerNo,
				wayerNo: this.wayerNo,
			}
			this.socket.send(JSON.stringify(obj));
		},
		send2: function() {
			var obj = {
				type: "读取设备功能列表",
				mess: ""
			}
			this.socket.send(JSON.stringify(obj));
		},
		close: function() {
			console.log("socket已经关闭")
			if(!this.forceClose){
				console.log("socket已经关闭")
				this.init()
			}

		},
		heartbit(){
			this.heartbitInterval = setInterval(()=>{
				var obj = {
					type: "heart",
					mess: "",
				}
				this.socket.send(JSON.stringify(obj));
			}, 60 * 1000)
		},
		sendDeviceInfo: function() {
			var obj = {
				type: "ReadDevice",
				mess: ""
			}
			this.socket.send(JSON.stringify(obj));
		},
		SetPrintPage: function() {
			// string type; //text 文本 |line 间隔行|barcode 条码|qrcode 二维码|reset 重置打印机 |nline 走纸【进行【
			// string text;  //文本内容
			// int nLan;//文本编码类型0:GBK   1:UTF-8
			// int nOrgx;//打印的文本位置，各值定义如下：-1 左对齐 -2 居中对齐 -3 右对齐 >=0   在第n点位置开始打印
			// int nWidthTimes;//字符宽度放大的倍数，范围[0,7]
			// int nHeightTimes;// 字符高度放大的倍数，范围[0,7]
			// int FontType;//打印的字体类型，各值定义如下：度值  定义 0:  12*24  1:  9*17
			// int nFontStyle;// 打印的字体类型，各值定义如下：需要合并的把两个值相加得到整数回传 值  定义0x00  正常0x08  加粗0x80    1点下划线0x100   2点下划线0x200 倒置打印 0x400 反显、黑底白字0x1000 每个字符顺时针旋转 90 
			// int nBarcodeType;//打印的条码类型，各值定义如下：值   类型 0x41     UPC-A  0x42     UPC-E 0x43     EAN13  0x44     EAN80x45     CODE39 0x46     ITF0x47     CODABAR0x48     CODE93
			// int  nUnitWidth;// 打印的条码宽度，值范围[1,6]
			// int  nUnitHeight;//打印的条码高度，值范围[1,255]
			// int  FontPosition;//可读字符（HRI）的打印位置，各值定义如下：值    定义 0     不打印1     条码上方2     条码下方 3   条码上方和下方
			// int nWidth;// 二维码的宽度,取值范围[1,6}二维码单元宽度越大,QR码越大。
			// int nVersion;// 二维码的规格,取值范围[0,16],0表示自动计算版本。 二维码码版本越大，能编码的字符就越多，QR码也越大。
			// int nErrlevenl;//二维码纠错等级,取值[1,4]

			var printcon =[
				{type:"reset"},
				{type:"nline"},
				{type:"text", text:"智能药房\n小票凭据\n",nLan:0,nOrgx:-2,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0},
				{type:"text", text:"--------------------------------\n",nLan:0,nOrgx:-2,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0},
			];
			var allPrice = 0, allcount = 0
			var obj = _.groupBy(this.orderdetail.concat([]), 'drugCode')
			var list = []
			for(var k in obj){
				var tem = obj[k]
				tem[0].quantity = tem.length
				list.push(tem[0])
				tem.forEach(v=>{
					allPrice += v.price
					allcount += 1
				})
			}
			list.forEach(v=>{
				printcon.push({
					type:"text", text: (v.drugName)+"\n",nLan:0,nOrgx:-1,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0
				})
				printcon.push({
					type:"text", text: `单价：${v.price}元  数量：${v.quantity}\n药品编码：${v.drugCode}\n规格：${v.specif}\n剂型：${v.dosForm||''}\n`,nLan:0,nOrgx:-1,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0
				})
				printcon.push({type:"line"})
			})
			var {date, phone, num, remark, time, community, qrCodeContent} = this.orderInfo
			printcon.push({
				type:"text", text: `药品总价：${(allPrice).toFixed(2)}元\n药品数量：${allcount}\n订单金额：${allPrice.toFixed(2)}元\n`,nLan:0,nOrgx:-1,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0
			})
			printcon.push({type:"text", text:"--------------------------------\n",nLan:0,nOrgx:-2,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0})
			printcon.push({
				type:"text", text: `商家名称：${community}\n客服电话：${phone}\n药柜编码：${this.deviceNum}\n销售单号：${num}\n取药日期：${date}\n取药时间：${time}\n`,nLan:0,nOrgx:-1,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0
			})
			
			printcon.push({type:"text", text:"--------------------------------\n",nLan:0,nOrgx:-2,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0})
			if(remark){
				printcon.push({
					type:"text", text: `备注：${remark}\n`,nLan:0,nOrgx:-1,nWidthTimes:0,nHeightTimes:0,FontType:0,nFontStyle:0
				})
			}
			if(qrCodeContent){
				printcon.push({type:"qrcode",text:"qrCodeContent",nWidth:6,nVersion:0,nErrlevenl:4})
			}
			
			printcon.push({type:"nline"})
			printcon.push({type:"nline"})
			printcon.push({type:"nline"})
			printcon.push({type:"nline"})
			printcon.push({type:"nline"})

			var obj = {
				type: "PrintPage",
				mess: JSON.stringify(printcon),
			}
			this.socket.send(JSON.stringify(obj));
		},
		updateOrderOutStatus(shipmentLogId, status, msg){
			var p = {
				shipmentLogId,
				status,
				msg: msg || ''
			}
			console.log('updateOrderOutStatus', p)
			medicineAbinetApi
				.updateOrderOutStatus(p)
				.then(res=>{
					console.log('updateOrderOutStatus', res)
				})
				.catch(err=>{
					console.error(err)
				})
		},
		shipComplete(msg){
			this.$toast.clear()
			if(msg){
				this.$dialog.alert({
					title: '',
					message: '出药异常中断，请联系管理员',
					confirmButtonText: "返回首页"
				}).then(() => {
					this.step = 1
				});
				return
			}
			this.rsType = 4
		},
		countDown(){
			return
			this.times = 30
			countDownFunc = setInterval(()=>{
				if(this.times === 0){
					clearInterval(countDownFunc)
					this.onPrev()
				}
				this.times--
			}, 1000)
		}
    },
	destroyed() {
		this.forceClose = true
		clearInterval(this.heartbitInterval)
	}
}
</script>
<style lang="scss" scoped>
.machine-index {
	width: 100vw;
	height: 100vh;
	background: url('./img/bg_img.png') no-repeat;
	background-size: 100% ;
	.step-1{
		.title-banner{
			padding-top: calc(93px / 6);
			img{
				display: block;
				margin: 0 auto;
				width: 230px;
			}
		}

		.video-swipe{
			width: 333px;
			height: 188px;
			margin: calc(90px / 6) auto 0;
			overflow: hidden;
			border-radius: 7px;
			// background-color: #000000;
			video{
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.img-swipe{
			width: 333px;
			height: 112px;
			margin: calc(83px / 6) auto 0;
			overflow: hidden;
			border-radius: 7px;
			background-color: #000000;
			img{
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.banner-list{
			width: 333px;
			-webkit-box-align: center;
			margin: calc(94px / 6) auto 0;
			.arrow{
				-webkit-box-flex: 1;
				img{
					display: block;
					width: calc(154px / 6);
					margin: 0 auto;
				}
			}
			.item{
				width: calc(901px / 6);
				img{
					width: 100%;
					height: calc(350px / 6);
					display: block;
					&:last-child{
						margin-top: calc(60px / 6);
					}
				}
			}
		}

		.footer{
			img{
				display: block;
				width: calc(350px / 6);
				margin: calc(100px / 6) auto 0;
			}
			// position: absolute;
			// bottom: calc(466px / 6);
			// left: 50%;
			// transform: translateX(-50%);
		}

		.illustration-mask{
			position: fixed;
			width: 100vw;
			height: 100vh;
			left: 0;
			top: 0;
			background: rgba($color: #000000, $alpha: .5);
			.illustration-inner{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				background: #000000;
				border-radius: calc(20px / 6);
				.pic{
					display: block;
					width: calc(2000px / 6);
					img{
						
					}
				}
				
				.close{
					position: absolute;
					bottom: calc(-300px / 6);
					left: 50%;
					transform: translateX(-50%);
					img{
						display: block;
						width: calc(209px / 6);
					}
				}
			}
			
		}
	}

	.van-swipe{
		height: 100%;
		.swipe-item-img{
			width: 100%;
			height: 100%;
			display: block;
		}
		.swipe-item-video{
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.back-btn{
		z-index: 2;
		position: fixed;
		top: calc(200px / 6);
		left: calc(127px / 6);
		img{
			width: calc(100px / 6);
			vertical-align: middle;
			display: inline-block;
		}
		span{
			vertical-align: middle;
			color: #fff;
			margin-left: calc(40px / 6);
			font-size: calc(80px / 6);
		}
	}
}
</style>