From 8afa2db8da476293a99a80ef23d13fd39a5cb651 Mon Sep 17 00:00:00 2001
From: JinxChen <2183691628@qq.com>
Date: Wed, 31 Aug 2022 16:39:20 +0800
Subject: [PATCH] =?UTF-8?q?feature=20-=20websocket-demo=20=20=20=20=20-=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E4=B8=80=E4=B8=AAwebsocket=E7=9A=84demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`2022.08.31`
feature
- html-canvas-demo
    - 增加 一个htmlCanvas2demo
---
 README.md                               |  17 +++-
 package-lock.json                       |  83 ++++++++++++++++
 package.json                            |   1 +
 src/config/models.js                    |   4 +-
 src/router/index.js                     |   7 +-
 src/views/htmlCanvas/htmlCanvasDemo.vue |  96 +++++++++++++++++++
 src/views/websocket/websocket-demo.vue  | 120 ++++++++++++++++++++++++
 7 files changed, 322 insertions(+), 6 deletions(-)
 create mode 100644 src/views/htmlCanvas/htmlCanvasDemo.vue
 create mode 100644 src/views/websocket/websocket-demo.vue

diff --git a/README.md b/README.md
index 7321a56..199ddad 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-01-19 10:08:58
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-06-17 16:41:20
+ * @LastEditTime: 2022-08-31 16:39:10
  * @FilePath: \AntpayFrontEnd\README.md
  * @description: 项目说明文档
 -->
@@ -120,4 +120,17 @@ feature
 `2022.06.17`
 feature
 - PointInRing
-    - 增加 圆形或者marker拖拽
\ No newline at end of file
+    - 增加 圆形或者marker拖拽
+
+
+### v1.0.8
+`2022.07.21`
+feature
+- websocket-demo
+    - 增加 一个websocket的demo
+
+
+`2022.08.31`
+feature
+- html-canvas-demo
+    - 增加 一个htmlCanvas2demo
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 50a360b..7727dc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@vant/area-data": "^1.2.2",
         "axios": "^0.26.0",
         "core-js": "^3.6.5",
+        "html2canvas": "^1.4.1",
         "nprogress": "^0.2.0",
         "vant": "^2.12.39",
         "vue": "^2.6.11",
@@ -4163,6 +4164,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -6006,6 +6015,14 @@
         "node": ">4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -9010,6 +9027,18 @@
         "object-assign": "^4.0.1"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -17375,6 +17404,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -18085,6 +18122,14 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
@@ -22819,6 +22864,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -24328,6 +24378,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
@@ -26693,6 +26751,15 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -33438,6 +33505,14 @@
         "require-main-filename": "^2.0.0"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -34021,6 +34096,14 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
diff --git a/package.json b/package.json
index d5ffd6e..fedc25b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@vant/area-data": "^1.2.2",
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "html2canvas": "^1.4.1",
     "nprogress": "^0.2.0",
     "vant": "^2.12.39",
     "vue": "^2.6.11",
diff --git a/src/config/models.js b/src/config/models.js
index 7d2d3be..0ff2ab5 100644
--- a/src/config/models.js
+++ b/src/config/models.js
@@ -1,11 +1,11 @@
 /*
  * @Date: 2021-11-20 10:26:39
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-06-17 16:40:14
+ * @LastEditTime: 2022-07-21 16:41:11
  * @FilePath: \AntpayFrontEnd\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.7'; //版本号
+export const VERSION_MODEL = '1.0.8'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
diff --git a/src/router/index.js b/src/router/index.js
index 0904cce..7717f64 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 /*
  * @Date: 2022-01-19 10:08:26
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-05-11 14:24:34
+ * @LastEditTime: 2022-08-31 16:16:31
  * @FilePath: \AntpayFrontEnd\src\router\index.js
  * @description:
  */
@@ -34,7 +34,10 @@ const routes = [
 
     // 高德地图测试demo
     { path: '/gaode-point-in-ring', name: 'gaode-point-in-ring', component: resolve => require(['@/views/gaode-demo/PointInRing'], resolve),},
-
+    // webSocketDemo
+    { path: '/websocket-demo', name: 'websocket-demo', component: resolve => require(['@/views/websocket/websocket-demo'], resolve),},
+    // htmlCnavas demo
+    { path: '/html-canvas-demo', name: 'html-canvas-demo', component: resolve => require(['@/views/htmlCanvas/htmlCanvasDemo'], resolve),},
 
 
 ];
