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

<template>
  <div class="maxScreen">
    <!-- <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(1)" type="primary">启动</van-button>
      </div>
    </div> -->
    <div class="step-1">
      <div class="title-banner ">
        <img src="./img/maxTitle1.png" alt="" />
        <img src="./img/i-maxzizhu.png" alt="" />
      </div>
      <div class="wrapper">
        <div class="item" @click="indexFuncClick({ contentType: 1, nextContentType: 13 })">
          <img src="./img/zzqy.png" />
        </div>
        <div class="item" @click="indexFuncClick({ contentType: 1, nextContentType: 4 })">
          <img src="./img/mzjs.png" />
        </div>
        <div class="item" @click="indexFuncClick({ contentType: 1, nextContentType: 20 })">
          <img src="./img/ycz.png" />
        </div>
      </div>
      <van-swipe class="swipe">
        <van-swipe-item v-for="(item, index) in videoList" :key="index" @click="gotoDetail(item)">
          <template v-if="item.categoryCode == 1">
            <video class="swipe-item-video" loop autoplay muted :src="setImgUrl(item.url)"></video>
          </template>
          <template v-else>
            <img :src="setImgUrl(item.url)" />
          </template>
        </van-swipe-item>
      </van-swipe>
      <div class="activeWrapper" @click="toSmallScreen">
        <div class="left">
          <img src="./img/ax.png" style="width: 15px;height: 15px;object-fit: cover;margin-right: 5px;" />
          <div style="font-weight: bold;font-size: 11px;color: #3D92E0;">
            医院动态 |
          </div>
        </div>
        <div class="right" v-if="ggList.length">{{ ggContent }}</div>
        <div class="right" v-else>暂无数据</div>
      </div>
      <div class="footer">
        <div class="qrcodeTest">
          <div @click="playTest" class="qrcode ">
            <img src="./img/igongzhonghao.png" alt="" />
          </div>
          <div class="text">
            <div>微信【扫一扫】</div>
            <div>关注厦门i健康公众号</div>
          </div>
        </div>
        <div class="qrcodeTest">
          <div class="qrcode ">
            <img src="./img/iapp.png" alt="" />
          </div>
          <div class="text">
            <div>微信【扫一扫】</div>
            <div>下载厦门i健康</div>
          </div>
        </div>
        <div class="qrcodeTest">
          <div class="qrcode ">
            <img src="./img/weixin.png" alt="" />
          </div>
          <div class="text">
            <div>微信【扫一扫】</div>
            <div>打开儿童医保码</div>
          </div>
        </div>
        <div class="qrcodeTest">
          <div class="qrcode ">
            <img src="./img/zhifubao.png" alt="" />
          </div>
          <div class="text">
            <div>支付宝【扫一扫】</div>
            <div>打开儿童医保码</div>
          </div>
        </div>
      </div>
      <div class="lck">
        <div @click="show(2)">取药说明</div>
        <div style="width: 1px;height: 16px;background: #3D92E0;"></div>
        <div @click="show(1)">处方续方说明</div>
        <div style="width: 1px;height: 16px;background: #3D92E0;"></div>
        <div @click="show(3)">门诊结算说明</div>
      </div>
      <div style="text-align: center;margin-top: 9px;">
        <div style="font-weight: 500;font-size: 12px;color: #FFFFFF;white-space: nowrap; transform: scale(0.66);">
          主办方：厦门市思明区人民政府鼓浪屿街道办事处 | 厦门市鼓浪屿医院
        </div>
        <div><img src="./img/logomax.png" alt="" style="height: 13px;width: 162px;" /></div>
      </div>
    </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="" />
        <img v-show="curImg == 3" class="pic" src="./img/z-menzhenjiesuanliuc.png" alt="" />
        <div class="close">
          <span>{{ times }}s</span>
          <img @click="close1()" src="./img/z-guanbi.png" alt="" />
        </div>
      </div>
    </div>
    <div v-if="step==4">
			<Instro @onClose="step=1"/>
		</div>

		<Recharge  ref="Recharge" :orgCode="orgCode" :deviceNum="deviceNum"  
			:cardSn="cardSn" :cardNo="cardNo" :idcard="idcard" :userName="userName"  
			@onClose="isShow=true" @onShow="isShow=false"/>
		<DrugTaking ref="DrugTaking" :orgCode="orgCode" :deviceNum="deviceNum" @startSendShipment="startSendShipment" 
			:cardSn="cardSn" :cardNo="cardNo" :idcard="idcard" :userName="userName"
			@onClose="isShow=true" @onShow="isShow=false" @printSettle="printSettle"/>
		<TipsDialog ref="TipsDialog" @onPickCompleteClose="$refs.DrugTaking&&$refs.DrugTaking.onClose()" @readcard="readcard" @SetPrintPage="SetPrintPage"/>

		<audio id='audioPlay' src='' hidden='true'/>
  </div>
