chengwenliang
/
erp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							{Template header}
<body>
<style type="text/css">
#video {width:100%;height:calc(100% - 60px);margin:50px 0 10px 0;}#cz {
	padding:5px;
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
}#cz div {float:left;margin-right:20px;}
#startButton {
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    color: #fff;
    background-color: #2084db;
    float: left;
    margin-right: 16px;
    border-radius: 5px;
    display: block;
    cursor: pointer;
}
select{    width: 280px;
    height: 28px;
    color: #333;
    border: 1px #ccc solid;
    font-size: 13px;
    margin-right: 20px;
    border-radius: 5px;}
</style>
<div id="cz">
      <div id="sourceSelectPanel">
        <label for="sourceSelect">选择摄像头 </label>
        <select id="sourceSelect">
        </select>
      </div>
<div>
</div>
      <div  style="display:none">
        <select id="decoding-style" size="1">
          <option value="once">Decode once</option>
          <option value="continuously">Decode continuously</option>
        </select>
      </div>
<div id="startButton">开始识别</div><div id="result"></div>
<canvas style="display: none;"></canvas>
</div>
<video id="video"></video>
<audio id="music_d">
<source src="{$theme}music/d.mp3" type="audio/mpeg">
</audio>
<audio id="music_s">
<source src="{$theme}music/s.mp3" type="audio/mpeg">
</audio>
<audio id="music_c">
<source src="{$theme}music/c.mp3" type="audio/mpeg">
</audio>
  <script type="text/javascript" src="{$theme}js/zxing.js"></script>
  <script type="text/javascript">
    function decodeOnce(codeReader, selectedDeviceId) {
      codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
        console.log(result)
       // document.getElementById('result').textContent = result.text;
	   $("#music_s")[0].play();
	    $("#resetButton").click();
	  jt(result.text);
		// window.location.reload();
      }).catch((err) => {
        console.error(err)
        document.getElementById('result').textContent = err
      })
    }

    function decodeContinuously(codeReader, selectedDeviceId) {
      codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {
        if (result) {
          // 解码成功
          //console.log('Found QR code!', result)
          //document.getElementById('result').textContent = result.text;
        }

        if (err) {
          // As long as this error belongs into one of the following categories
          // the code reader is going to continue as excepted. Any other error
          // will stop the decoding loop.
          //
          // Excepted Exceptions:
          //
          //  - NotFoundException
          //  - ChecksumException
          //  - FormatException

          if (err instanceof ZXing.NotFoundException) {
            console.log('找不到二维码，请重试.')
          }

          if (err instanceof ZXing.ChecksumException) {
            console.log('无法识别二维码，请重试.')
          }

          if (err instanceof ZXing.FormatException) {
            console.log('无法识别二维码，请重试.')
          }
        }
      })
    }

    window.addEventListener('load', function () {
      let selectedDeviceId;
      const codeReader = new ZXing.BrowserQRCodeReader()
      console.log('ZXing code reader initialized')

      codeReader.getVideoInputDevices()
        .then((videoInputDevices) => {
          const sourceSelect = document.getElementById('sourceSelect')
          selectedDeviceId = videoInputDevices[0].deviceId
          if (videoInputDevices.length >= 1) {
            videoInputDevices.forEach((element) => {
              const sourceOption = document.createElement('option')
              sourceOption.text = element.label
              sourceOption.value = element.deviceId
              sourceSelect.appendChild(sourceOption)
            })

            sourceSelect.onchange = () => {
              selectedDeviceId = sourceSelect.value;
            };

            const sourceSelectPanel = document.getElementById('sourceSelectPanel')
            sourceSelectPanel.style.display = 'block'
          }

       $("#startButton").click(function() {

            const decodingStyle = document.getElementById('decoding-style').value;

            if (decodingStyle == "once") {
              decodeOnce(codeReader, selectedDeviceId);
            } else {
              decodeContinuously(codeReader, selectedDeviceId);
            }

            console.log(`Started decode from camera with id ${selectedDeviceId}`)
          })

         $("#resetButton").click(function() {
            codeReader.reset()
            document.getElementById('result').textContent = '';
            console.log('Reset.')
          })

        })
        .catch((err) => {
          console.error(err)
        })
    })

            var video = document.querySelectorAll('video')[0];
            var canvas = document.querySelectorAll('canvas')[0];
            var ctx = canvas.getContext('2d');
            var width = 960;
            var height = 720;
 
            canvas.width = width;
            canvas.height = height;
            video.src = 'movie.mp4?t=' + new Date().getTime();
            video.width = width;
            video.height = height;
            video.autoplay = true;
            video.loop = true;
              function jt(text) {
              ctx.drawImage(video, 0, 0, width, height);  // 将video中的数据绘制到canvas里
				var img = canvas.toDataURL('image/png');
	layx.load('loadId','操作中，请稍后');
	var fcdata = "number="+text+"&warehouse="+ $("select[name='warehouse']").children("option:selected").val()+"&img="+encodeURIComponent(img);
    $.ajax({
        url: "/qrcode/add/",
        data: fcdata,
        type: "POST",
        dataType: "json",
        success: function(a) {
			layx.destroy('loadId');
            if (a && a.success) {
				$("#music_d")[0].play();
		layx.html('nocontrol-style','图像','<img src="'+img+'" />',{
	  minWidth:962,
	  minHeight:722,
	  position:'cc',
	  isOverToMax:true,
	   shadable:0.5,
	  autodestroy:2000,
    control:false,
	storeStatus:false
});
layx.msg(a.msg,{dialogIcon:'success',position:'cc',stickable:true});
setTimeout(function(){
    $("#startButton").click();
}, 2000);
            } else {
				$("#resetButton").click();
				if(a.img)
				{
				layx.html('nocontrol-style','图像','<img src="'+a.img+'" />',{
	  minWidth:962,
	  minHeight:722,
	  position:'cc',
	  isOverToMax:true,
	   shadable:0.5,
    control:false,
	storeStatus:false
	});
	layx.confirm('默认提示','此单已经录入图像，是否替换？',null,{
			stickable:true,
    buttons:[
        {
            label:'替换',
            callback:function(id, button, event){
                thimg(fcdata,img);
                layx.destroy(id);
            }
        },
        {
            label:'取消',
            callback:function(id, button, event){
				$("#startButton").click();
				layx.destroy('nocontrol-style');
                layx.destroy(id);
            }
        }
    ]
});		 
				}
				else
				{
				$("#music_c")[0].play();
				layx.msg(a.msg,{dialogIcon:'error',position:'cc'});
				$("#startButton").click();
				}
            }
        }
    });
            };
			function thimg(fcdata,img){
				layx.destroy('nocontrol-style');
				 $.ajax({
        url: "/qrcode/edit/",
        data: fcdata,
        type: "POST",
        dataType: "json",
        success: function(a) {
			layx.destroy('loadId');
            if (a && a.success) {
				$("#music_d")[0].play();
		layx.html('nocontrol-style','图像','<img src="'+img+'" />',{
	  minWidth:962,
	  minHeight:722,
	  position:'cc',
	  isOverToMax:true,
	   shadable:0.5,
	  autodestroy:5000,
    control:false,
	storeStatus:false
});
layx.msg(a.msg,{dialogIcon:'success',position:'cc',stickable:true});
setTimeout(function(){
    $("#startButton").click();
}, 3500);
            } else {
				$("#music_c")[0].play();
				layx.msg(a.msg,{dialogIcon:'error',position:'cc'});
				$("#startButton").click();
            }
        }
    });
			}
    </script>
{Template footer}