diff --git a/src/views/htmlCanvas/htmlCanvasDemo.vue b/src/views/htmlCanvas/htmlCanvasDemo.vue
new file mode 100644
index 0000000..b9a0c1a
--- /dev/null
+++ b/src/views/htmlCanvas/htmlCanvasDemo.vue
@@ -0,0 +1,96 @@
+<!--
+ * @Date: 2022-08-31 16:13:39
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-08-31 16:37:14
+ * @FilePath: \AntpayFrontEnd\src\views\htmlCanvas\htmlCanvasDemo.vue
+ * @description:
+-->
+<template>
+    <div class="htmlCanvas">
+        <van-button type="info" @click="onCreatPoster">生成海报</van-button>
+        <van-button type="info" @click="onSavePoster">保存海报</van-button>
+        <div id="poster" class="posterView">
+            <p>2421144211414</p>
+        </div>
+        <!-- 生成海报提示 -->
+        <div id="result" class="result" v-show="isShowResultImg"></div>
+    </div>
+</template>
+
+<script>
+import html2canvas from 'html2canvas';
+export default {
+  name:'',
+  data(){
+   return {
+       isShowResultImg: false
+   }
+  },
+  methods: {
+      onCreatPoster() {
+          this.isShowResultImg = true;
+          let options = {
+              useCORS: true,
+              ignoreElements:false,
+              scale: 7, //dpi 设置默认值，提高图片分辨率
+          };
+          let docItme = document.querySelector('#poster');
+          html2canvas(docItme, options)
+            .then(canvas => {
+                let url = canvas.toDataURL('image/png') //将canvas转成base64图片格式
+                document.querySelector('#result').innerHTML =
+                `<img src="${url}" alt="海报" width="100%" height="100%">`
+            })
+      },
+      onSavePoster() {
+          let that = this;
+          // let dpi = window.devicePixelRatio || 2
+        this.$dialog.confirm({
+            title: '温馨提示',
+            message: '是否保存ICCID截图'
+        }).then(() => {
+            that.downImage();
+        })
+      },
+      downImage() {
+        let options = {
+            useCORS:true, // 使用跨域
+            scale:6,
+            ignoreElements:(ele) =>{ //忽略的dom元素，保存海报就不会显示这个元素内容
+                if(ele.id === 'name'){
+                        return true
+                }
+            }
+        };
+        html2canvas(document.querySelector('#poster'),options).then(canvas=>{
+            canvas.toBlob(function(blob){
+                var a = document.createElement('a')
+                var url = window.URL.createObjectURL(blob)
+                var filename = '海报.png'
+                a.href = url
+                a.download = filename
+                a.click()
+                // 当图片文件加载完成释放这个url
+                window.URL.revokeObjectURL(url)
+            })
+        })
+      }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.htmlCanvas {
+    .posterView {
+        height: 40px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        p {
+            margin: 5px;
+            font-size: 24px;
+        }
+    }
+}
+</style>
diff --git a/src/views/websocket/websocket-demo.vue b/src/views/websocket/websocket-demo.vue
new file mode 100644
index 0000000..33855bb
--- /dev/null
+++ b/src/views/websocket/websocket-demo.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Date: 2022-07-21 14:16:12
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-08-09 15:11:38
+ * @FilePath: \AntpayFrontEnd\src\views\websocket\websocket-demo.vue
+ * @description: websocket 测试demo
+-->
+<template>
+    <div class="websocket-container">
+        <van-field v-model="socketData" label="socket数据" type="textarea" rows="1" autosize />
+        <van-button type="info" @click="onStartConnect">开始连接</van-button>
+        <van-button type="danger" @click="onStopConnect">停止连接</van-button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'websocket-demo',
+  data(){
+   return {
+       wsUrl: 'ws://id.ssjlai.com/realtime_pos/api/WebSocket/Acceptor',
+       websock: '',
+       socketData: '',
+   }
+  },
+  created() {},
+  destroyed() {
+    this.websocketClose(); //离开路由之后断开websocket连接
+  },
+  methods: {
+    //   开始连接
+      onStartConnect() {
+          this.initWebsocket();
+      },
+    //   关闭连接
+      onStopConnect() {
+          this.websocketClose()
+      },
+    //   初始化websocket连接
+      initWebsocket() {
+          this.$toast.loading({
+            message: '开始连接websocket',
+            })
+          if(typeof(WebSocket) === "undefined"){
+                this.$dialog.confirm({
+                    title: '出错了',
+                    message: '您的浏览器不支持websocket'
+                })
+            }else{
+                // 实例化socket
+                this.websock = new WebSocket(this.wsUrl);
+                // 获取webSocket返回的信息
+                this.websock.onmessage = this.websocketOnMessage;
+                // 打开连接
+                this.websock.onopen = this.websocketOnOpen;
+                // 连接出错
+                this.websock.onerror = this.websocketOnError;
+                // 关闭连接
+                this.websock.onclose = this.websocketClose;
+
+            }
+      },
+    //   打开websocket
+      websocketOnOpen() {
+          //连接建立之后执行send方法发送数据
+        let actions = '864316050104798';
+        this.websocketsend(actions);
+         this.$toast.loading({
+            message: '开始连接websocket',
+            })
+        console.log("开始连接");
+      },
+    //   websocket出错
+      websocketOnError() {
+          //失败重连
+           //this.initWebSocket();
+           this.$toast.clear();
+           let that = this;
+           this.$dialog.confirm({
+                title: '出错了',
+                message: '是否重新连接websocket'
+            }).then(() => {
+                that.initWebsocket();
+            }).catch(() => {
+                that.websocketClose();
+            })
+      },
+    //   关闭websocket连接
+      websocketClose(e) {
+        this.websock.close();
+        if(e) {
+            console.log('断开连接',e);
+        };
+        console.log("关闭连接");
+      },
+    // 数据接收
+      websocketOnMessage(e) {
+        //this.$toast.clear();
+        const redata = JSON.parse(e.data);
+        console.log("获取到的数:;", redata);
+      },
+    //   发送数据
+      websocketsend(data){//数据发送
+        this.websock.send(data);
+      },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.websocket-container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 20px;
+}
+</style>