打印测试页面

resources/views/maintenance/expressPrinting/print/template.blade.php

@@ -14,14 +14,16 @@
             </div>
             <div class="card-body">
                 <button class="btn btn-primary" @click="getPrintItems">获取</button>
-                <button class="btn btn-outline-info" @click="testPreview"> 预览</button>
+{{--                <button class="btn btn-outline-info" @click="testPreview"> 预览</button>--}}
                 <button class="btn btn-outline-primary" @click="uploadPrintData">WAS加工</button>
-                <button class="btn btn-success" @click="wsPrintImage">GoWebSocket 打印</button>
-                <button class="btn btn-outline-warning" @click="initGoWebSocket">GoWebSocket 重置</button>
-                <button class="btn btn-outline-warning" @click="getPrinters">获取打印机</button>
+{{--                <button class="btn btn-success" @click="wsPrintImage">ClientWebSocket 打印</button>--}}
+                <button class="btn btn-outline-warning" @click="initClientWebSocket">ClientWebSocket 重置</button>
 
                 <button class="btn btn-dark" @click="getImage">获取图片</button>
+
                 <button class="btn btn-dark" @click="printImage">打印图片</button>
+
+                <button class="btn btn-dark" @click="getPrinters">获取打印机</button>
             </div>
 
             <div class="container">
@@ -31,13 +33,13 @@
                 <p>3:加工</p>
                 <p>4:打印</p>
             </div>
-            <div class="alert alert-success" v-if="goWebSocketStatus === 1">
+            <div class="alert alert-success" v-if="ClientWebSocketStatus === 1">
                 链接成功
             </div>
-            <div class="alert alert-primary" v-if="goWebSocketStatus === 2" @click="initGoWebSocket">
+            <div class="alert alert-primary" v-if="ClientWebSocketStatus === 2" @click="initClientWebSocket">
                 链接失败
             </div>
-            <div class="alert alert-primary" v-if="goWebSocketStatus === 3" @click="initGoWebSocket">
+            <div class="alert alert-primary" v-if="ClientWebSocketStatus === 3" @click="initClientWebSocket">
                 链接错误
             </div>
 
@@ -75,11 +77,9 @@
             el: '#list',
             data: {
                 printItems: [],
-                // goWebSocketPath: "ws://127.0.0.1:11101/print",
-                goWebSocketPath: "ws://127.0.0.1:11011/printer",
-                goWebSocket: null,
-                goWebSocketStatus: 0,
-
+                ClientWebSocketPath: "ws://127.0.0.1:11011/printer",
+                ClientWebSocket: null,
+                ClientWebSocketStatus: 0,
                 cnWebSocket: null,
                 cnWebSocketPath: "ws://127.0.0.1:13528",
                 cnWebSocketStatus: null,
@@ -90,13 +90,13 @@
                     defaultPrinter: "",
                     printers: [],
                 },
-                base64String:null,            },
+            },
             created() {
 
             },
             mounted() {
                 // 初始化 go 链接
-                this.initGoWebSocket();
+                this.initClientWebSocket();
                 // this.initPddWebSocket();
                 // this.initCnWebSocket();
 
@@ -110,10 +110,9 @@
                         self.pddWebSocketStatus = WebSocketStatus.Close
                     }
                     this.pddWebSocket.onopen = function () {
-                        self.getPrinters()
                         self.pddWebSocketStatus = WebSocketStatus.Open
                     }
-                    this.pddWebSocket.onerror = function (message) {
+                    this.pddWebSocket.onerror = function () {
                         self.pddWebSocketStatus = WebSocketStatus.Error
                     }
                     this.pddWebSocket.onmessage = this.handlerPddWebsocket
@@ -122,12 +121,10 @@
                     if (this.cnWebSocket && this.cnWebSocket.readyState === 2) return
                     this.cnWebSocket = new window.WebSocket(this.cnWebSocketPath)
                     let self = this;
-
                     this.cnWebSocket.onclose = function () {
                         self.cnWebSocketStatus = WebSocketStatus.Close
                     }
                     this.cnWebSocket.onopen = function () {
-                        self.getPrinters()
                         self.cnWebSocketStatus = WebSocketStatus.Open
                     }
                     this.cnWebSocket.onerror = function () {
@@ -145,63 +142,52 @@
                         window.tempTip.show('输入后在获取')
                     }
                     window.axios.post(url, data).then(res => {
-                        this.printItems = res.data.data
+                        this.printItems =this.printItems.concat(res.data.data);
+                        res.data.data.forEach((item)=>{
+                            console.log(item);
+                        })
                         this.$forceUpdate();
                     }).catch(err => {
                         console.log(err);
                     });
                 },