</template>
<script>
import { playAudio } from '@/views/machine/utils/audioPlay.js'
import Illustration from './components/Illustration.vue'
import Instro from './components/Instro.vue'
import Recharge from './components/Recharge.vue'
import DrugTaking from './components/DrugTaking.vue'
import TipsDialog from './components/TipsDialog.vue'
import medicineAbinetApi from '@/api/api-medicineAbinet'
import socketUtils from './utils/socket'
import ybUtils from './utils/ybUtils'
import ybApi from '@/api/api-yb'
var countDownFunc,
  timeoutInterval,
  readCardCountDown,
  test = 0,
  closeThread,
  TIMES = 60
export default {
  name: 'machineIndex',
  components: {
    DrugTaking,
    TipsDialog,
    Recharge,
    Instro,
    Illustration
  },
  data() {
    return {
      funcMgn: {
        jiesuan: true,
        quyao: true,
        yujiaojin: true
      },
      timer: null,
      curImg: '',
      isErr: 2, //1设备维护  2正常使用
      deviceNum: this.$route.query.deviceNum, //|| '14912202107000001500000000000000',//14912202107000001500000000000000    14912202111000001000000000000000
      step: 0, //0启动页  1首页  2扫码页  3订单页
      times: TIMES,
      curImg: '',
      illustrationMskShow: false,
      socketUrl: '',
      socket: '',
      layerNo: '0',
      ggContent: '',
      currentIndex: 0, // 当前项的索引
      ggList: [],
      wayerNo: '0',
      forceClose: false,
      heartbitInterval: '',
      currindex: 0,
      orderdetail: [],
      rsType: 0, // 1:订单信息 2订单错误  3订单成功  4出药完成  5订单列表
      imgList: [],
      videoList: [],
      inCheckBarcode: false,
      orderInfo: '',
      orderList: [],
      times: 30,
      shippingType: '', //取药方式（1、扫码，2、医保卡）
      inOut: false,
      eventName: '',
      showPrintComplete: false,
      nextOrderDetail: '',
      oldCardNo: '',
      reconnect: false,
      orgCode: '',
      isTest: false,

      cardSn: '',
      cardNo: '',
      idcard: '',
      userName: '',
      isShow: true,
      humidity: '',
      temperature: '',
      prevReadCard: false,
      printType: ''
    }
  },
  watch: {
    step(n) {
      if (n == 2) {
        this.clearCountDown()
        this.countDown()
      } else if (n != 3) {
        this.rsType = 0
        this.oldCardNo = ''
      }
    },
    rsType(n) {
      this.clearCountDown()
      if (n != 4 && this.step == 3) {
        this.countDown()
      }
    }
  },
  created() {
    //由于开太久会导致程序崩溃， 设定每天凌晨3点重载页面
    setInterval(() => {
      var d = new Date()
      if (d.getHours() == 3) {
        this.systemUpdate()
      }
    }, 30 * 60 * 1000)
    window.vm2 = this
    this.init()
    window.socketUtils = socketUtils
  },
  methods: {
    gotoDetail(item) {
      if (item.linkUrl) {
        window.location.href = item.linkUrl
      } else if (item.content) {
        var obj = {
          title: item.title,
          url: item.url,
          content: item.content
        }
        this.$router.push({ path: '/machine/detail', query: { item: JSON.stringify(obj) } })
      }
    },
    show(type) {
      this.curImg = type
      this.illustrationMskShow = true
      closeThread = setInterval(() => {
        this.times--
        if (this.times == 0) {
          this.close1()
        }
      }, 1000)
    },
    close1() {
      this.illustrationMskShow = false
      this.times = TIMES
      if (closeThread) {
        clearInterval(closeThread)
      }
    },
    indexFuncClick(data) {
      var { jiesuan, quyao, yujiaojin } = this.funcMgn
      if (data.nextContentType == 13) {
        if (quyao === true) {
          this.onPrevReadCard(data)
        } else {
          this.$toast(quyao || '该功能暂未开放')
        }
      } else if (data.nextContentType == 4) {
        if (jiesuan === true) {
          this.onPrevReadCard(data)
        } else {
          this.$toast(jiesuan || '该功能暂未开放')
        }
      } else if (data.nextContentType == 20) {
        if (yujiaojin === true) {
          this.onPrevReadCard(data)
        } else {
          this.$toast(yujiaojin || '该功能暂未开放')
        }
      }
    },
    loopCharge(v, item, j) {
      return new Promise((resolve, reject) => {
        item.sort = j
        setTimeout(() => {
          resolve()
        }, 1000)
      })
    },
    async playTest() {
      return
      var list = [
        { needCharge: true, chargeList: [{}, {}] },
        { needCharge: true, chargeList: [{}, {}] }
      ]
      var isErr = false
      for (var i = 0; i < list.length; i++) {
        var v = list[i]
        if (v.needCharge) {
          for (var j = 0; j < v.chargeList.length; j++) {
            var res = await this.loopCharge(v, v.chargeList[j], i + j).catch(err => {
              isErr = err
              // api.saveCheckHttpLog.call(this, (err&&err.message) || err, 'chargeByYb', reqParams, _.map(list, v=>{return v.RECIPE_NO}).join(","))
              reject(err)
            })
            console.log(i + ',' + j)
            if (isErr || res) {
              console.log(isErr || res)
              return reject(isErr || res)
            }
          }
        }
      }
      console.log(list)

      return
      this.showTipsDialog({
        contentType: 1,
        payUrl: 'aaa',
        nextContentType: 20
      })
      return
      playAudio(test)
      test++
    },
    SetPrintPageTest() {
      socketUtils.SetPrintPageTest()
    },
    printSettle(obj) {
      this.printType = 2
      // socketUtils.getMessage({
      // 	data: JSON.stringify({
      // 		type: 'PrintComplete',
      // 		mess: '',
      // 	})
      // })
      socketUtils.send(obj)
    },
    clearCountDown() {
      if (countDownFunc) {
        clearInterval(countDownFunc)
      }
    },
    onPrevReadCard(params) {
      playAudio(16)
      this.prevReadCard = params
      readCardCountDown = setTimeout(() => {
        this.$toast.clear()
        this.clearReadCardCountDown()
        if (this.prevReadCard) {
          this.showTipsDialog(this.prevReadCard)
          this.prevReadCard = false
        }
      }, 30000)
      this.$loading(' ')
      this.readcard()
    },
    startSendShipment: function(data) {
      var item = data.item
      if (item.status == -99) {
        this.showTipsDialog({
          contentType: 3,
          message: '该订单已被锁定，请联系药房处理'
        })
        return
      }
      playAudio(2)
      socketUtils.sendShipment(item, data.shippingType)
    },
    showTipsDialog(item) {
      this.$EventBus.$emit('MachineTipsDialog', item)
    },
    readcard(data) {
      if (data == 1) {
        //医保凭证
        var TipsDialog = this.$refs.TipsDialog
        // this.$refs.DrugTaking.toolReadcardMsg({}, TipsDialog.nextContentType)
        // return
        // if(TipsDialog.nextContentType == 20){
        // 	this.$refs.Recharge.show({
        // 		contentType: 1
        // 	})
        // } else {
        // 	this.$refs.DrugTaking.toolReadcardMsg({}, TipsDialog.nextContentType)
        // }
        // return
        ybUtils
          .readCardInfo(
            {
              equ_num: this.deviceNum,
              orgCode: this.orgCode,
              mdtrt_cert_type: '01' //凭证类型01扫医保凭证  02身份证  03医保卡
            },
            this.deviceNum
          )
          .then(res => {
            var CardInfo = res
            res = res.output ? res.output.baseinfo : res.data.output.baseinfo
            this.cardSn = ''
            this.cardNo = res.cardno
            this.idcard = res.certno
            this.userName = res.psn_name

            this.$nextTick(() => {
              if (TipsDialog.nextContentType == 20) {
                this.$refs.Recharge.show({
                  contentType: 1
                })
              } else {
                this.$refs.DrugTaking.toolReadcardMsg({}, TipsDialog.nextContentType, '', CardInfo, '01')
              }
            })
          })
          .catch(err => {
            console.error(err)
            this.showTipsDialog({
              contentType: 3,
              message: (err && err.message) || err
            })
            playAudio(15)
          })
        return
      }
      if (data == 12) {
        // 临时卡
        socketUtils.sendReadCard('ReadTempCard')
        return
      }
      if (data) {
        var TipsDialog = this.$refs.TipsDialog
        this.$refs.DrugTaking.toolReadcardMsg({}, TipsDialog.nextContentType, data)
        return
      }
      socketUtils.sendReadCard()
    },
    init() {
      if (!this.deviceNum) {
        return
      }
      this.findById()
      this.devinfoAdvList(1)
      this.devinfoAdvList(2)

      socketUtils.$on('inited', () => {
        this.step = 1
        console.log('inited')
      })
      socketUtils.$on('onMessage', msg => {
        if (msg.type == 'CardInfo') {
          var TipsDialog = this.prevReadCard ? this.prevReadCard : this.$refs.TipsDialog
          if (this.prevReadCard || TipsDialog.contentType == 2) {
            if (
              this.prevReadCard &&
              (msg.mess.indexOf('IC卡没有插入') != -1 || msg.mess.indexOf('未插卡') != -1 || msg.mess.indexOf('读取临时卡信息失败') != -1 || msg.mess.indexOf('读取信息失败') != -1)
            ) {
              if (msg.mess.indexOf('读取临时卡信息失败') != -1) {
                //已经读取医保卡和临时卡 并都未读取到卡信息
                this.clearReadCardCountDown()
                this.$toast.clear()
                this.showTipsDialog(this.prevReadCard)
                this.prevReadCard = false
              } else {
                //读取不到医保卡  继续读取临时卡
                this.readcard(12)
              }
              return
            }
            this.clearReadCardCountDown()
            this.$toast.clear()
            this.prevReadCard = false
            if (
              msg.mess.indexOf('异常') != -1 ||
              msg.mess.indexOf('读取信息失败') != -1 ||
              msg.mess.indexOf('读取识别码失败') != -1 ||
              msg.mess.indexOf('读取临时卡信息失败') != -1
            ) {
              playAudio(3)
              this.showTipsDialog({
                contentType: 3,
                message: msg.mess
              })
              return
            }
            //等待读卡的时候 才处理
            var arr = msg.mess.split('\n')
            var json = {}
            arr.forEach(v => {
              var tmp = v.split('：')
              json[tmp[0]] = tmp[1]
            })
            this.cardSn = json['卡识别码']
            this.cardNo = json['卡号']
            this.idcard = json['身份证号']
            this.userName = json['姓名']
            this.$nextTick(() => {
              if (TipsDialog.nextContentType == 20) {
                this.$refs.Recharge.show({
                  contentType: 1
                })
              } else {
                this.$loading(' ')
                this.$refs.TipsDialog.nextContentType = TipsDialog.nextContentType
                this.$refs.DrugTaking.toolReadcardMsg(msg, TipsDialog.nextContentType)
              }
            })
          } else {
            this.clearReadCardCountDown()
            this.$toast.clear()
          }
        } else if (msg.type == 'medical_recharge') {
          // message:"{\"result\":\"succ\",\"resultName\":\"支付成功交易成功\"}"
          var TipsDialog = this.$refs.TipsDialog
          if (!TipsDialog || TipsDialog.contentType != 7) {
            return
          }
          var mess = JSON.parse(msg.mess)
          if (mess.payUrl == TipsDialog.payUrl) {
            if (mess.result == 'succ') {
              this.showTipsDialog({
                contentType: 16
              })
              this.$EventBus.$emit('RechargeEvent', { type: 'onPayed' })
            } else {
              this.showTipsDialog({
                contentType: 3,
                message: mess.resultName
              })
            }
          }
        } else if (msg.type == 'PrintComplete') {
          if (this.printType == 1) {
            this.showTipsDialog({
              contentType: 3,
              message: '您的医嘱已打印，请注意取走医嘱',
              isPickComplete: true
            })
          } else {
            this.showTipsDialog({
              contentType: 8,
              isHis: this.$refs.DrugTaking && this.$refs.DrugTaking.isHis
            })
          }
        } else if (msg.type == 'humidity_temperature') {
          var mess = JSON.parse(msg.mess)
          this.humidity = mess.now_humidity
          this.temperature = mess.now_temperature
        }
      })
      socketUtils.$on('checkNextEvent', msg => {
        this.checkNextEvent(msg.type, msg)
      })

      socketUtils.init({
        deviceNum: this.deviceNum,
        isTest: this.isTest
      })
    },
    findById() {
      this.$loading('加载中..')
      let p = {
        equNum: this.deviceNum
      }
      medicineAbinetApi
        .findDeviceByIdNoLogin(p)
        .then(res => {
          console.log('findDeviceByIdNoLogin', res)
          this.$toast.clear()
          // this.isErr = res.obj.saleStatus==1? 2 : 1
          this.isErr = 2
          this.orgCode = res.obj.belongCommunity
          this.humidity = res.obj.nowHumidity
          this.temperature = res.obj.nowTemperature
          if (res.obj.modules) {
            try {
              this.funcMgn = JSON.parse(res.obj.modules)
            } catch (error) {
              console.error(error)
            }
          }

          // this.funcMgn = {
          // 	jiesuan: "111",
          // 	quyao: "dsfasd",
          // 	yujiaojin: "该功能暂未开放",
          // }
        })
        .catch(err => {
          console.error(err)
        })
    },

    onPrev() {
      this.nextOrderDetail = ''
      this.showPrintComplete = false
      if (this.step == 2) {
        this.step = 1
      } else {
        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
          }
        }
      }
    },
    updateAdvice(arr) {
      this.timer = setInterval(() => {
        this.ggContent = arr[this.currentIndex % arr.length].title
        this.currentIndex++
      }, 3000)
    },
    devinfoAdvList(type) {
      var p = {
        page: 1,
        size: 5,
        publishLocation: type
      }
      medicineAbinetApi
        .getByPublishLocation(p)
        .then(res => {
          console.log('devinfoAdvList', res)
          this.$toast.clear()
          if (res.status == 200) {
            if (type == 1) {
              this.videoList = res.detailModelList
            } else {
              if (res.detailModelList.length > 0) {
                this.ggList = res.detailModelList
                // 使用setInterval定时更新currentIndex
                this.updateAdvice(this.ggList)
              }
            }
            console.log(this.videoList, 'lkkkkkkkkkkkkkkkkkkkkkkkk')
          } else {
            this.$toast(res.message || '获取广告失败')
          }
        })
        .catch(err => {
          console.error(err)
        })
    },
    onComplete(data) {
      this.checkOrderAndReturn({ pickUpNum: data, cardNum: '' })
    },
    checkOrderAndReturn({ pickUpNum = '', cardNum = '', ehcCard = '' }) {
      this.$toast.clear()
      this.$loading('加载中..')
      this.shippingType = pickUpNum ? 1 : 2
      this.oldCardNo = cardNum || ''
      let p = {
        deviceId: this.deviceNum, //设备编号
        pickUpNum, //取药码
        cardNum, //社保卡号 //"DA7292254" ||
        ehcCard //电子社保卡
      }

      // p = {
      // 	deviceId: this.deviceNum, //设备编号
      // 	cardNum: '',
      // 	ehcCard: "2AA15E2786973077D40FF5DEFFB5E7B12D79E3BD50BE59F22559FF361667E22C:0:445D0CE646F8F9DFEF648D36910287B5:3502A0001GZHA0002"
      // }
      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) {
              var list = _.filter(res.obj.orderList, v => {
                return v.status === 0 || v.status == -5
              })
              if (list.length) {
                list.forEach(v => {
                  var allPrice = 0
                  if (v.status == -5) {
                    v.status = -99
                  }
                  v.drugList.forEach(d => {
                    allPrice += d.price * ((d.quantity && Number(d.quantity)) || 1)
                  })
                  v.price = allPrice.toFixed(2)
                })
                this.orderList = list || []
                if (list.length == 1) {
                  this.showOrderDetail(list[0])
                } else {
                  this.rsType = 5
                  this.step = 3
                }
                this.inCheckBarcode = false
                return
              }
            }
            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.orderStatus == 1 ? 1 : 2
      this.step = 3
    },

    updateOrderOutStatus(shipmentLogId, status, msg) {
      return new Promise((resolve, reject) => {
        var p = {
          shipmentLogId: shipmentLogId || '',
          status: status || '',
          msg: msg || '',
          shippingType: this.shippingType //取药方式（1、扫码，2、医保卡）
        }
        console.log('updateOrderOutStatus', p)
        medicineAbinetApi
          .updateOrderOutStatus(p)
          .then(res => {
            console.log('updateOrderOutStatus', res)
            if (res.status == 200) {
              resolve()
              return
            }
            reject()
          })
          .catch(err => {
            console.error(err)
            reject()
          })
      })
    },
    shipComplete(msg) {
      if (!this.inOut) {
        //已出药完成
        return
      }
      this.inOut = false
      this.clearTimeoutInterval()
      this.$toast.clear()
      this.orderList.splice(this.orderList.indexOf(this.orderInfo), 1)
      if (msg) {
        this.$dialog
          .alert({
            title: '',
            message: msg,
            confirmButtonText: '返回首页'
          })
          .then(() => {
            this.step = 1
            if (this.eventName) {
              var eventName = this.eventName
              this.eventName = ''
              this.checkNextEvent(eventName)
              return
            }
          })
        return
      }
      this.rsType = 4
      if (this.eventName) {
        var eventName = this.eventName
        this.eventName = ''
        this.checkNextEvent(eventName)
        return
      }
    },
    countDown() {
      this.times = 30
      countDownFunc = setInterval(() => {
        if (this.times === 0) {
          this.clearCountDown()
          this.onPrev()
        }
        this.times--
      }, 1000)
    },
    clearTimeoutInterval() {
      clearTimeout(timeoutInterval)
    },
    clearReadCardCountDown() {
      if (readCardCountDown) {
        clearTimeout(readCardCountDown)
        readCardCountDown = undefined
      }
    },
    resetTimeoutInterval() {
      this.clearTimeoutInterval()
      timeoutInterval = setTimeout(() => {
        var msg = '出药超时，请联系管理员'
        var item = this.orderdetail[this.currindex]
        this.shipComplete(msg)
        this.updateOrderOutStatus(item.id, 3, msg).catch(err => {
          console.error(err)
        })
      }, 30 * 1000)
    },
    videoSwipeChange(i) {
      var video = this.$refs.videoSwipe.$el.getElementsByTagName('video')[i]
      video && video.play()
      return
      var videoList = this.$refs.videoSwipe.$el.getElementsByTagName('video')
      if (videoList.length > 1) {
        i++
        if (i >= videoList.length) {
          i = 0
        }
        videoList[i].play()
      }
    },
    playEnded(event, i) {
      if (this.videoList.length == 1) {
        return
      }
      this.$refs.videoSwipe.next()
    },
    systemUpdate() {
      this.$loading('系统将进行更新，请勿操作')
      setTimeout(() => {
        location.reload(true)
      }, 3000)
    },
    checkNextEvent(eventName, data) {
      if (eventName == 'equ_normal') {
        //设备上线
        if (this.inOut) {
          this.eventName = eventName
          return
        }
        this.isErr = 2
      } else if (eventName == 'equ_maintenance') {
        //设备维护
        if (this.inOut) {
          this.eventName = eventName
          return
        }
        this.isErr = 1
      } else if (eventName == 'systemUpdate') {
        //系统更新
        if (this.inOut) {
          this.eventName = eventName
          return
        }
        this.systemUpdate()
      } else if (eventName == 'openDebug') {
        if (!window.vConsole) {
          window.vConsole = new VConsole()
        }
      } else if (eventName == 'closeDebug') {
        if (window.vConsole) {
          window.vConsole.destroy()
          window.vConsole = ''
        }
      } else if (eventName == 'exeUpdate') {
        jsApp.update()
      } else if (eventName == 'indexFuncManage') {
        if (data.mess) {
          this.funcMgn = _.assign(this.funcMgn, JSON.parse(data.mess))
        }
      }
    },
    checkCardNo(item) {
      if (this.oldCardNo) {
        this.nextOrderDetail = item
        this.sendReadCard()
      } else {
        this.showOrderDetail(item)
      }
    },

    SetPrintPage() {
      this.printType = 1
      socketUtils.SetPrintPage()
    },

    onloadeddata(e) {},
    onerror() {},
    onstalled(e) {},
    onsuspend(e) {},
    onemptied(e) {},
    onended(e) {},

    open: function() {
      if (this.reconnect === 1) {
        this.$toast('服务器重连成功')
        this.reconnect = false
      }
      console.log('socket连接成功')
      this.heartbit()
    },
    error: function() {
      console.log('连接错误')
      this.reconnectTimeout()
      return
      // this.socket.close()
    },
    getMessage: function(msg) {
      console.log(msg.data)
      //有收到消息后 重置重连定时器时间
      // this.reconnectTimeout()

      var msgobj = JSON.parse(msg.data)
      if (msgobj.type == 'ShipInfo') {
        if (!this.inOut) {
          //有可能前端15秒已超时  但是后端还没超时  等了1分钟才返回数据
          return
        }
        var item = this.orderdetail[this.currindex]
        if (msgobj.mess == item.layerNo + ';' + item.wayerNo) {
          this.updateOrderOutStatus(item.id, 2, msgobj.mess)
            .then(res => {
              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)
              }
            })
            .catch(err => {
              console.error(err)
              this.shipComplete('更新订单状态失败：' + (err && err.message))
            })
        } else {
          this.updateOrderOutStatus(item.id, 3, msgobj.mess)
            .then(res => {
              this.shipComplete(`出药异常中断，请联系管理员（${msgobj.mess}）`)
            })
            .catch(err => {
              console.error(err)
              this.shipComplete('更新订单状态失败：' + (err && err.message))
            })
        }
      } 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.inCheckBarcode = true
        if (msgobj.mess && msgobj.mess.length > 20) {
          this.checkOrderAndReturn({ ehcCard: msgobj.mess })
        } else {
          this.checkOrderAndReturn({ pickUpNum: msgobj.mess })
        }
      } else if (msgobj.type == 'CardInfo') {
        if (!readCardCountDown) {
          return
        }
        this.clearReadCardCountDown()
        try {
          if (msgobj.mess.indexOf('异常') != -1 || msgobj.mess.indexOf('读取信息失败') != -1) {
            if (this.nextOrderDetail) {
              this.$toast({
                forbidClick: true, // 禁用背景点击
                message: msgobj.mess,
                onClose: () => {
                  this.onPrev()
                }
              })
            } else {
              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]
          })
          var cardNo = json['卡号']
          if (this.nextOrderDetail) {
            if (cardNo != this.oldCardNo) {
              this.$toast({
                forbidClick: true, // 禁用背景点击
                message: '医保卡信息不匹配，请重新操作',
                onClose: () => {
                  this.onPrev()
                }
              })
            } else {
              this.$toast.clear()
              var order = this.nextOrderDetail
              this.nextOrderDetail = ''
              this.showOrderDetail(order)
            }
            return
          }
          this.checkOrderAndReturn({ cardNum: cardNo })
        } catch (e) {
          console.error(e)
        }
      } else if (msgobj.type == 'PrintComplete') {
        this.showPrintComplete = true
        return
        this.$dialog
          .alert({
            title: '',
            message: '打印完成',
            confirmButtonText: '返回首页'
          })
          .then(() => {
            this.onPrev()
          })
      } else if (msgobj.type == 'heart') {
        if (this.heartbitTimeout) {
          clearTimeout(this.heartbitTimeout)
        }
      } else {
        this.checkNextEvent(msgobj.type)
      }

      // var obj = {
      // 	type: "自定义类型",
      // 	mess: "数据",
      // 	devid:"设备号"+"_T"
      // }
    },
    // sendReadCard: function() {
    // 	this.$loading('读取中..')
    // 	this.clearReadCardCountDown()
    // 	readCardCountDown = setTimeout(()=>{
    // 		if(this.nextOrderDetail){
    // 			this.$toast.loading({
    // 				duration: 0,
    // 				forbidClick: true, // 禁用背景点击
    // 				loadingType: 'loading',
    // 				message: "读取医保卡超时",
    // 				onClose: ()=>{
    // 					this.onPrev()
    // 				}
    // 			});
    // 		} else {
    // 			this.$toast('读取医保卡超时')
    // 		}
    // 	}, 20 * 1000)

    // 	var obj = {
    // 		type: "ReadCard",
    // 		mess: ""
    // 	}
    // 	this.send(obj);
    // },

    sendShipment: function() {
      this.clearCountDown()
      this.currindex = 0
      this.$loading(`正在出第${this.currindex + 1}个药..`)
      //循环订单返回的列表，读取第一个
      if (this.orderdetail.length > this.currindex) {
        this.inOut = true
        this.nextShipment(this.orderdetail[this.currindex])
      } else {
        this.shipComplete()
      }
    },
    nextShipment: function(row) {
      this.resetTimeoutInterval()
      //检查刷新是否已经完成数据，没有完成继续，这个设计是为了防断网
      var obj = {
        type: 'Shipment',
        mess: "{detailid:'" + row.id + "'}", //整串返回
        layerNo: row.layerNo,
        wayerNo: row.wayerNo
      }
      this.send(obj)
    },
    send: function(obj) {
      if (obj.type != 'heart') {
        //发送消息时  重置重连定时器时间
        // this.reconnectTimeout()
      }

      this.socket.send(JSON.stringify(obj))
    },
    send2: function() {
      var obj = {
        type: '读取设备功能列表',
        mess: ''
      }
      this.send(obj)
    },
    close: function() {
      console.log('socket已经关闭')
      this.reconnectTimeout()
      return
      this.clearHeartbit()
      if (!this.forceClose) {
        this.reconnect = true
        this.$loading('服务器异常断开,正在重连..')
        setTimeout(() => {
          this.init()
        }, 2000)
      }
      this.forceClose = false
    },
    reconnectTimeout() {
      if (this.reconnect === true) {
        return
      }
      this.clearHeartbit()
      if (!this.forceClose) {
        this.reconnect = true
        this.$loading('服务器异常断开,正在重连..')
        setTimeout(() => {
          this.init()
        }, 2000)
      }
      this.forceClose = false

      return
      if (this.reconnectInterval) {
        clearInterval(this.reconnectInterval)
      }
      this.reconnectInterval = setInterval(() => {
        if (this.socket) {
          this.forceClose = true
          this.socket.close()
        }
        setTimeout(() => {
          this.init()
        }, 200)
      }, 5 * 60 * 1000 + 5000)
    },
    clearHeartbit() {
      if (this.heartbitInterval) {
        clearInterval(this.heartbitInterval)
        this.heartbitInterval = undefined
      }
      if (this.heartbitTimeout) {
        clearInterval(this.heartbitTimeout)
        this.heartbitTimeout = undefined
      }
    },
    heartbit() {
      this.clearHeartbit()
      this.heartbitInterval = setInterval(() => {
        var obj = {
          type: 'heart',
          mess: ''
        }
        this.send(obj)

        //8s没接收到heart的回执  就重连
        // this.heartbitTimeout = setTimeout(()=>{
        // 	this.socket.close()
        // }, 8000)
      }, 30 * 1000)

      // this.reconnectTimeout()
    },
    sendDeviceInfo: function() {
      var obj = {
        type: 'ReadDevice',
        mess: ''
      }
      this.send(obj)
    },
    toSmallScreen() {
      this.$router.push('/machine/small?deviceNum=' + this.deviceNum)
    }
  },
  destroyed() {
    this.forceClose = true
    clearInterval(this.heartbitInterval)
    this.clearCountDown()
    clearInterval(this.timer)
  }
}
</script>
<style lang="scss" scoped>
.maxScreen {
  width: 100vw;
  height: 100vh;
  background: url('./img/maxBg.png') no-repeat;
  background-size: cover;
  .step-1 {
    .title-banner {
      padding-top: 33px;
      img {
        display: block;
        margin: 0 auto;
        &:first-child {
          width: 254px;
          height: 29px;
          margin-left: 63px;
        }
        &:nth-child(2) {
          width: 250px;
          height: 24px;
          margin-top: 10px;
          margin-left: 58px;
        }
      }
    }
    .banner-list {
      width: 333px;
      margin: calc(94px / 6) auto 0;
      -webkit-box-pack: justify;
      color: #fff;
      .banner-list-item-1 {
        background-image: url('./img/i-quyao.png');
        background-size: 100% 100%;
        width: 178px;
        height: 117px;
        font-size: 23px;
        line-height: 28px;
        font-weight: 700;
        padding-left: 102px;
        letter-spacing: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
      }
      .banner-list-item-2 {
        background-image: url('./img/i-jiesuan.png');
        background-size: 100% 100%;
        width: 144px;
        height: 53px;
        display: -webkit-box;
        -webkit-box-align: center;
        padding-left: 51px;
      }
      .banner-list-item-3 {
        background-image: url('./img/i-yujiao.png');
        background-size: 100% 100%;
        width: 144px;
        height: 53px;
        margin-top: 11px;
        display: -webkit-box;
        -webkit-box-align: center;
        padding-left: 51px;
      }
    }
    .wrapper {
      padding: 0 21px;
      display: flex;
      margin-top: 115px;
      justify-content: space-between;
      align-items: center;
      .item {
        width: 107px;
        height: 96px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .video-swipe {
      width: 333px;
      height: 101px;
      margin: calc(90px / 6) auto 0;
      overflow: hidden;
      border-radius: 7px;
      video {
        width: 100%;
        height: 100%;
        display: block;
      }
      .van-swipe-item {
        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2;
          opacity: 0;
        }
      }
    }

    .img-swipe {
      width: 333px;
      height: 101px;
      margin: calc(83px / 6) auto 0;
      overflow: hidden;
      border-radius: 7px;
      background-color: #000000;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .activeWrapper {
      display: flex;
      align-items: center;
      width: 333px;
      height: 25px;
      background: #d3e9f7;
      border-radius: 13px;
      margin: 10px auto 0;
      color: #3d92e0;
      .left {
        display: flex;
        align-items: center;
        padding: 0 8px;
      }
      .right {
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        font-size: 11px;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }
    .footer {
      margin-top: 25px;
      text-align: center;
      .qrcodeTest {
        display: inline-flex;
        width: 80px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        .text {
          white-space: nowrap;
          text-align: center;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          transform: scale(0.58);
        }
      }
      .qrcode {
        padding-top: 2px;
        img {
          width: 58px;
          height: 58px;
          display: block;
        }
      }
    }
    .lck {
      width: 316px;
      height: 34px;
      margin: 0 auto;
      background: url('./img/lck.png') no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      padding: 0 22px;
      font-weight: 600;
      font-size: 11px;
      color: #1c7cd5;
      justify-content: space-around;
    }
  }
  .illustration-mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.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: 333px;
        img {
        }
      }

      .close {
        position: absolute;
        right: 5px;
        top: 5px;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        span {
          color: #ff3153;
          font-size: 15px;
          font-weight: 600;
          vertical-align: middle;
          margin-right: 4px;
        }
      }
    }
  }
}

.swipe {
  width: 333px;
  height: 101px;
  margin: 10px auto 0;
  box-sizing: content-box;
  padding-bottom: 20px;
  img {
    width: 100%;
    height: 100%;
  }
  .van-swipe-item {
    height: 101px;
    overflow: hidden;
    img {
      border-radius: 4px;
    }
    .swipe-item-img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .swipe-item-video {
    width: 100%;
  }
}
::v-deep .van-swipe__indicators {
  bottom: 0px;
  .van-swipe__indicator {
    background: #fff;
    opacity: 1;
  }
  .van-swipe__indicator--active {
    background: #1c7cd5;
  }
}
</style>