chenJinxu
/
TelpoH5FrontendWeb
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

feature 

- websocket-demo
    - 增加 一个websocket的demo

`2022.08.31`
feature
- html-canvas-demo
    - 增加 一个htmlCanvas2demo
feat
JinxChen 2 년 전
부모
e850493404
커밋
8afa2db8da
7개의 변경된 파일과 322개의 추가작업 그리고 6개의 파일을 삭제
분할 보기
Diff Options
Show Stats Download Patch File Download Diff File
  1. +15
    -2
      README.md
  2. +83
    -0
      package-lock.json
  3. +1
    -0
      package.json
  4. +2
    -2
      src/config/models.js
  5. +5
    -2
      src/router/index.js
  6. +96
    -0
      src/views/htmlCanvas/htmlCanvasDemo.vue
  7. +120
    -0
      src/views/websocket/websocket-demo.vue

+ 15
- 2
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拖拽
- 增加 圆形或者marker拖拽


### v1.0.8
`2022.07.21`
feature
- websocket-demo
- 增加 一个websocket的demo


`2022.08.31`
feature
- html-canvas-demo
- 增加 一个htmlCanvas2demo

+ 83
- 0
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",


+ 1
- 0
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",


+ 2
- 2
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/',


+ 5
- 2
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),},


];


+ 96
- 0
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>

+ 120
- 0
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>

Write Preview
Loading…
취소
저장