aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加画布颜色历史

Browse Source
This commit is contained in:
X1627315083
2024-09-27 16:31:33 +08:00
parent e26d57dd76
commit 21b0af1365
32 changed files with 423 additions and 885 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/iconfont2/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4292253 */
src: url('iconfont.woff2?t=1727254748810') format('woff2'),
url('iconfont.woff?t=1727254748810') format('woff'),
url('iconfont.ttf?t=1727254748810') format('truetype');
src: url('iconfont.woff2?t=1727415711578') format('woff2'),
url('iconfont.woff?t=1727415711578') format('woff'),
url('iconfont.ttf?t=1727415711578') format('truetype');
}
.iconfont {
@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-caizhi:before {
content: "\e647";
}
.icon-IC-yehua:before {
content: "\e61b";
}

BIN
src/assets/iconfont2/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/iconfont2/iconfont.woff2
View File

Binary file not shown.

4
src/component/Account/account.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="account_page">
<div class="account_page_titleImg">
<!-- <div class="account_page_titleImg">
<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
</div>
</div> -->
<div class="account_page_content_box">
<div class="account_page_content">
<div class="account_page_content_left">

3
src/component/Account/accountFollowFans.vue
View File

@@ -130,6 +130,9 @@ export default defineComponent({
}
.account_followFans_body{
padding-bottom: 3rem;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
.ant-tabs-nav-wrap{

3
src/component/Account/accountMessage.vue
View File

@@ -193,6 +193,9 @@ export default defineComponent({
}
.account_message_body{
padding-bottom: 3rem;
:deep(.ant-badge){
font-size: var(--aida-fsize2);
}
:deep(.ant-tabs-nav){
padding: 0rem 5rem;
.ant-tabs-nav-wrap{

15
src/component/Account/followFans/fans.vue
View File

@@ -15,7 +15,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="">{{ item.senderUserName }}</div>
<div class="">{{ item.userName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }}</div>
</div>
</div>
@@ -88,14 +88,15 @@ export default defineComponent({
}
let setFollow = (item:any) =>{
let url = Https.httpUrls.porfolioFollow
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
Https.axiosGet(url, {params:{followeeId:item.senderId}})
.then((rv) => {
if(item.isFollow == 1){
item.isFollow = 0
}else{
item.isFollow = 1
}
searchFollowFansList()
// if(item.isFollow == 1){
// item.isFollow = 0
// }else{
// item.isFollow = 1
// }
})
}
let openOtherUsers = (item:any)=>{

18
src/component/Account/followFans/follow.vue
View File

@@ -16,7 +16,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="">{{ item.senderUserName }}</div>
<div class="">{{ item.userName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }} </div>
</div>
</div>
@@ -88,15 +88,17 @@ export default defineComponent({
})
}
let setFollow = (item:any) =>{
let url = Https.httpUrls.porfolioFollow
if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
// let url = Https.httpUrls.porfolioFollow
// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
let url = Https.httpUrls.porfolioCancelFollow
Https.axiosGet(url, {params:{followeeId:item.senderId}})
.then((rv) => {
if(item.isFollow == 1){
item.isFollow = 0
}else{
item.isFollow = 1
}
searchFollowFansList()
// if(item.isFollow == 1){
// item.isFollow = 0
// }else{
// item.isFollow = 1
// }
})
}
let openOtherUsers = (item:any)=>{

1
src/component/Administrator/questionnaire.vue
View File

@@ -134,7 +134,6 @@ export default defineComponent({
Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
if(res){
dataList.value = res
console.log(dataList);
// console.log(allEchartsList.value);
resolve('')

1
src/component/Administrator/recentActiveUser.vue
View File

@@ -273,7 +273,6 @@ export default defineComponent({
if (rv) {
// this.dataList = rv
filter.dataList = rv.records
console.log(rv);
filterData.total = rv.total
filter.tableLoading = false

3
src/component/Administrator/trialUserConversionRateChart.vue
View File

@@ -51,9 +51,6 @@ export default defineComponent({
let data: any = [];
for (let [key, value] of entries) {
let str
console.log(key);
if(key != 'conversionRate'){
if(key == 'trialToOfficialCount'){
str = 'Trial To Official'

2
src/component/Detail/DesignElementsMobile.vue
View File

@@ -452,8 +452,6 @@ export default defineComponent({
if(sketch.offsetHeight < item.location[1]/sketchNum){
top = sketch.offsetHeight +'px'
}
console.log(sketch.offsetWidth,this.sketch.width.replace(/rem/g,''));
this.printStyleList[index]={
centers:{
left:0,

469
src/component/Detail/addDetails.vue
View File

@@ -1,7 +1,7 @@
<template>
<a-modal
class="addDetails_modal generalModel"
v-model:visible="showPayOrder"
v-model:visible="addDetails"
:footer="null"
width="50%"
:maskClosable="false"
@@ -21,350 +21,40 @@
<div>{{ $t('addDetails.AddDetails') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="addDetails_canvasCenter">
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
<div>新增</div>
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div> -->
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
{{ $t('addDetails.submit') }}
</div>
</div>
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
</div>
<div></div>
</a-modal>
<!-- <div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div> -->
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import allOrder from "@/component/Pay/allOrder.vue";
import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
export default defineComponent({
components: {
creditsDetail,
allOrder,
generalMiniCanvas,
},
emits: ['setSloganData'],
setup(props,{emit}) {
let presentState = ref('paypal');
let showPayOrder = ref(false);
let loadingShow = ref(false);
let { t } = useI18n();
let canvas = reactive({});
let scale = 2;
let ratio = [1,1]
let exportWH = 512
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
})
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:{
pencil:4,
eraser:4,
},
spreadState:false,
})
let canvasWH = ref(0);
onMounted(()=>{
})
let exportUrl = ''
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let addDetail = reactive({
imgUrl:''
});
let addDetails = ref(false);
let init = (data,index)=>{
normalCanvasState.value = []
reverseCanvasState.value = []
showPayOrder.value = true;
ratio = [1,1]
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image();
img.onload = function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
canvasBox.style.width = height+'px'
let wScale = 1
let hScale = 1
if(img.width>img.height){
hScale = img.height/img.width
exportWH = img.width
}else{
wScale = img.width/img.height
exportWH = img.height
}
ratio = [wScale,hScale]
canvas = canvasGeneral.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
})
scale = img.height/canvas.height
pencilbtnStyle.value.background = rgba
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.path
fabric.Image.fromURL(data.path, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
img.set({
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
//画布上移动
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
img.remove()
}
img.src = data.path
})
addDetails.value = true
addDetail.imgUrl = data.path
}
let canvasKeyDown = (event) => {
if(keyDown.indexOf(event.key)>-1){
}else{
keyDown.push(event.code)
if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
historyState('reverse')
}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
historyState('')
}
}
}
let canvasKeyUp = (event) =>{
keyDown = keyDown.filter(function(item) {
return event.code !== item;
})
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setCanvasMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setCanvasMove(e)
}
let setCanvasMove = (event)=>{
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasCenterBox = document.querySelector(".addDetails_modal .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
pencilbtnStyle.value.display = `none`
}else if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
}
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let setPencil = ()=>{
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
pencilbtnStyle.value.background = rgba
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
pencilbtnStyle.value.background = `rgb(255,255,255)`
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
// return
// }
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let setTimeOutWidth
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
}
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
//撤回
let historyState = (str)=> {
if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
let obj = reverseCanvasState.value.pop()
// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
canvasState.value = obj
normalCanvasState.value.push(obj);
}else if(str == '' && normalCanvasState.value.length > 1){
let obj = normalCanvasState.value.pop()
canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
reverseCanvasState.value.push(obj);
}else{
return
}
canvas.loadFromJSON(canvasState.value, () => {});
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects('path');
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,1)",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone((back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
obj = cloned
})
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
exportCanvas.add(obj)
})
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
})
let submitBase64Data = (data)=>{
emit('setSloganData',data)
cancelDsign()
}
let cancelDsign = ()=>{
document.removeEventListener('keydown',canvasKeyDown);
document.removeEventListener('keyup', canvasKeyUp);
showPayOrder.value = false
addDetails.value = false
}
return {
presentState,
showPayOrder,
loadingShow,
t,
pencilbtnStyle,
...toRefs(canvasBtn),
...toRefs(addDetail),
addDetails,
init,
setOperation,
setPencilWidth,
historyState,
setSubmit,
submitBase64Data,
cancelDsign,
};
},
@@ -385,135 +75,10 @@ export default defineComponent({
}
.addDetails_center{
position: relative;
// width: calc(512px / 2);
// width: 256px;
height: 100%;
display: flex;
flex-direction: column;
// height: calc(512px / 2);
margin: 0 auto;
.addDetails_center_item{
// position: relative;
background: #fff;
position: absolute;
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
.addDetails_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.addDetails_center_btn{
z-index: 2;
// left: 50%;
// transform: translate(-50%,-135%);
// transition: all .3s;
padding: 1rem 1.5rem;
// transform: translate(-50%,0);
position: relative;
width: 100%;
flex-direction: row;
input{
// width: 100%;
// margin-top: 1rem;
flex: 1;
}
.icon-xiala{
position: absolute;
width: 2rem;
bottom: 0;
transform: translate(-50%, 90%);
left: 50%;
width: 6rem;
background: #fff;
text-align: center;
cursor: pointer;
&.icon-xiala::before{
transition: all .3s;
}
&.btnRotate::before{
transform: rotate(180deg);
display: block;
}
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
&.active{
border: 1px solid;
border-radius: .4rem;
}
}
&.spread{
transform: translate(-50%,0);
}
}
.addDetails_canvasCenter{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1;
position: relative;
width: 100%;
background: #e6e6e6;
&:hover{
cursor: none;
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.canvas-container{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{
.addDetails_center_btn{
// transform: translate(-50%,-101%);
// &.spread{
// transform: translate(-50%,0);
// }
}
}
}
.exportCanvasBox_submit{
margin-top: 2.4rem;

69
src/component/Detail/editFrontBack.vue
View File

@@ -36,6 +36,7 @@ import creditsDetail from "@/component/Pay/creditsDetail.vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral";
export default defineComponent({
components: {
creditsDetail,
@@ -68,6 +69,7 @@ export default defineComponent({
if(newVal == -1) return
imgDomIndex = newVal
props.patchData.front.imageUrl= ''
clearTimeout(setTimeSubmit)
init(props.patchData.front[newVal],'')
})
let canvasBtn = reactive({
@@ -92,14 +94,12 @@ export default defineComponent({
imgData.value = data
nextTick(()=>{
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
img.onload = async function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
@@ -124,32 +124,36 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.maskUrl
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
img.set({
// width: canvas.width,
// height: canvas.height,
// scaleX:2,
// scaleY:1,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
// canvas.add(img);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
},{ crossOrigin: "Anonymous" });
await new Promise((resolve, reject) => {
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
img.set({
// width: canvas.width,
// height: canvas.height,
// scaleX:2,
// scaleY:1,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
// canvas.add(img);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
resolve('')
},{ crossOrigin: "Anonymous" });
})
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(canvasBtn.canvasState != 'move'){
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
@@ -286,16 +290,16 @@ export default defineComponent({
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
setSubmit()
},1000)
setSubmit()
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
// editFrontBackPencilbtn.value.style.display = 'none'
}else{
createSetTimeSubmit()
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
createSetTimeSubmit()
},1000)
}
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
@@ -505,6 +509,7 @@ export default defineComponent({
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
&:hover{

2
src/component/Events/eventsDetail.vue
View File

@@ -85,8 +85,6 @@ export default defineComponent({
Https.axiosGet(data.https).then(
(rv: any) => {
if(rv){
console.log(rv);
message.success(data.success)
filter.loadingShow[index] = false
}

122
src/component/HomePage/ExportModel.vue
View File

@@ -47,7 +47,6 @@
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
@@ -64,10 +63,9 @@
<div>{{colorItem.name}}</div>
</div>
</div>
</div>
<div
v-if="key != 'moodboardPosition'"
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -83,27 +81,29 @@
</div>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div class="labelHover_show exportCanvasBox_imgbor">
<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
</div>
<div class="label_item" v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
</div>
<div class="label_item texture" v-show="operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@@ -114,15 +114,15 @@
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
</div>
<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
</div>
<div class="label_item" v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -130,12 +130,12 @@
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
</div>
<!-- <div class="label_item" v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label> -->
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
</div> -->
<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@@ -146,11 +146,11 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div> -->
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
@@ -1527,31 +1527,40 @@ export default defineComponent({
let setTimeOut = {
color:null,
width:null,
colorHistory:null,
}//给切换颜色设置防抖
let colorHistoryList = ref(['rgb(0, 0, 0)'])
let setColorHistory = (value)=>{
canvasPencilColor.value = value
pencilColor()
}
let pencilColor = ()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
},100)
pencilColor()
},200)
setTimeOut.colorHistory = setTimeout(()=>{
colorHistoryList.value.push(canvasPencilColor.value)
},1000)
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width)
@@ -1956,7 +1965,6 @@ export default defineComponent({
let submitLiquefaction = (rv)=>{
const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
console.log(liquefactionData);
liquefactionData.setSrc(rv, function() {
liquefactionData.scaleToWidth(originalWidth);
liquefactionData.scaleToHeight(originalHeight);
@@ -1971,7 +1979,6 @@ export default defineComponent({
liquefactionData = activeObjects[0]
liquefaction.value.init(activeObjects[0])
} else {
console.log('No object selected.');
message.info(useI18.t('exportModel.jsContent6'))
return null;
}
@@ -2031,6 +2038,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
setHDExport,//高清导出选择的图片
@@ -2192,7 +2201,7 @@ export default defineComponent({
.exportCanvasBox_left_tool{
margin: 0;
}
label {
.label_item,label {
display: flex;
align-items: center;
width: 23%;
@@ -2340,8 +2349,29 @@ export default defineComponent({
flex: 1;
margin-left: 8rem;
display: flex;
label{
.label_item{
margin-right: 2rem;
position: relative;
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
flex-wrap: wrap;
div{
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-bottom: 1rem;
cursor: pointer;
}
}
}
.label_item:hover{
.labelHover_show{
display: flex;
}
}
}
.exportCanvasBox_left_tool_item{

2
src/component/HomePage/Generate.vue
View File

@@ -114,7 +114,7 @@
</a-upload>
</i>
<div :title="$t('Generate.style')">
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
</div>
<textarea

4
src/component/HomePage/MoodboardUpload.vue
View File

@@ -440,7 +440,9 @@ export default defineComponent({
// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){
// await this.layout()
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
if(!styleObj.domStyle)await this.layout()
//
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
}

53
src/component/HomePage/collectionModal.vue
View File

@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import {useStore} from 'vuex'
@@ -83,7 +84,13 @@ export default defineComponent({
SketchboardUpload,
MarketingSketchUpload
},
setup(){
props:{
getDesignData: {
type: Function,
required: true
}
},
setup(props){
const store = useStore()
let {t} = useI18n()
let driver__:any = computed(()=>{
@@ -285,9 +292,46 @@ export default defineComponent({
})
return bor
},
getPantongName() {
let colorBoards = this.store.state.UploadFilesModule.colorBoards;
let data: any = [];
for (let v of colorBoards) {
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
let hsv = rgbToHsv(color);
v.hsv = hsv[0] + hsv[1] + hsv[2];
data.push({
h: hsv[0],
s: hsv[1],
v: hsv[2],
});
}
return new Promise((resolve: any, reject: any) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv: any) => {
if (rv) {
rv.forEach((ele: any, index: number) => {
colorBoards[index].id = ele.id;
colorBoards[index].tcx = ele.tcx;
colorBoards[index].name = ele.name;
});
this.store.commit("setColorboardList", colorBoards);
resolve();
}
})
.catch((res) => {
reject();
});
});
},
//完成
async finishCollection(){
this.isShowMark = true
this.store.commit('clearAllId')
this.$emit('finishCollection')
await this.getPantongName()
this.store.commit("setAllBoardData");
let sketchList = this.store.state.UploadFilesModule.sketchboard
let arr:any = []
sketchList.forEach((item:any) => {
@@ -299,12 +343,14 @@ export default defineComponent({
}
arr.push(obj)
});
let data = {sketchBoards:arr}
// let data = {sketchBoards:arr}
let data = this.getDesignData(-1)
data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
if(!await this.isPinOpen(sketchList)){
this.isShowMark = false
return
}
let elList = document.querySelectorAll('.img_block_item_sketch img')
Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
.then((rv: any) => {
@@ -314,7 +360,6 @@ export default defineComponent({
GO.id = 0
this.showCollectionModal =false
this.collectionStep = 1
this.$emit('finishCollection')
if(this.driver__.driver){
driverObj__.moveNext()
}

17
src/component/HomePage/generalMenu.vue
View File

@@ -1,17 +1,21 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1">
<a-popover>
<a-popover v-if="isCanvas">
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
</template>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
<div v-else>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</div>
</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
<a-popover placement="right">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
@@ -37,7 +41,10 @@
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</a-popover>
<div v-else>
<span v-if="item.label">{{ item.label }}</span>
<span v-else>{{ item.name }}</span>
</div>
</li>
</ul>
</div>
@@ -64,6 +71,10 @@ import { message, Upload, Modal } from "ant-design-vue";
type:Boolean,
default:false,
},
isCanvas:{
type:Boolean,
default:false,
},
deleteItem:{
type:Number,
default:-1

11
src/component/HomePage/layout.vue
View File

@@ -140,9 +140,7 @@ export default defineComponent({
let layoutList:any = ref([])
const content:any = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
let styleObj:any = computed(()=>{
return store.state.UploadFilesModule.moodboardPosition
})
let styleObj:any = {}
let moodItemScale = ref(0)
let domObj = {
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
@@ -692,6 +690,7 @@ export default defineComponent({
methods: {
init(){
let parentList:any = this.$parent
this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
parentList = parentList.layoutList
this.layout = true
// let layoutList = this.store.state.UploadFilesModule.moodboard
@@ -756,7 +755,7 @@ export default defineComponent({
zIndex: obj['z-index']?obj['z-index']:1
}
});
const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
GO.zIndex = sortedNums.length + 1
// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
@@ -817,8 +816,9 @@ export default defineComponent({
//提交模板
submitTemplate() {
this.loadingShow = true
this.setDomStyle()
this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
@@ -841,7 +841,6 @@ export default defineComponent({
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
this.setDomStyle()
}
).catch(rv=>{

50
src/component/HomePage/scaleImage.vue
View File

@@ -110,7 +110,7 @@
</div>
</div>
</div>
<div class="scaleImage_nav" @keydown="handleKeyDown">
<div class="scaleImage_nav">
<div class="nav_left">
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
</div>
@@ -163,7 +163,7 @@ export default defineComponent({
},
setup(props:any,{emit}) {
const store = useStore();
let {t} = useI18n()
let productimg = reactive({
isProductimg:false,
productimgSearchName:'',
@@ -301,12 +301,34 @@ export default defineComponent({
});
}
}
let submitBase64Data = (rv:any)=>{
let submitBase64Data = async (rv:any)=>{
loadingShow.value = true
let isOverlay = false
await new Promise<void>((resolve, reject) => {
Modal.confirm({
title: t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve()
isOverlay = true
},
onCancel(){
isOverlay = false
resolve()
}
});
})
let data = {
"base64": rv,
"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
"gender": props.workspace.sexEnum.value,
"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
"isOverride":isOverlay,
}
Https.axiosPost(Https.httpUrls.modifySketch, data).then(
(rv) => {
@@ -314,25 +336,9 @@ export default defineComponent({
rv.status = 'Success'
rv.category = scaleImageList.value[scaleImageIndex.value]?.category
rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
delete rv.url
Modal.confirm({
title: useI18n().t('scaleImage.overlayOrNot'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
scaleImageList.value[scaleImageIndex.value] = rv
loadingShow.value = false
scaleImage.value = false
},
onCancel(){
scaleImageList.value.unshift(rv)
loadingShow.value = false
scaleImage.value = false
}
});
isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
loadingShow.value = false
scaleImage.value = false
}
).catch(res=>{
loadingShow.value = false

122
src/component/modules/generalCanvas.vue
View File

@@ -1,20 +1,23 @@
<template>
<div class="generalCanvas">
<div class="generalCanvas_left">
<label>
<div class="label_item">
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
</label>
</div>
<div class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div class="labelHover_show exportCanvasBox_imgbor">
<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
</div>
</div>
<div class="label_item" v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
</div>
<div class="label_item" v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@@ -24,8 +27,8 @@
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
</div>
<div class="label_item texture" v-show="operation == 'texture'">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@@ -35,15 +38,15 @@
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
</div>
<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="generalCanvas_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
</div>
<div class="label_item" v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="generalCanvas_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -51,8 +54,8 @@
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
</div>
<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@@ -62,7 +65,7 @@
{{item.name}}
</a-select-option>
</a-select>
</label>
</div>
</div>
</div>
@@ -83,10 +86,10 @@
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<div class="label_item uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
</div>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
@@ -100,7 +103,7 @@
</div>
</template>
<script>
import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -759,31 +762,40 @@ export default defineComponent({
let setTimeOut = {
color:null,
width:null,
colorHistory:null,
}//给切换颜色设置防抖
let colorHistoryList = ref(['rgb(0, 0, 0)'])
let setColorHistory = (value)=>{
canvasPencilColor.value = value
pencilColor()
}
let pencilColor = ()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
if(createText.set){
setFontFamily()
return
}
// brushIndicator.fill = canvasPencilColor.value;
if(canvas.freeDrawingBrush.isEraser){
}else{
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
}else if(brushworkValue.value == 'InkBrush'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.2);
}else{
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
},100)
pencilColor()
},200)
setTimeOut.colorHistory = setTimeout(()=>{
colorHistoryList.value.push(canvasPencilColor.value)
},1000)
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.width)
@@ -1000,6 +1012,9 @@ export default defineComponent({
fontFamily.value = arr[0].value
init()
});
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
return {
toSvg,
t,
@@ -1029,6 +1044,8 @@ export default defineComponent({
canvasPencilWidth,//input选择宽度
setAllSelectWidth,//多选设置宽度
allSelectWidth,//多选设置宽度的值
colorHistoryList,//历史颜色
setColorHistory,//设置历史颜色
setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
brushworkChange,//切换笔触的回调
@@ -1173,7 +1190,7 @@ export default defineComponent({
align-items: flex-start;
position: relative;
flex-direction: row;
>label{
>.label_item{
width: 20%;
}
.generalCanvas_title {
@@ -1273,8 +1290,29 @@ export default defineComponent({
flex: 1;
margin-left: 8rem;
display: flex;
label{
.label_item{
margin-right: 2rem;
position: relative;
.labelHover_show{
position: absolute;
width: 100%;
height: 10rem;
top: 100%;
z-index: 2;
flex-wrap: wrap;
div{
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-bottom: 1rem;
cursor: pointer;
}
}
}
.label_item:hover{
.labelHover_show{
display: flex;
}
}
}
.generalCanvas_left_tool_item{

6
src/component/modules/generalMiniCanvas.vue
View File

@@ -30,7 +30,7 @@
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import { setCookie, getCookie } from "@/tool/cookie";
@@ -98,6 +98,9 @@ export default defineComponent({
onMounted(()=>{
init()
})
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
@@ -460,6 +463,7 @@ export default defineComponent({
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
&:hover{

2
src/store/uploadFile/uploadFile.ts
View File

@@ -61,6 +61,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
},
setDisposeMoodboardPosition(state,files){
state.moodboardPosition = files
console.log(state.moodboardPosition);
},
setMoodboardGenerateFiles(state,files){
state.moodboardGenerateFiles = files

3
src/tool/canvasGeneral.js
View File

@@ -104,7 +104,6 @@ class myCanvas {
this.canvas.on("object:added", (event)=>{
if(!this.isLoadCanvas)this.updateCanvasState('')
});
return this.canvas
}
@@ -135,10 +134,8 @@ class myCanvas {
canvasClear(){
let oldCanvasDom = this.canvasDomParent.querySelector('.canvas-container')
let oldCanvasDom1 = this.canvasDomParent.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
document.removeEventListener("keydown", this.canvasKeyDown);
document.removeEventListener("keyup", this.canvasKeyUp);

1
src/tool/domTurnImg.js
View File

@@ -30,7 +30,6 @@ function base64ToFile(base64,filename) {
// 创建 File 对象
const file = new File([byteArray], filename, { type: 'image/jpeg' }); // 根据需要的类型进行修改
console.log(file);
return file;
}
//base64转成blob

5
src/tool/webSocket.js
View File

@@ -7,7 +7,6 @@ class MyWs {
this.messageUrl = http+'/notification'
}
linkWs(url) {
console.log(this.ws && this.ws.readyState == 1);
if (this.ws && this.ws.readyState == 1) return
this.ws = new WebSocket(url)
this.ws.onmessage = (e)=>{
@@ -17,14 +16,11 @@ class MyWs {
console.error('websocket',error)
}
}
console.log(this.ws);
}
static receiveText(data,call){
console.log('receive',data);
MyEvent.emit('getMessage',data)
}
sendMessage(data) {
console.log(this);
if (this.ws && this.ws.readyState == 1) {
let obj = {
cmd: 1,
@@ -50,7 +46,6 @@ class MyWs {
}
}
send(obj) {
console.log(2323);
this.ws.send(JSON.stringify(obj))
}
close(){

3
src/views/HomeMain.vue
View File

@@ -596,7 +596,8 @@ export default defineComponent({
// this.$router.push("/home")
// }
this.store.commit('clearAllData')
window.location.reload()
// window.location.reload()
window.location.href = '/home';
}
}
})

63
src/views/HomeView/HomeView.vue
View File

@@ -195,7 +195,7 @@
</div>
</div>
<KeepAlive>
<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
</KeepAlive>
<productImg ref="productImg" @setTask="setTask"></productImg>
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
@@ -616,53 +616,9 @@ export default defineComponent({
},
//完成设计
finishCollection() {
let _this = this;
_this.isFinishLoading = true;
this.getPantongName()
.then((res) => {
_this.store.commit("setAllBoardData");
_this.isHaveReviewCollection = true;
_this.isFinishLoading = false;
})
.catch((res) => {
_this.isFinishLoading = false;
});
this.isHaveReviewCollection = true;
this.isFinishLoading = false;
},
//查询颜色的潘通值和txc
getPantongName() {
let colorBoards = this.store.state.UploadFilesModule.colorBoards;
let data: any = [];
for (let v of colorBoards) {
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
let hsv = rgbToHsv(color);
v.hsv = hsv[0] + hsv[1] + hsv[2];
data.push({
h: hsv[0],
s: hsv[1],
v: hsv[2],
});
}
return new Promise((resolve: any, reject: any) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv: any) => {
if (rv) {
rv.forEach((ele: any, index: number) => {
colorBoards[index].id = ele.id;
colorBoards[index].tcx = ele.tcx;
colorBoards[index].name = ele.name;
});
this.store.commit("setColorboardList", colorBoards);
resolve();
}
})
.catch((res) => {
reject();
});
});
},
getContainer() {
return document.querySelector("#system_silder");
},
@@ -781,11 +737,16 @@ export default defineComponent({
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:this.designRandom
};
if (designCollectionId) {
let isLoad = false
if(designCollectionId == -1){
isLoad = true
} else if (designCollectionId) {
data.collectionId = designCollectionId;
}
this.designProgress = 0;
this.showDesignMark = true;
if(!isLoad){
this.designProgress = 0;
this.showDesignMark = true;
}
return data;
},
@@ -1001,7 +962,7 @@ export default defineComponent({
name:data.collection.moodTemplateName,
}
}]:[],
moodboardPosition:data.collection.moodboardPosition?data.collection.moodboardPosition:{},
moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
moodboardFiles: this.dealViewChooseData(
data.collection.moodBoards,"Moodboard"
),

2
src/views/HomeView/history.vue
View File

@@ -324,8 +324,6 @@ export default defineComponent({
this.store.commit("setAllBoardDataChoose",{});
this.store.commit("clearShowSketchboard",{});
}
console.log(this.store.state.HomeStoreModule.userGroupId,record);
}
);
}

242
src/views/emailVerify.vue
View File

@@ -1,32 +1,33 @@
<template>
<div class="emailVerify" :class="{'active': forbid}">
<div class="emailVerify">
<main class="main">
<h1 id="title">Welcome</h1>
<p id="description" v-if="!forbid">Please take the survey</p>
<div class="survey-form">
<h1 id="title"><span>√</span>邮箱修改成功</h1>
<div class="text">
<p id="description">您的新邮箱为：*********************</p>
</div>
<div class="mark_loading" v-show="!isSucceed">
</div>
</div>
</main>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
setup() {
const route = useRoute();
let feedbackData:any = reactive({
userName:'',
gender:'Female',
occupation:'',
country:'',
email:'',
age:'20-30',
helpful:[],
improve:[],
isSubscribe:'',
reasonForNotSubscribe:[],
designTools:'',
isShowMark:false,
isSucceed:false,
});
let setSubmit = (value:any)=>{
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
@@ -36,12 +37,10 @@ export default defineComponent({
).catch(res=>{
});
}
let forbid = ref(false)
return {
...toRefs(feedbackData),
setSubmit,
forbid,
};
},
@@ -63,73 +62,58 @@ export default defineComponent({
text-align: center;
line-height: 1.5;
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
margin: 1rem;
height: 100%;
overflow-y: auto;
&.active{
#title {
font-size: 3rem;
}
#description {
font-size: 1.4rem;
}
#survey-form {
width: 90%;
padding: 1.5rem;
font-size: 1.2rem;
}
p{
font-size: 1.4rem;
}
input,
#dropdown {
padding: 5px;
}
textarea {
max-height: 125px;
padding: 5px;
}
input[type="radio"],
input[type="checkbox"] {
width: 1rem;
height: 1rem;
}
input,select{
height: 3.5rem;
}
*{
padding: 0;
margin: 0;
}
.main{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
padding: 2rem;
// background: #f5f5f5;
width: 100vw;
height: 100vh;
}
#title {
font-size: 6rem;
margin: 0;
font-weight: 900;
}
#description {
font-size: 2.8rem;
font-style: italic;
}
#survey-form {
position: relative;
background: rgba(255, 255, 255, 0.2);
width: 60%;
left: 50%;
transform: translateX(-50%);
text-align: left;
border-radius: 15px;
padding: 3rem;
box-shadow: -1px 1px 5px 0.5px;
font-size: 2.4rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&.active{
transition: width 1s ease;
#title{
display: flex;
align-items: center;
span{
background: #39215b;
width: 8rem;
height: 8rem;
border-radius: 50%;
color: #fff;
display: block;
font-size: 6rem;
line-height: 8rem;
text-align: center;
margin: 10px;
}
}
.survey-form {
position: relative;
background: rgba(255, 255, 255);
width: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2.4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 2rem;
padding: 4rem 0;
.mark_loading{
background: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
}
@@ -138,117 +122,9 @@ export default defineComponent({
width: 75%;
}
}
h2 {
width: 100%;
font-weight: 900;
}
.section {
display: flex;
flex-direction: column;
margin: 1rem;
width: 100%;
}
.section:last-child{
margin-bottom: 4rem;
}
.w40 {
width: 40%;
}
.fontColor{
color: rgb(255, 2, 2);
}
p{
font-size: 2.8rem;
}
p,
label {
font-weight: bold;
margin: 0;
margin-left: 5px;
}
input,
#dropdown {
border: none;
border-radius: 5px;
padding: 10px;
outline: 0;
}
input:focus,
#dropdown:focus {
border: 2px solid rgb(173, 173, 173);
}
input,select{
height: 7rem;
}
input,
button,
select,
textarea {
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
input[type="radio"],
input[type="checkbox"] {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: middle;
margin: 0;
}
label{
vertical-align: baseline;
cursor: pointer;
.others-input{
background: rgba(255, 255, 255, 0);
border-top: none;
border-right: none;
border-left: none;
border-radius: 0;
border-bottom: 2px solid;
}
.others-input:focus{
border: none;
border-bottom: 2px solid;
}
span{
vertical-align: top;
}
textarea{
width: 80%;
vertical-align: top;
margin-left: 1rem;
}
}
textarea {
min-height: 75%;
max-height: 250px;
width: 100%;
resize: vertical;
border: none;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
#submit {
background: green;
background: #39215b;
border: none;
border-radius: 10px;
color: white;
font-size: 3rem;
transition: all 0.3s ease-in;
}
#submit:hover {
background: darkgreen;
background: #543087;
}
}
</style>