-                // TODO GoWs 返回信息
-                receiveGoWebSocketMessage(meg) {
+                // TODO ClientWs 返回信息
+                receiveClientWebSocketMessage(meg) {
                     let data  = meg.data;
-                    data = JSON.parse(data)
-                    console.log(data)
-                    if (data.Status === true){
-                        let image = document.getElementById("cImage");
-                        console.log(image)
-                        console.log(data.Base64)
-                        this.base64String = data.Base64;
-                        image.setAttribute("src","data:image/jpeg;base64,"+data.Base64)
+                    data = JSON.parse(data);
+                    if (data['Status'] !== true){
+                       return ;
+                    }
+                    console.log(data);
+                    switch (data["processType"]) {
+                        case "getBase64Image":
+                            this.printItems.forEach((item,index,array)=>{
+                                if(item['taskID'] === data["TaskID"]){
+                                    array[index]['base64'] = item;
+                                }
+                            });
+                            break;
+                        case "printImage":
+                            this.printItems.forEach((item,index,array)=>{
+                                if(item['taskID'] === data["TaskID"]){
+                                    array[index]['printed'] = true;
+                                }
+                            });
+                            break;
+                        case "getPrinters":
+                            this.clientPrinters.printers = data["printes"];
+                            this.clientPrinters.defaultPrinter = (this.clientPrinters.printers).filter((item,i,array)=>{
+                                if (item["IsDefault"] === true){
+                                    return true;
+                                }
+                                return false;
+                            })
+                            break
+                        default:
+                            break;
                     }
-                    // this.goWebSocketStatus = 1;
-                    // let res = JSON.parse(meg.data)
-                    // if (res.operation === 'print') {
-                    //     if (res.status === true) {
-                    //     }
-                    // } else if (res.operation === 'preview') {
-                    //     if (res.status === "success") {
-                    //         this.printItems.forEach(function (item) {
-                    //             if (item['task_id'] === res['task_id']) {
-                    //                 item['base64'] = res.data.shift();
-                    //             }
-                    //         })
-                    //         this.$forceUpdate();
-                    //     }
-                    // } else if (res.operation === 'line') {
-                    //     if (res.status === '') this.goWebSocketStatus = 1;
-                    // }
-                },
-                // TODO 发送到后台进行加工
-                {{--uploadPrintData() {--}}
-                    {{--    let url = "{{url("apiLocal/maintenance/print/uploadPrintData")}}";--}}
-                    {{--    let data = {printData: this.printItems}--}}
-                    {{--    let self = this;--}}
-                    {{--    window.axios.post(url, data).then(res => {--}}
-                    {{--        console.log(res)--}}
-                    {{--        if (res.data.success) {--}}
-                    {{--            res.data.data.forEach(function (item) {--}}
-                    {{--                self.printItems.forEach(function (data, index, array) {--}}
-                    {{--                    if (data['logistic_number'] === item['logistic_number']) {--}}
-                    {{--                        array[index] = item--}}
-                    {{--                    }--}}
-                    {{--                })--}}
-                    {{--            })--}}
-                    {{--            this.$forceUpdate();--}}
-                    {{--        }--}}
-                    {{--    }).then(err => {--}}
 
-                    {{--    })--}}
-                    {{--},--}}
+                },
                 uploadPrintData(item) {
                     let url = "{{url("apiLocal/maintenance/print/uploadPrintData")}}";
                     let data = {printData: [item]};
@@ -210,65 +196,38 @@
                             res.data.data
                         }
                     }).catch(err => {
-
+                        alert(err);
                     });
                 },
-                sendPrinterDate(item) {
-
-                },
-                // TODO GoWebSocket 初始化
-                initGoWebSocket() {
-                    if (this.goWebSocket && this.goWebSocket.readyState === 1) return this.goWebSocket;
-                    this.goWebSocketStatus = 2;
+                initClientWebSocket() {
+                    if (this.ClientWebSocket && this.ClientWebSocket.readyState === 1) return this.ClientWebSocket;
+                    this.ClientWebSocketStatus = 2;
                     let self = this;
-                    this.goWebSocket = new window.WebSocket(this.goWebSocketPath);
-                    this.goWebSocket.onmessage = this.receiveGoWebSocketMessage;
-                    this.goWebSocket.onopen = function () {
-                        self.goWebSocketStatus = 1
+                    this.ClientWebSocket = new window.WebSocket(this.ClientWebSocketPath);
+                    this.ClientWebSocket.onmessage = this.receiveClientWebSocketMessage;
+                    this.ClientWebSocket.onopen = function () {
+                        self.ClientWebSocketStatus = 1
                     };
-                    this.goWebSocket.onclose = function () {
-                        self.goWebSocketStatus = 2
-                        alert("onclose")
+                    this.ClientWebSocket.onclose = function () {
+                        self.ClientWebSocketStatus = 2
                     };
 
-                    this.goWebSocket.onerror = function () {
-                        self.goWebSocketStatus = 3
+                    this.ClientWebSocket.onerror = function () {
+                        self.ClientWebSocketStatus = 3
                     }
                 },
-                // TODO GoWebSocket 链接成功
-                GoWebSocketOpen() {
-                    this.goWebSocketStatus = 0;
+                // TODO ClientWebSocket 链接成功
+                ClientWebSocketOpen() {
+                    this.ClientWebSocketStatus = 0;
                 },
-                // TODO GoWebSocket 链接关闭
-                GoWebSocketClose() {
-                    this.goWebSocketStatus = 1;
+                // TODO ClientWebSocket 链接关闭
+                ClientWebSocketClose() {
+                    this.ClientWebSocketStatus = 1;
                 },
-                // TODO  GoWebSocket 关闭
-                closeGoWebSocket() {
-                    this.goWebSocketStatus = 2;
-                    this.goWebSocket.close();
-                },
-                // TODO 推动到GoWs 获取打印图片
-                wsGetImage() {
-                    let self = this;
-                    if (!this.goWebSocket || this.goWebSocket.readyState !== 1) {
-                        window.tempTip.show("重置链接或继续")
-                    }
-                    this.initGoWebSocket();
-                    this.printItems.forEach(function (item) {
-                        if (item['is_process'] === true) return;
-                        item['operation'] = 'preview';
-                        self.goWebSocket.send(JSON.stringify(item))
-                    });
-                },
-                // TODO 推动到GoWs 进行打印
-                wsPrintImage() {
-                    this.initGoWebSocket();
-                    let self = this;
-                    this.printItems.forEach(function (item) {
-                        item['operation'] = 'print';
-                        self.goWebSocket.send(JSON.stringify(item));
-                    });
+                // TODO  ClientWebSocket 关闭
+                closeClientWebSocket() {
+                    this.ClientWebSocketStatus = 2;
+                    this.ClientWebSocket.close();
                 },
                 // TODO 获取预览面单
                 previewLogisticFace(data) {
@@ -286,73 +245,25 @@
                 },
                 handlerCnWebsocket(message) {
                     let data = JSON.parse(message.data)
-                    if (data.msg !== '成功') {
-                        alert(data.msg);
-                        return
-                    }
-                    if (data.cmd === 'getPrinters') {
-                        this.setClientPrinters(data)
-                    } else if (data.cmd === 'print') {
+                    if (data.cmd === 'print') {
                         let url = data['previewImage'][0];
-                        this.getBase64(url, data);
+                        this.printItems.forEach((item)=>{
+                            if (item['task_id'] === data['taskID']){
+                                item.url = url;
+                                this.getBase64Image(item);
+                            }
+                        })
                     }
                 },
                 handlerPddWebsocket(message) {
                     let data = JSON.parse(message.data);
-                    if (data.cmd === 'getPrinters') {
-                        this.setClientPrinters(data)
-                    } else if (data.cmd === "PrintResultNotify") {
-                        console.log(data)
-                        this.getBase64(data['previewURL'], data);
-                    }
-                },
-                getBase64(imgUrlPath, data) {
-                    let canvas = document.createElement('canvas');
-                    let cxt = canvas.getContext('2d');
-                    let img = new Image();
-                    img.setAttribute('crossOrigin', 'anonymous');
+                    // TODO 获取图片链接
                     if (data.cmd === "PrintResultNotify") {
-                        img.setAttribute('Access-Control-Allow-Oriain', 'http://127.0.0.1:16666');
-                        this.getBase64ByUrl(imgUrlPath,data)
-                        return
-                    }
-                    img.setAttribute('Access-Control-Allow-Credentials', 'true');
-                    img.src = imgUrlPath;
-                    let base64 = null;
-                    let self = this;
-                    img.onload = () => {
-                        canvas.width = img.width;
-                        canvas.height = img.height;
-                        cxt.drawImage(img, 0, 0);
-                        base64 = canvas.toDataURL("image/jpeg", 1);
-                        self.printItems.forEach(function (item) {
-                            if (item['task_id'] === data['taskID']) {
-                                item['base64'] = base64;
-                            }
-                        });
+                        this.getBase64Image(data['previewURL'], data);
                     }
                 },
-
-                getBase64ByUrl(url,data){
-                    let xhr = new XMLHttpRequest();
-                    xhr.withCredentials = true;
-                    xhr.responseType = 'blob';
-                    xhr.open('GET',url);
-                    xhr.send()
-                    xhr.onreadystatechange = function(){
-                        if ( xhr.readyState === 4 && xhr.status === 200 ) {
-                            alert( xhr.responseText );
-                            let  blob = new Blob([xhr.response], {type: 'image/png'});
-                            console.log(blob);
-                        } else {
-                            alert( xhr.statusText );
-                        }
-                    };
-
-                },
-
+                // 发送 预览面单信息
                 getPddPreviewTaskJson(item) {
-                    let printer = this.clientPrinters.printers[0]['name'];
                     return JSON.stringify({
                         cmd: "print",
                         requestID: item['task_id'],
@@ -377,9 +288,9 @@
                         }
                     })
                 },
+                // 发送 菜鸟 预览信息
                 getCnPreviewTaskJson(item) {
                     let printer = this.clientPrinters.printers[0]['name'];
-                    console.log(item);
                     return JSON.stringify({
                         cmd: 'print',
                         request_id: item['task_id'],
@@ -404,42 +315,24 @@
                     });
                 },
                 getPrinters() {
-                    let json = JSON.stringify({
-                        cmd: "getPrinters",
-                        requestID: "getPrinters" + (new Date().getDate()),
-                        version: "1.0",
-                    });
-                    if (this.cnWebSocket && this.cnWebSocket.readyState === 1) {
-                        this.cnWebSocket.send(json);
-                    } else if (this.pddWebSocket && this.pddWebSocket.readyState === 1) {
-                        this.pddWebSocket.send(json);
-                    } else {
-                        alert('未链接打印机终端')
-                    }
+                    let data = {ProcessType:"getPrinters"};
+                    this.ClientWebSocket.send(JSON.stringify(data));
                 },
                 setClientPrinters(data) {
                     this.clientPrinters.defaultPrinter = data['defaultPrinter'];
                     this.clientPrinters.printers = data['printers'];
                 },
-                testPreview() {
-                    let self = this;
-                    this.printItems.forEach(function (item) {
-                        self.previewLogisticFace(item)
-                    })
-                },
-                getImage(){
-                    let data = {
-                        processType:"getBase64Image",
-                        url:"https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/exp/w=480/sign=2c1fdf63d909b3deebbfe560fcbe6cd3/fd039245d688d43ffdc5e9f9751ed21b0ef43b48.jpg"
-                    }
-                    this.goWebSocket.send(JSON.stringify(data))
+                // 获取图片
+                getBase64Image(item){
+                    let data = JSON.parse(JSON.stringify(item));
+                    data.ProcessType = "getBase64Image";
+                    this.ClientWebSocket.send(JSON.stringify(data));
                 },
-                printImage(){
-                    let data = {
-                        processType:"printImage",
-                        base64:this.base64String
-                    };
-                    this.goWebSocket.send(JSON.stringify(data));
+                // 打印图片
+                printImage(item){
+                    let data = JSON.parse(JSON.stringify(item));
+                    data.processType = "printImage";
+                    this.ClientWebSocket.send(JSON.stringify(data));
                 }
             }
         });