Skip to content

G
gdtel-gztel-school-center-ui
Commit c54bf43c by kyonback
Options

更新海报模块，需要进行install

parent b2eb9a3c
Showing with 323 additions and 15 deletions
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"dayjs": "^1.8.17", "dayjs": "^1.8.17",
"echarts": "^4.5.0", "echarts": "^4.5.0",
"enquire.js": "^2.1.6", "enquire.js": "^2.1.6",
"html2canvas": "^1.0.0-rc.5",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"lodash.pick": "^4.4.0", "lodash.pick": "^4.4.0",
......
src/components/sysmanage/codeMove.vue 0 → 100644
<template>
<img class="code" src="../../assets/img/cosc.png" @mousedown.prevent="move" :style="{'width':(width+'px'),'height':(width+'px')}">
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: "codeMove",
components:{draggable},
props:{
width:Number
},
data(){
return {
currentX:0,
currentY:0,
desX:0,
desY:0,
timer:null,
positionX:0,
positionY:0
}
},
methods:{
move(e){
let op = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - op.offsetLeft;
let disY = e.clientY - op.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if(left<0){
left = 0;
}
if(left+this.width > 300){
left = 300-this.width;
}
if(top<0){
top = 0;
}
//绑定元素位置到positionX和positionY上面
this.positionX = left;
this.positionY = top;
//移动当前元素
op.style.left = left + 'px';
op.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
}
</script>
<style scoped lang="less">
.code{
position: absolute;
width: 100px;
height: 100px;
}
</style>
src/views/poster/PosterList.vue 0 → 100644
<template>
<div class="flex-container">
<!-- 查询区域 -->
<div class="table-page-search-wrapper">
<!-- 搜索区域 -->
<a-form layout="inline">
<a-row :gutter="24">
<span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
<a-col :md="6" :sm="24">
<a-button @click="add()" type="primary">新建海报</a-button>
</a-col>
</span>
</a-row>
</a-form>
</div>
<new-poster ref="model1"></new-poster>
</div>
</template>
<script>
import newPoster from './newPoster'
export default {
name: "PosterList",
components: {newPoster},
compontents:{
newPoster
},
data(){
return {}
},
methods:{
add(){
this.$refs.model1.showModal();
}
}
}
</script>
<style scoped>
</style>
src/views/poster/newPoster.vue 0 → 100644
<template>
<a-drawer
title="海报创建"
placement="right"
:closable="true"
:visible="visible"
@close="onClose"
width="100%"
:bodyStyle="{'padding':0}"
destroyOnClose
>
<div class="meun-box">
<a-row>
<a-col :span="6">
<div class="select-btn">
<span>选择图片</span>
<input ref="selectImgae" class="seletImg" type="file" @change="selectImage"/>
</div>
<a-button @click="toImage" v-if="images!=''">生成图片</a-button>
</a-col>
<a-col :span="6" v-if="images!=''">
<a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
<a-slider id="code" v-model="codeWidth" :max="300"/>
</a-form-item>
</a-col>
</a-row>
</div>
<div class="center-box">
<div class="image-box" ref="imageWrapper" v-if="images!=''">
<code-move :width="codeWidth"></code-move>
<img class="bg-img" :src="images">
</div>
</div>
</a-drawer>
</template>
<script>
import CodeMove from "../../components/sysmanage/codeMove";
import html2canvas from 'html2canvas'
import ACol from "ant-design-vue/es/grid/Col";
export default {
name: "newPoster",
components: {ACol, CodeMove},
data() {
return {
visible: false,
images: '',
codeWidth: 150//二维码大小
}
},
methods: {
showModal() {
this.visible = true;
},
onClose() {
this.visible = false;
},
selectImage() {
let file = this.$refs.selectImgae;
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = (evt) => {
let result = evt.target.result;
this.images = result;
}
reader.readAsDataURL(file.files[0]);
},
toImage() {
html2canvas(this.$refs.imageWrapper, {
backgroundColor: null
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.downloadFile('海报.png', dataURL) ;
});
},
downloadFile(fileName, content) {
const blob = this.base64ToBlob(content); // new Blob([content]);
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
//此写法兼容可火狐浏览器
document.body.appendChild(link);
const evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
},
base64ToBlob(code) {
const parts = code.split(';base64,');
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
}
}
</script>
<style scoped lang="less">
.meun-box {
position: absolute;
left: 0;
right: 0;
height: 80px;
padding: 10px 24px 0;
}
.center-box {
padding-top: 100px;
}
.select-btn {
width: 90px;
height: 32px;
border: 1px solid #eee;
position: relative;
background-color: #00a0e9;
line-height: 31px;
border-radius: 4px;
color: white;
text-align: center;
display: inline-block;
margin-right: 8px;
.seletImg {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
.image-box {
width: 300px;
height: auto;
overflow: hidden;
position: relative;
margin: auto;
.bg-img {
width: 100%;
}
}
</style>
yarn-error.log
Arguments: Arguments:
C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add @/api --dev C:\Program Files\nodejs\node.exe D:\node\node_global\node_modules\yarn\bin\yarn.js install
PATH: PATH:
C:\Program Files\Docker\Docker\Resources\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;D:\Software\git\GIT\Git\cmd;C:\Program Files\TortoiseGit\bin;C:\Program Files\Java\jdk1.8.0_171\bin;C:\Program Files\Java\jdk1.8.0_171\jre\bin;D:\Software\apache-maven\apache-maven-3.5.3\bin;C:\Program Files\nodejs\;D:\Software\Erlang\erl9.0\bin;D:\Software\Rabbtmq\rabbitmq_server-3.8.1\sbin;C:\Users\Administrator\AppData\Local\Microsoft\WindowsApps;C:\Users\Administrator\AppData\Roaming\npm D:\sw\xftp\;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS\;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Git\cmd;C:\Program Files\TortoiseGit\bin;C:\Program Files\nodejs\;D:\sw\Ruby26-x64\bin;C:\Users\Lenovo\scoop\shims;C:\Users\Lenovo\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Java\jdk1.8.0_31\bin;C:\Program Files\Java\jdk1.8.0_31\jre;D:\sw\maven\maven3\bin;D:\node\node_global\;C:\Users\Lenovo\AppData\Local\GitHubDesktop\bin;D:\sw\Microsoft VS Code\bin;C:\Users\Lenovo\AppData\Roaming\npm;C:\Users\Lenovo\AppData\Local\Microsoft\WindowsApps
Yarn version: Yarn version:
1.19.1 1.16.0
Node version: Node version:
12.13.0 10.15.3
Platform: Platform:
win32 x64 win32 x64
Trace: Trace:
Error: https://registry.yarnpkg.com/@%2fapi: Not found Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com registry.yarnpkg.com:443
at Request.params.callback [as _callback] (C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:66926:18) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:56:26)
at Request.self.callback (C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:140564:22)
at Request.emit (events.js:210:5)
at Request.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:141536:10)
at Request.emit (events.js:210:5)
at IncomingMessage.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:141458:12)
at Object.onceWrapper (events.js:299:28)
at IncomingMessage.emit (events.js:215:7)
at endReadableNT (_stream_readable.js:1183:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
npm manifest: npm manifest:
{ {
...@@ -59,6 +50,7 @@ npm manifest: ...@@ -59,6 +50,7 @@ npm manifest:
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"reqwest": "^2.0.5", "reqwest": "^2.0.5",
"tinymce": "^5.1.1", "tinymce": "^5.1.1",
"vant": "^2.5.2",
"viser-vue": "^2.4.7", "viser-vue": "^2.4.7",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-apexcharts": "^1.5.1", "vue-apexcharts": "^1.5.1",
...@@ -932,6 +924,13 @@ Lockfile: ...@@ -932,6 +924,13 @@ Lockfile:
core-js "^2.6.5" core-js "^2.6.5"
regenerator-runtime "^0.13.2" regenerator-runtime "^0.13.2"
"@babel/runtime@7.x":
version "7.8.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.0.0": "@babel/runtime@^7.0.0":
version "7.4.5" version "7.4.5"
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
...@@ -1085,6 +1084,11 @@ Lockfile: ...@@ -1085,6 +1084,11 @@ Lockfile:
resolved "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" resolved "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
"@vant/icons@1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.2.1.tgz#309fecb97a4989866f045ce676b545c454701c8f"
integrity sha512-5ivsKQR4ySbdBW5UPoQDVqO6rdc1um3rvq/0VL+ZSA7Y3MdBQ3E4/NL0hoAY5/sZZeYfIDKEP21gpjUzdeEDQQ==
"@vue/babel-helper-vue-jsx-merge-props@^1.0.0": "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
version "1.0.0" version "1.0.0"
resolved "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040" resolved "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
...@@ -11256,6 +11260,16 @@ Lockfile: ...@@ -11256,6 +11260,16 @@ Lockfile:
spdx-correct "^3.0.0" spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0" spdx-expression-parse "^3.0.0"
vant@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/vant/-/vant-2.5.2.tgz#e8cbb6d7c4a2544e2585da6d75b4c3966b1498fb"
integrity sha512-EwMLdGu47rsMhi5AAfQVuZYo8oaBxueDJ8HIeiiAXEn1HIU5i1Z0HoU2CmeswWrcwWpaZ8AuZ0ctBP8xbDCETA==
dependencies:
"@babel/runtime" "7.x"
"@vant/icons" "1.2.1"
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
vue-lazyload "1.2.3"
vary@~1.1.2: vary@~1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
...@@ -11376,6 +11390,11 @@ Lockfile: ...@@ -11376,6 +11390,11 @@ Lockfile:
resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.15.0.tgz#9b11ef8e7a124f67cdf788c8c90a81f3606240ed" resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.15.0.tgz#9b11ef8e7a124f67cdf788c8c90a81f3606240ed"
integrity sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q== integrity sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q==
vue-lazyload@1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
integrity sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==
vue-loader@^13.0.5: vue-loader@^13.0.5:
version "13.7.3" version "13.7.3"
resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f" resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"
......
yarn.lock
...@@ -2435,6 +2435,11 @@ balanced-match@^1.0.0: ...@@ -2435,6 +2435,11 @@ balanced-match@^1.0.0:
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
base64-arraybuffer@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz#4b944fac0191aa5907afe2d8c999ccc57ce80f45"
integrity sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==
base64-js@^1.0.2: base64-js@^1.0.2:
version "1.3.0" version "1.3.0"
resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3" resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
...@@ -3572,6 +3577,13 @@ css-declaration-sorter@^4.0.1: ...@@ -3572,6 +3577,13 @@ css-declaration-sorter@^4.0.1:
postcss "^7.0.1" postcss "^7.0.1"
timsort "^0.3.0" timsort "^0.3.0"
css-line-break@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.1.1.tgz#d5e9bdd297840099eb0503c7310fd34927a026ef"
integrity sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==
dependencies:
base64-arraybuffer "^0.2.0"
css-loader@^0.28.7: css-loader@^0.28.7:
version "0.28.11" version "0.28.11"
resolved "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7" resolved "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
...@@ -5837,6 +5849,13 @@ html-webpack-plugin@^3.2.0: ...@@ -5837,6 +5849,13 @@ html-webpack-plugin@^3.2.0:
toposort "^1.0.0" toposort "^1.0.0"
util.promisify "1.0.0" util.promisify "1.0.0"
html2canvas@^1.0.0-rc.5:
version "1.0.0-rc.5"
resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.0.0-rc.5.tgz#4ee3cac9f6e20a0fa0c2f35a6f99c960ae7ec4c1"
integrity sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==
dependencies:
css-line-break "1.1.1"
htmlparser2@^3.3.0: htmlparser2@^3.3.0:
version "3.10.1" version "3.10.1"
resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment