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-03 16:39:06 +08:00
parent eb54023940 d840d3de35
commit d7a57a39ee
54 changed files with 1298 additions and 723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<div class="account_page_content">
<div class="account_page_content_left">
<div class="content_left_item">
<div>个人中心</div>
<div>{{$t('account.personCentered')}}</div>
</div>
<!-- {{ router.path }} -->
<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
@@ -42,25 +42,27 @@ export default defineComponent({
components:{
},
setup() {
const {t} = useI18n()
const store = useStore();
let accountHomeData = reactive({
rootSubmenuKeys:[
{
name:'首页',
name:t('account.Home'),
route:'/home/account/accountHome',
icon:'fi-rr-house-chimney'
},{
name:'我的信息',
name:t('account.myInformation'),
route:'/home/account/accountEdit',
icon:'fi-rr-user'
},{
name:'消息中心',
name:t('account.Messages'),
route:'/home/account/accountMessage',
icon:'fi-rr-envelope'
},{
name:'关注&粉丝',
name:`${t('account.Follow')} ${t('account.Fans')}`,
route:'/home/account/accountFollowFans',
icon:'fi-rr-envelope'
icon:'fi-rr-users-alt'
},
]
})
@@ -119,6 +121,7 @@ export default defineComponent({
height: 10rem;
color: #232323;
div{
white-space: nowrap;
width: 15rem;
color: #232323;
text-align-last: justify;

6
src/component/Account/accountEdit.vue
View File

@@ -25,20 +25,20 @@
</div>
<div class="accountEdit_page_body">
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">用户名:</div>
<div class="accountEdit_page_body_item_name">{{$t('account.userName')}}:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text" disabled :value="cookieUserInfo.userName">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="accountEdit_page_body_item_name">邮箱:</div>
<div class="accountEdit_page_body_item_name">{{$t('account.email')}}:</div>
<div class="accountEdit_page_body_item_inut">
<input type="text" disabled :value="cookieUserInfo.email">
</div>
</div>
<div class="accountEdit_page_body_item">
<div class="started_btn" @click="setSubmit">
Submit
{{$t('account.Submit')}}
</div>
</div>
</div>

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

@@ -2,9 +2,9 @@
<div class="account_followFans">
<div class="account_followFans_title modal_title_text">
<div class="">
互动
{{$t('account.Interact')}}
</div>
<div class="account_followFans_title_setting">设置</div>
<!-- <div class="account_followFans_title_setting">设置</div> -->
</div>
<a-tabs class="account_followFans_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in messageList" :key="item.key">
@@ -53,14 +53,15 @@ export default defineComponent({
setup() {
const router = useRouter()
const store = useStore();
const {t} = useI18n()
let accountMessage = reactive({
messageList:[
{
title:'关注的人',
title:t('account.Follow'),
key:'follow',
},
{
title:'粉丝',
title:t('account.Fans'),
key:'fans',
},

12
src/component/Account/accountHome.vue
View File

@@ -9,24 +9,24 @@
<div class="content_item_user_left_detail">
<div class="modal_title_text">
<div>{{ cookieUserInfo.userName }}</div>
<div class="modal_title_text_assistant"><span>邮箱: </span>{{ cookieUserInfo?.email }}</div>
<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
</div>
<div class="content_item_user_left_detail_bottom">
<div>
<span>关注：</span>{{ userInfo?.followeeCount }}
<span>{{$t('account.Follow')}}：</span>{{ userInfo?.followeeCount }}
</div>
<div>
<span>粉丝：</span>{{ userInfo?.followerCount }}
<span>{{$t('account.Fans')}}：</span>{{ userInfo?.followerCount }}
</div>
</div>
</div>
</div>
<div class="content_item_user_right">
<div @click="setUserData">修改资料</div>
<div @click="setUserData">{{$t('account.editUser')}}</div>
</div>
</div>
<div class="content_item content_item_task">
<div class="content_item_title">
<!-- <div class="content_item_title">
<i>icon</i>
<div>每日奖励</div>
</div>
@@ -55,7 +55,7 @@
20 Credits 到手
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>

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

@@ -2,9 +2,9 @@
<div class="account_message">
<div class="account_message_title modal_title_text">
<div class="">
消息中心
{{$t('account.Messages')}}
</div>
<div class="account_message_title_setting">设置</div>
<!-- <div class="account_message_title_setting">设置</div> -->
</div>
<a-tabs class="account_message_body" v-model:activeKey="activeKey" @change="changeTabs">
<a-tab-pane v-for="item in messageList" :key="item.key">
@@ -61,12 +61,13 @@ export default defineComponent({
comment,
},
setup() {
const {t} = useI18n()
const router = useRouter()
const store = useStore();
let accountMessage = reactive({
messageList:[
{
title:'系统消息',
title:t('account.systemMessages'),
key:'system',
},
// {
@@ -74,13 +75,13 @@ export default defineComponent({
// key:'privateChat',
// },
{
title:'评论',
title:t('account.comment'),
key:'comment',
},{
title:'点赞',
title:t('account.like'),
key:'like',
},{
title:'新增粉丝',
title:t('account.NewFans'),
key:'follow',
},
// {
@@ -148,8 +149,6 @@ export default defineComponent({
Https.axiosPost(url,data).then((rv)=>{
if(rv){
// domRefs[data.type][0].setmessageList(rv,data)
console.log(rv);
resolve(rv)
}
}).catch((err)=>{

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

@@ -25,7 +25,7 @@
</div>
</div>
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
没有任何信息~
{{$t('account.dataNull')}}
</div>
<div class="page_loading_box" v-show="!getListData.isNoData">
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>

6
src/component/Account/message/comment.vue
View File

@@ -2,7 +2,7 @@
<div class="account_comment">
<div class="account_generalMessage_title modal_title_text">
<!-- <span>收到的评论</span> -->
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
</div>
<div class="account_generalMessage_center modal_title_text">
@@ -13,7 +13,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>回复你的作品</span></div>
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.reply')}}</span></div>
<div class="account_generalMessage_item_right_title_center modal_title_text_assistant">{{ item.content }}</div>
<div class="account_generalMessage_item_right_works modal_title_text_intro" @click.stop="openOtherWork(item)">{{ item.portfolioName }}</div>
</div>
@@ -26,7 +26,7 @@
</div>
</div>
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
没有任何信息~
{{$t('account.dataNull')}}
</div>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>

6
src/component/Account/message/likeMessage.vue
View File

@@ -2,7 +2,7 @@
<div class="account_like">
<div class="account_generalMessage_title modal_title_text">
<!-- <span>点赞</span> -->
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
</div>
<div class="account_generalMessage_center modal_title_text">
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
@@ -12,7 +12,7 @@
<img :src="item.avatar" alt="">
</div>
<div class="account_generalMessage_item_right_title">
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>攒了你的作品</span></div>
<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.likedYourWork')}}</span></div>
<div>{{ item.portfolioName }}</div>
</div>
</div>
@@ -24,7 +24,7 @@
</div>
</div>
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
没有任何信息~
{{$t('account.dataNull')}}
</div>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>

6
src/component/Account/message/newFollow.vue
View File

@@ -2,7 +2,7 @@
<div class="account_newFollow">
<div class="account_generalMessage_title modal_title_text">
<!-- <span>新增粉丝</span> -->
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
</div>
<div class="account_generalMessage_center modal_title_text">
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
@@ -13,7 +13,7 @@
</div>
<div class="account_generalMessage_item_right_title">
<div class="">{{ item.userName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
<div class="modal_title_text_intro">{{ item.createTime }} {{$t('account.followedYou')}}</div>
</div>
</div>
<div class="account_generalMessage_item_left">
@@ -22,7 +22,7 @@
</div>
</div>
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
没有任何信息~
{{$t('account.dataNull')}}
</div>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>

4
src/component/Account/message/system.vue
View File

@@ -2,7 +2,7 @@
<div class="account_systemMessage">
<div class="account_generalMessage_title modal_title_text">
<!-- <span>系统消息</span> -->
<div class="account_generalMessage_title_setting" @click="allRead">全部已读</div>
<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
</div>
<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
<a-badge :dot="item.isRead == 0"></a-badge>
@@ -16,7 +16,7 @@
</div>
</div>
<div class="account_generalMessage_item modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
没有任何信息~
{{$t('account.dataNull')}}
</div>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>

10
src/component/Administrator/allUser.vue
View File

@@ -155,15 +155,19 @@ import {
onMounted,
} from "vue";
import { formatTime } from "@/tool/util";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import allUserPoerationsVue from "./allUserPoerations.vue";
export default defineComponent({
components: {allUserPoerationsVue,},
setup() {
const store:any = useStore()
let filter: any = reactive({
dataList: [],
tableLoading: false,
allUserList: [],
allUserList: computed(()=>{
return store.state.adminPage.allUserList
}),
allCountry:[]
});
let filterData: any = reactive({
@@ -478,10 +482,6 @@ export default defineComponent({
allUserPoerationsVue.value.init('Edit',data)
}
onMounted(() => {
let allUserList: any = sessionStorage.getItem("allUserList");
if (allUserList) {
filter.allUserList = JSON.parse(allUserList);
}
let allCountry: any = sessionStorage.getItem("allCountry");
if (allCountry) {
filter.allCountry = JSON.parse(allCountry);

20
src/component/Administrator/recentActiveChart.vue
View File

@@ -60,13 +60,17 @@ import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { useStore } from "vuex";
import { CanvasRenderer } from 'echarts/renderers';
export default defineComponent({
components: {
},
setup() {
const store:any = useStore()
let filter:any = reactive({
dataList:[],
dataList:computed(()=>{
return store.state.adminPage.allUserList
}),
})
let filterData:any = reactive({
@@ -77,19 +81,6 @@ export default defineComponent({
let searchHistoryList = ()=> {
gettrialList();
}
let getUserIDName = ()=>{
let allUserList:any = sessionStorage.getItem('allUserList');
if(allUserList){
filter.dataList = JSON.parse(allUserList)
}
// Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
// if (rv) {
// let username = sessionStorage.getItem('allUserList');
// sessionStorage.setItem('allUserList',rv);
// filter.dataList = rv
// }
// })
}
//获取列表
let gettrialList = async () =>{
filter.tableLoading = true
@@ -203,7 +194,6 @@ export default defineComponent({
}
onMounted(()=>{
lastGeTrialList('month')
getUserIDName()
})
return {
...toRefs(filter),

10
src/component/Administrator/trialAllUser.vue
View File

@@ -94,15 +94,19 @@
<script lang="ts">
import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue";
import { formatTime } from "@/tool/util";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
export default defineComponent({
components: {
},
setup() {
const store:any = useStore()
let filter:any = reactive({
dataList:[],
tableLoading:false,
allUserList: [],
allUserList: computed(()=>{
return store.state.adminPage.allUserList
}),
allCountry:[]
})
let filterData:any = reactive({
@@ -261,10 +265,6 @@ export default defineComponent({
gettrialList();
}
onMounted(()=>{
let allUserList: any = sessionStorage.getItem("allUserList");
if (allUserList) {
filter.allUserList = JSON.parse(allUserList);
}
let allCountry: any = sessionStorage.getItem("allCountry");
if (allCountry) {
filter.allCountry = JSON.parse(allCountry);

10
src/component/Detail/DesignDetail.vue
View File

@@ -59,7 +59,7 @@
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i v-show="!body" class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>
@@ -470,6 +470,9 @@ export default defineComponent({
}else{
this.designShowPrview = 1;
this.frontBack = {}
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
setDesignItem.clear()
// this.designItemDetailUrl = {}
}
},
@@ -741,6 +744,8 @@ export default defineComponent({
changed:item.changed?item.changed:false,
designType:item.designType?item.designType:"Library",
offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
maskMinioUrl:item.layersObject[1].maskMinioUrl,
maskUrl:item.layersObject[1].maskUrl,
scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
printObject:{
// path:item.printObject.path?item.printObject.path :'',
@@ -937,6 +942,7 @@ export default defineComponent({
designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
this.current.path = rv.clothes[this.currentIndex].minIOPath
designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
designItemDetail.clothes[this.currentIndex].layersObject = rv.clothes[this.currentIndex].layersObject
designItemDetail.clothes[this.currentIndex].sketchString = ''
data.designSingleItemDTOList[this.currentIndex].sketchString =''
data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
@@ -1088,6 +1094,8 @@ export default defineComponent({
designType:this.current.designType?this.current.designType:'Library',
path:this.current.minIOPath?this.current.minIOPath:'',
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
maskMinioUrl:this.current.layersObject[1].maskMinioUrl,
maskUrl:this.current.layersObject[1].maskUrl,
priority:this.current.priority,
trims:this.current.trims,
scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],

3
src/component/Detail/DesignElements.vue
View File

@@ -49,7 +49,8 @@
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designElements_sketch">
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
<div class="designElements_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>

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

@@ -49,7 +49,8 @@
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designElementsMobile_sketch">
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
<div class="designElementsMobile_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
@@ -491,7 +492,7 @@ export default defineComponent({
// let num = this.sketch/
return new Promise(async (resolve, reject) => {
let arr = JSON.parse(JSON.stringify(this.printStyleList))
let sketch = document.getElementsByClassName("designElements_sketch")[0]
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
let prints = []
let scale
@@ -833,8 +834,8 @@ export default defineComponent({
li{
cursor: pointer;
// border-radius: 50%;
width: calc(1rem*1.2);
height: calc(1rem*1.2);
width: calc(2.5rem*1.2);
height: calc(2.5rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;

4
src/component/Detail/DesignPrintOperation.vue
View File

@@ -63,6 +63,7 @@
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
@@ -366,10 +367,9 @@ export default defineComponent({
})
},
systemDesigner(num) {
},
formatter(value) {
return `${value*3}%`;
return `${value}%`;
},
setOveralSingle(){

11
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -65,7 +65,8 @@
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">Scale</div>
<a-slider id="system_silder"
:min="1"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
@@ -366,11 +367,9 @@ export default defineComponent({
})
},
systemDesigner(num) {
let DesignPrintOperationParent = this.$parent
DesignPrintOperationParent.systemDesignerPercentage = num
},
formatter(value) {
return `${value*3}%`;
return `${value}%`;
},
setOveralSingle(){
@@ -808,14 +807,13 @@ export default defineComponent({
index = ind
}
})
this.designOpenrtion = false
if(this.designItemDetailTS.rv){
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
designItemDetail.clothes[index].printObject.prints = this.setOkData
// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
designItemDetail.ifSubmit = true
designItemDetail.clothes.forEach((item,i)=>{
let a
@@ -832,6 +830,7 @@ export default defineComponent({
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
this.designItemDetailTS = {}
}
this.designOpenrtion = false
if(this.driver__.driver){
nextTick(()=>{
driverObj__.moveNext();

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

@@ -290,6 +290,7 @@ export default defineComponent({
if(str != 'mouseUp'){
canvas.remove(brushIndicator)
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
@@ -344,7 +345,7 @@ export default defineComponent({
top:item.top*scale,
}
)
exportCanvas.add(obj)
Z exportCanvas.add(obj)
if(allObjects.length-1 == index){
let data = exportCanvas.toDataURL('jpg')
cancelDsign()

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

@@ -10,6 +10,8 @@
<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>
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
<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 @click="setSubmit">保存</div>
@@ -48,9 +50,8 @@ export default defineComponent({
// return props.patchData
// })
watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
if(newVal == -1) return
imgDomIndex = newVal
console.log(newVal,oldVal)
console.log(props.patchData);
props.patchData.front.imageUrl= ''
init(props.patchData.front[newVal],'')
})
@@ -112,8 +113,8 @@ export default defineComponent({
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.imageUrl
fabric.Image.fromURL(data.imageUrl, function(img) {
exportUrl = data.maskUrl
fabric.Image.fromURL(data.maskUrl, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);;
@@ -133,24 +134,29 @@ export default defineComponent({
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
loadingShow.value = false
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
console.log(event);
if(canvasBtn.canvasState != 'move'){
updateCanvasState('mouseUp')
}
});
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.add(brushIndicator)
canvas.on("mouse:down", event=>brushIndicator.bringToFront());
canvas.on('object:added', function() {
brushIndicator.bringToFront();
});
setOperation('pencil')
createSetTimeSubmit()
img.remove()
}
img.src = data.imageUrl
img.src = data.maskUrl
})
}
@@ -171,13 +177,20 @@ export default defineComponent({
})
}
let setClone = ()=>{
// canvasBtn.canvasState = 'move'
// canvasBtn.spreadState = false
let canvasBox = document.querySelector(".exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let rgba = ref('rgb(255,0,0)')
let brushIndicator = new fabric.Circle({
radius:2,
fill: 'rgba(0, 0, 0, 0)',
@@ -205,6 +218,7 @@ export default defineComponent({
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
brushIndicator.bringToFront()
}
canvas.requestRenderAll()
}
@@ -216,12 +230,18 @@ export default defineComponent({
}else if(str == 'pencil'){
setPencil()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}else if(str == 'eraser'){
setEraser()
rgba.value = ''
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
}
}
let setOperationColor = (color)=>{
brushIndicator.set({fill: color});
rgba.value = color
canvas.freeDrawingBrush.color = color
setOperation('pencil')
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
@@ -230,8 +250,8 @@ export default defineComponent({
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
canvas.freeDrawingBrush.color = rgba.value
brushIndicator.set('fill',rgba.value)
canvas.freeDrawingBrush.isEraser = false
}
let setEraser = ()=>{
@@ -265,10 +285,20 @@ export default defineComponent({
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
},300)
}
let setTimeSubmit = null
let createSetTimeSubmit = ()=>{
clearTimeout(setTimeSubmit)
setTimeSubmit = setTimeout(()=>{
setSubmit()
},1000)
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
canvas.remove(brushIndicator)
}else{
createSetTimeSubmit()
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
@@ -287,19 +317,9 @@ export default defineComponent({
return
}
canvas.loadFromJSON(canvasState.value, () => {});
createSetTimeSubmit()
}
let setSubmit = ()=>{
let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
let size = {
width: exportWH * ratio[0],
height: exportWH * ratio[1],
}
segmentImage(mark,full,size).then((rv)=>{
console.log(rv);
})
return
var allObjects = canvas.getObjects('path');
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
@@ -337,10 +357,21 @@ export default defineComponent({
let data = exportCanvas.toDataURL('png')
cancelDsign()
clearCanvas()
// props.props.patchData.front[imgDomIndex].imageUrl = data
let mark = data
let full = props.patchData.front[imgDomIndex].undividedLayer
let size = {
width: Math.round(exportWH * ratio[0]),
height: Math.round(exportWH * ratio[1]),
}
console.log(data);
props.patchData.front[imgDomIndex].imageUrl = data
// emit('setSloganData',data)
segmentImage(mark,full,size).then((rv)=>{
// console.log(rv.targetFrontUrl,rv.targetBackUrl)
props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
props.patchData.front[imgDomIndex].maskUrl = data
})
return
})
}
let cancelDsign = ()=>{
@@ -352,11 +383,14 @@ export default defineComponent({
loadingShow,
t,
...toRefs(canvasBtn),
rgba,
init,
setOperation,
setOperationColor,
setPencilWidth,
historyState,
setSubmit,
setClone,
cancelDsign,
};
},
@@ -387,13 +421,15 @@ export default defineComponent({
display: flex;
border: 0.2rem solid #c4c4c4;
width: 25rem;
width: 35rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
align-items: center;
.editFrontBack_center_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.exportCanvasBox_center{
@@ -433,6 +469,24 @@ export default defineComponent({
display: block;
}
}
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
width: 4rem;
height: 2rem;
border-radius: 4px;
margin: 0 .5rem;
cursor: pointer;
padding: .5rem 1;
&.active{
border: 2px solid;
border-radius: .4rem;
}
}
.editFrontBack_center_btn_colorRed{
background: rgba(255,0,0);
}
.editFrontBack_center_btn_colorGreen{
background: rgba(0,255,0);
}
i{
font-size: 2.5rem;
cursor: pointer;

39
src/component/Detail/setDesignItem.vue
View File

@@ -3,7 +3,7 @@
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="detail_modal_body_title">
<div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpenItem}" @click="clothesOpen(index)">
<img :src="item?.path" alt="">
</div>
</div>
@@ -42,7 +42,7 @@
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
</div>
<div class="design_compile_content">
<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex"></editFrontBack>
<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
</div>
</template>
@@ -92,9 +92,10 @@ export default defineComponent({
]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(2)
let imgDomIndex = ref(-1)
let frontBack = ref({})
let frontBackOld = ref({})
let editFrontBack = ref(null)
return {
designItemDetail,
current,
@@ -106,6 +107,7 @@ export default defineComponent({
frontBack,
setRevocation,
frontBackOld,
editFrontBack,
};
},
data() {
@@ -156,7 +158,7 @@ export default defineComponent({
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
let body = {}
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
@@ -185,11 +187,12 @@ export default defineComponent({
front[index] = v.layersObject[i]
front[index].style.zIndex = v.priority
front[index].id = v.id
front[index].undividedLayer = v.undividedLayer
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = v.priority
back[index].id = v.id
back[index].undividedLayer = v.undividedLayer
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
if(this.printZIndex < v.priority){
@@ -198,10 +201,13 @@ export default defineComponent({
}
this.printZIndex++
})
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
if(body){
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
}
this.frontBack = {
front:front,
back:back,
@@ -235,6 +241,10 @@ export default defineComponent({
return num
},
clear(){
this.imgDomIndex = -1
console.log(this.editFrontBack);
this.clothesOpenActive(-1)
this.editFrontBack.setClone()
window.removeEventListener('resize', this.setImgSizeTime);
},
setpitch(item,index){
@@ -391,9 +401,11 @@ export default defineComponent({
},
clothesOpenActive(index){
this.designItemDetail.clothes.forEach((item)=>{
item.clothesOpen = false
item.clothesOpenItem = false
})
this.designItemDetail.clothes[index].clothesOpen = true
if(index != -1){
this.designItemDetail.clothes[index].clothesOpenItem = true
}
},
sort(arr){
arr.sort((a, b) => {
@@ -412,15 +424,14 @@ export default defineComponent({
// return a_num - b_num;
// });
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
let num = 10
arr.forEach((item)=>{
item.priority = num++
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
})
let front = arr
let imageCategory1
data.designSingleItemDTOList.forEach((item)=>{
let front = arr
let imageCategory1
if(arr.length > 1){
imageCategory1 = arr[1].imageCategory
}
@@ -435,6 +446,7 @@ export default defineComponent({
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
item.maskUrl = arr[index].maskUrl
item.priority = arr[index].priority
arr[index].similarity = true
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
@@ -445,7 +457,6 @@ export default defineComponent({
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
// return
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.$parent.loadingShow = false

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

@@ -21,14 +21,14 @@
</div> -->
<div class="exportCanvasBox">
<div class="exportCanvasBox_left">
<div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div>
<!-- <div class="exportCanvasBox_title">{{ $t('exportModel.CanvasSize') }}</div> -->
<!-- <label>
<div>Width:</div>
<input type="number" @input="setMaxInput('width', 500)" v-model="canvasWH.width"/>
</label> -->
<label>
<div>{{ $t('exportModel.Height') }}:</div>
<div>{{ $t('exportModel.Height') }}:</div>
<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
</label>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('nav')">
@@ -42,58 +42,47 @@
]"
>
</div>
</div>
<div class="exportCanvasBox_img exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
class="exportCanvasBox_allItem"
v-for="(item,key) in allBoardData"
>
<div class="exportCanvasBox_imgbor exportCanvasBox_left_item" :class="{'closeNav':closeNav.nav}">
<div
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>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div class="exportCanvasBox_item_color" v-if="key == 'colorBoards'" v-for="colorItem in item" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-if="!colorItem.gradient">
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
<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>
<div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
<div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-else>
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
<div>{{colorItem.tcx}}</div>
<div>{{colorItem.name}}</div>
</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
</div>
<div
class="exportCanvasBox_item"
v-for="imgItem in item"
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
</div>
</div>
</div>
</div>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('tool')">
{{ $t('exportModel.CanvasTool') }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.tool?'icon-rotate':''
]"
>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -101,117 +90,108 @@
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i>
</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <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">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <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">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
<div class="exportCanvasBox_operation_bor">
<div class="exportCanvasBox_operation_bor_btn">
<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''" @click.stop="setCloseNav('move')"></i>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label 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 >{{ $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 >{{ $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 >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<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 >{{ $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 >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<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 >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label 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"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <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>
<div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<!-- <div
:class="[
'icon',
'iconfont',
'icon-xiala',
closeNav.move?'icon-rotate':''
]"
>
</div> -->
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<label 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 >{{ $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 >{{ $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 >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<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 >{{ $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 >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<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">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="operation == '' || operation == 'text' || textDataShow">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <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_left_bottom">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<div class="exportCanvasBox_left_btn Guide_1_38">
<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
@@ -219,6 +199,18 @@
<div v-if="isMoible" class="exportCanvasBox_scroll">
<div></div>
</div>
<div class="exportCanvasBox_bottom">
<div class="exportCanvasBox_left_btn Guide_1_38">
<div class="exportCanvasBox_left_credits" v-show="credits<1">
<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
</div>
<!-- <div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div> -->
<div class="subitOkPreviewBtn" @click="setSubmit">{{ $t('exportModel.Save') }}</div>
<div class="subitOkPreviewBtn" @click="setShare">{{ $t('exportModel.Share') }}</div>
<div class="subitOkPreviewBtn" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
</div>
<!-- <div class="exportCanvasBox_right">
<div class="exportCanvasBox_title">
High-definition Download
@@ -363,7 +355,7 @@ export default defineComponent({
let normalCanvasState = ref([])//存放canvas操作
let isLoadCanvas = false//撤回或者反撤回false为撤回
let userlikeGroupId = 0
let imgWidth = {} //这是设置画布等宽
let submitCanvasContent = null
let init = (productData) => {
userlikeGroupId = productData.userlikeGroupId
@@ -393,7 +385,7 @@ export default defineComponent({
height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = clearBrushIndicator()
brushIndicator = createBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
@@ -451,6 +443,9 @@ export default defineComponent({
let data = {
userLikeGroupId:userlikeGroupId
}
arr.forEach((item)=>{
if(item !== 'likeDesignCollectionList')imgWidth[item] = setImageWidth(item)
})
isShowMark.value = true
let oldExportCanvas
let localCanvas = localStorage.getItem('canvasContent')
@@ -486,8 +481,6 @@ export default defineComponent({
});
})
}
console.log(oldExportCanvas);
// arr.forEach((item,index)=>{
if(oldExportCanvas){
canvasWH.value.height = oldExportCanvas.canvasHeight
@@ -500,10 +493,6 @@ export default defineComponent({
for (const key in allBoardData.value) {
if (item == key) {
//循环渲染顺序
let imgWidth //这是设置画布等宽
if(item !== 'likeDesignCollectionList' && item !== 'FinalizeImage'){
imgWidth = await setImageWidth(key);
}
let sketchGroupingItem = [];
if (
item == "moodboardFiles" &&
@@ -530,17 +519,14 @@ export default defineComponent({
resolve();
} else {
let itemCanvasImg = allItem.imgUrl;
if(item == 'FinalizeImage'){
console.log(allItem);
}
if (key == "likeDesignCollectionList") {
itemCanvasImg =
allItem.designOutfitUrl;
}
if(item == 'likeDesignCollectionList' || item == 'FinalizeImage')imgWidth = await setImageWidth(key,itemCanvasImg);
fabric.Image.fromURL(itemCanvasImg,(img) => {
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img);
let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
if(key == "sketchboardFiles"){
if(allItemIndex == 0){
position.x = 0;
@@ -552,7 +538,7 @@ export default defineComponent({
position.y = maxHeight;
}
}
setCanvasImage(img,key,position.x,position.y,allItem,imgWidth)//设置图片
setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
position.height = img.height * scaleWH + margin;
if (key == "sketchboardFiles") {
if (sketchGroupingItem.length <3) {
@@ -612,7 +598,6 @@ export default defineComponent({
}
updateCanvasState('')//加载完成后记录一下
setOperation('move')
closeNav.value.tool = true
submitCanvasContent = setInterval(()=>{
let data = setCanvasContent(true)
if(data.objects.length == 0){
@@ -656,7 +641,7 @@ export default defineComponent({
}
let setImageWidth = async (key,img)=>{
let setImageWidth = (key,img)=>{
let imgWidth = canvasWH.value.width; //这是设置画布等宽
if (
disposeMoodboardShow &&
@@ -679,20 +664,13 @@ export default defineComponent({
(sketchGrouping - 1) * 20) /
sketchGrouping;
}
if (key == "likeDesignCollectionList" || key == 'FinalizeImage') {
if (key == "likeDesignCollectionList") {
if(img){
await new Promise((resolve, reject) => {
let imgObj = new Image();
imgObj.onload = function () {
let height = imgObj.height
imgObj.height = canvasWH.value.width / 4 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
// imgObj.remove()
resolve(imgObj.width)
}
imgObj.src = img;
})
let imgObj = JSON.parse(JSON.stringify(img))
let height = imgObj.height
imgObj.height = canvasWH.value.width / 4 * 1.8
let heightScale = imgObj.height / height
imgWidth = imgObj.width * heightScale
}
// imgWidth =
@@ -702,33 +680,32 @@ export default defineComponent({
}
return imgWidth
}
let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
console.log(img,key,data,imgWidth);
let setCanvasImage = (img,key,left,top,data)=>{
// data
if(key == 'likeDesignCollectionList' || key == 'FinalizeImage')imgWidth = setImageWidth(key,data.designOutfitUrl);
let imgId = 0
let minioUrl = ''//表示收藏或者generate
let imgUrl = data.imgUrl
if (key == "likeDesignCollectionList") {
imgUrl = data.designOutfitUrl;
imgWidth[key] = setImageWidth(key,img);
}
let url = imgUrl.split('?')[0]
var match = url.match(/:(\d+)\/(.*)/);
minioUrl = match[2]
// let id =
let proportion = img.height / img.width; //计算图形宽高比例
// let imgWidth = setImageWidth(key)
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
let scaleWH = imgWidth[key] / img.width; //计算放到画布上缩小倍率
img.set({
// width: imgWidth/img.width,
// width: imgWidth[key]/img.width,
// height: canvasWH.value.height/img.height,
left,
top,
imgId,
minioUrl,
scaleX:
imgWidth / img.width,
imgWidth[key] / img.width,
scaleY:(img.width * proportion * scaleWH) / img.height,
// cornerSize: 10, // 选中时，角的大小为20
// transparentCorners: false, // 选中时，角是被填充了。true 空心；false 实心
@@ -917,12 +894,17 @@ export default defineComponent({
};
let closeNav = ref({
nav:true,
nav:false,
tool:false,
move:false,
})
let setCloseNav = (key)=>{
closeNav.value[key] = !closeNav.value[key]
// for (const iterator in closeNav.value) {
// if(key != iterator){
// closeNav.value[iterator] = false
// }
// }
}
function multiselect() {//获取整体宽高
canvas.discardActiveObject() // 丢弃当前活动的对象和触发事件。 如果fabric作为鼠标事件的结果调用该函数，则将该事件作为参数传递给自定义事件的fire函数。 当作为一个方法使用时，参数没有任何应用。
@@ -1097,7 +1079,8 @@ export default defineComponent({
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
normalCanvasState.value.push(canvasAsJson);
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
normalCanvasState.value.push(canvasAsJson);
if (isLoadCanvas) {
reverseCanvasState.value = []
isLoadCanvas = false;
@@ -1339,7 +1322,7 @@ export default defineComponent({
}
}
let clearBrushIndicator = ()=>{
let createBrushIndicator = ()=>{
let cator = new fabric.Circle({
radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
fill: '#fff',
@@ -2095,13 +2078,19 @@ export default defineComponent({
flex: 1;
// height: 30rem;
// overflow-x: hidden;
.icon{
transition: all .3s;
}
.icon-rotate{
transform: rotate(-180deg);
}
.exportCanvasBox {
flex: 1;
overflow-x: hidden;
display: flex;
margin-top: 2rem;
justify-content: space-between;
flex-direction: column;
.exportCanvasBox_title {
margin-bottom: .5rem;
font-size: 1.8rem;
@@ -2115,12 +2104,8 @@ export default defineComponent({
position: sticky;
background: #f9fafb;
z-index: 2;
.icon{
transition: all .3s;
}
.icon-rotate{
transform: rotate(-180deg);
}
align-items: flex-start;
}
.exportCanvasBox_intro{
margin-bottom: 1rem;
@@ -2130,14 +2115,12 @@ export default defineComponent({
}
.exportCanvasBox_right,
.exportCanvasBox_left {
width: 25rem;
height: 100%;
overflow-x: hidden;
width: 100%;
height: auto;
label {
display: flex;
align-items: center;
margin-bottom: 1rem;
width: 100%;
width: 30%;
div {
width: 8rem;
}
@@ -2165,7 +2148,8 @@ export default defineComponent({
}
.exportCanvasBox_left_item.closeNav{
// max-height: 1000rem;
height: auto;
// height: auto;
display: block;
}
}
.exportCanvasBox_left::-webkit-scrollbar,
@@ -2173,57 +2157,104 @@ export default defineComponent({
.exportCanvasBox_left {
padding-right: 1rem;
margin-right: 2rem;
.exportCanvasBox_left_bottom{
position: sticky;
background: #f9fafb;
z-index: 2;
bottom: -1px;
.exportCanvasBox_left_btn{
display: flex;
justify-content: space-between;
padding-top: 2rem;
flex-wrap: wrap;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 2rem;
width: 40%;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin-left: 1rem;
}
.subitOkPreviewBtn:nth-child(3),.subitOkPreviewBtn:nth-child(4){
margin-bottom: 0;
}
}
// height: 7rem;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
>label{
width: 20%;
}
.exportCanvasBox_title {
padding-right: 2rem;
margin: 0 4rem;
position: relative;
}
.exportCanvasBox_left_item{
overflow: hidden;
transition: all .3s;
// max-height: 0;
height: 0;
transform: translate3d(0, 0, 0);
position: absolute;
}
.exportCanvasBox_img {
.exportCanvasBox_left_item,.exportCanvasBox_imgbor,.exportCanvasBox_operation_bor{
background: #fff;
height: auto;
max-height: 30rem;
border: 1px solid;
display: none;
top: 7rem;
position: absolute;
}
.exportCanvasBox_operation{
left: auto;
right: 0;
z-index: 2;
position: absolute;
top: 7rem;
max-height: 30rem;
height: auto;
border: none;
background: none;
.exportCanvasBox_operation_bor_btn{
// transform: translateX(-100%);
// position: absolute;
border: 1px solid;
cursor: pointer;
width: 4rem;
height: 4rem;
background: #fff;
i{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(90deg);
&.icon-rotate{
transform: rotate(270deg);
}
}
}
.exportCanvasBox_operation_bor{
overflow: hidden;
position: initial;
transform: translateX(calc(100% - 4rem));
display: block;
transition: all .3s;
border: none;
display: flex;
align-items: flex-start;
background: rgba(0, 0, 0, 0);
.exportCanvasBox_operation_bor_item{
background: #fff;
border: 1px solid;
width: 28rem;
}
label{
width: 100%;
}
}
&.closeNav{
.exportCanvasBox_operation_bor{
transform: translateX(0%);
}
}
}
.exportCanvasBox_imgbor {
// height: auto;
width: 20rem;
overflow-y: auto;
padding: 1rem;
&.exportCanvasBox_imgbor::-webkit-scrollbar{display: none;}
.exportCanvasBox_allItem {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.exportCanvasBox_item {
text-align: center;
.exportCanvasBox_img{
position: relative;
margin-right: 2rem;
margin-bottom: 2rem;
img {
max-width: 7rem;
@@ -2245,9 +2276,14 @@ export default defineComponent({
}
}
.exportCanvasBox_item_colorBor{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.exportCanvasBox_item_color{
width: 8rem;
margin-right: 2rem;
margin-bottom: 2rem;
.exportCanvasBox_item_BGcolor{
height: 5rem;
@@ -2272,12 +2308,17 @@ export default defineComponent({
}
}
.exportCanvasBox_left_tool{
.exportCanvasBox_left_tool_item_column{
flex-direction: column;
padding: 1rem;
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1rem;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
@@ -2290,6 +2331,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
@@ -2307,20 +2349,36 @@ export default defineComponent({
}
}
}
// .exportCanvasBox_right{
// display: flex;
// flex-direction: column;
// padding-left: 1rem;
// position: relative;
// .exportCanvasBox_right_definition{
// // display: flex;
// flex: 1;
// }
// .exportCanvasBox_right_credits{
// margin-bottom: 2rem;
// }
// }
.exportCanvasBox_bottom{
width: 100%;
flex-shrink: 0;
background: #f9fafb;
z-index: 2;
padding-top: 2rem;
.exportCanvasBox_left_credits{
margin-right: auto
}
.exportCanvasBox_left_btn{
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: flex-start;
.subitOkPreviewBtn{
position: initial;
transform: none;
margin-bottom: 0rem;
width: auto;
text-align: center;
&.active{
opacity: .7;
cursor: not-allowed;
}
}
.subitOkPreviewBtn:nth-child(2n){
margin: 0 1rem;
}
}
}
.exportCanvasBox_center {
flex: 1;
height: 100%;

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

@@ -185,8 +185,34 @@ export default defineComponent({
//操作移动
layout:{
mounted (el,layout:any,binding) {
let mousedown = function(e: MouseEvent){
e.stopPropagation()
let event:any = {
offsetX:e.offsetX,
offsetY:e.offsetY,
clientX:e.clientX,
clientY:e.clientY,
}
console.log(e);
operation(event)
}
let touchstart = function(e: any){
e.stopPropagation()
const touch = e.changedTouches[0];
let event:any = {
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
}
console.log(e);
operation(event)
}
let operation = function(e: MouseEvent){
console.log(e);
el.parentElement.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px'
@@ -203,10 +229,10 @@ export default defineComponent({
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - Number(top)
let mouse = true
document.onmousemove = function(e:MouseEvent){
let mouseMove = function(e:MouseEvent){
if(mouse){
el.style.left = e.x-mouseX - domX+'px'
el.style.top = e.y-mouseY - domY+'px'
el.style.left = e.clientX-mouseX - domX+'px'
el.style.top = e.clientY-mouseY - domY+'px'
if(el.offsetLeft <=0){
el.style.left = 0+'px'
}
@@ -221,18 +247,19 @@ export default defineComponent({
}
}
}
document.onmouseup = function(){
let mouseup = function(){
mouse = false
document.onmousemove = ()=>{
}
// el.removeEventListener('mousedown',mousedown)
// el.removeEventListener('mousedown',mousedown)
// document.onmousemove = false;
el.removeEventListener('mousemove',mouseMove)
el.removeEventListener('mouseup',mouseup)
//移动端
}
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseup);
//移动端
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
},
updated (el,layout) {

204
src/component/HomePage/newPosted.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="newPosted_generalMessage_title modal_title_text">
<span>动态</span>
<!-- <div class="newPosted_generalMessage_title_setting pointer" @click="allRead">全部已读</div> -->
</div>
<div class="newPosted_generalMessage_center modal_title_text">
<div class="newPosted_generalMessage_item" v-for="item in dataList" :key="item.id" @click="setRead(item)">
<!-- <a-badge :dot="item.isRead == 0"></a-badge> -->
<div class="newPosted_generalMessage_item_right">
<div class="newPosted_generalMessage_item_img pointer" @click="openOtherUsers(item)">
<img :src="item.avatar" alt="">
</div>
</div>
<div class="newPosted_generalMessage_item_content">
<div class="modal_title_text_intro">{{ item.userName }} </div>
<div class="newPosted_generalMessage_item_content_title pointer" @click="openOtherWork(item)">{{ item.portfolioName }}</div>
<div class="modal_title_text_intro">{{ item.createTime }}</div>
</div>
<div class="newPosted_generalMessage_item_left">
<div class="newPosted_generalMessage_item_img">
<img :src="item.canvas" alt="">
</div>
</div>
</div>
<div class="newPosted_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && isNoData">
没有任何信息~
</div>
<div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
<span v-show="isShowMark">
<a-spin size="large" />
</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
},
setup() {
const router = useRouter()
const store = useStore();
let newPostedMessage = reactive({
activeKey: ref('1'),
dataList:[
],
page:1,
size:10,
isNoData: false,
isShowMark: false,
})
let loadingDom:any = ref(null)
let init = ()=>{
newPostedMessage.isNoData = false
newPostedMessage.page = 0
new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
// console.log(entries[0]);
if (!entries[0].intersectionRatio) return;
newPostedMessage.page+=1
getPostedHistory()
},
// { root:worksPage }
).observe(loadingDom.value);
let data = {
type:'newPosted'
}
Https.axiosPost(Https.httpUrls.oneClickRead,'',{params:data}).then((rv)=>{
store.commit('setMessageSystem',{newPosted:0})
}).catch((err)=>{
})
}
let getPostedHistory = ()=>{
newPostedMessage.isShowMark = true
let data = {
page: newPostedMessage.page,
size: newPostedMessage.size,
type:'newPosted'
}
Https.axiosPost(Https.httpUrls.getHistoryNotification,data).then((rv)=>{
newPostedMessage.isShowMark = false
if(rv.content.length == 0) {
newPostedMessage.isNoData = true
return
}
newPostedMessage.dataList = rv.content
}).catch(() => {
newPostedMessage.isShowMark = false
newPostedMessage.isNoData = true
})
}
let openOtherUsers = (item:any)=>{
const routeUrl = router.resolve({
path:'/home/otherUsers',
query:{
userId:item.senderId
}
})
window.open(routeUrl.href,'_blank')
}
let openOtherWork = (item:any)=>{
const routeUrl = router.resolve({
path:'/home/works',
query:{
workId:item.portfolioId
}
})
window.open(routeUrl.href,'_blank')
}
onMounted(()=>{
})
return{
...toRefs(newPostedMessage),
loadingDom,
init,
getPostedHistory,
openOtherUsers,
openOtherWork,
}
},
data(){
return{
}
},
})
</script>
<style lang="less" scoped>
.modal_title_text{
font-size: 2rem;
line-height: 1.2;
justify-content: space-between;
}
.pointer{
cursor: pointer;
}
.newPosted_generalMessage_title{
display: flex;
}
.newPosted_generalMessage_center{
width: 100%;
max-height: 40rem;
overflow-y: auto;
.newPosted_generalMessage_item{
display: flex;
padding: 1rem 0;
align-items: center;
}
.newPosted_generalMessage_item_right{
margin-right: 1rem;
.newPosted_generalMessage_item_img{
img{
width: 5rem;
border-radius: 50%;
}
}
}
.newPosted_generalMessage_item_left{
height: 10rem;
margin-left: auto;
.newPosted_generalMessage_item_img{
height: 100%;
img{
width: 5rem;
max-height: 100%;
object-fit: cover;
}
}
}
.newPosted_generalMessage_item_content{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 1rem;
.newPosted_generalMessage_item_content_title:hover{
text-decoration: underline;
}
div{
text-align: left
}
}
}
.page_loading_box{
text-align: center;
height: 50px;
.page_loading{
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
}
}
</style>

48
src/component/HomePage/productImg.vue
View File

@@ -26,7 +26,7 @@
<div class="Guide_1_32">
<div class="productImg_content_item_title productImg_content_item_title_menu">
<span>{{$t('ProductImg.MagicTools')}}</span>
<generalMenu class="productImg_content_item_title_menubtn hideEvents" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
@@ -34,7 +34,7 @@
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="searchName"
v-model="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
@@ -44,7 +44,7 @@
v-show="isTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="searchName"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
@@ -75,7 +75,20 @@
</a-slider> -->
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="5"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
@@ -162,7 +175,7 @@
</div>
</div>
<div class="productImg_right_item_iconLeft" >
<div class="productImg_right_item_scale hideEvents" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setScaleImage(generateList,index,true)">
<div class="productImg_right_item_scale" :class="{hideEvents:driver__.driver}" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setScaleImage(generateList,index,true)">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div v-show="item.resultType != 'Relight'" class="productImg_right_item_menu Guide_1_34" :style="[(driver__.index == 46 || driver__.index == 47 || driver__.index == 48)?'display: flex;':'']" @click.stop="setMenuShow(item)">
@@ -213,6 +226,7 @@
:productData="{
upload:upload,
similarity:similarity,
brightenValue:brightenValue,
RelightDirection:RelightDirection,
RelightDirectionList:RelightDirectionList,
}"
@@ -256,7 +270,10 @@ export default defineComponent({
let productImgData:any = reactive({
isShowMark:false,
fileList:{},
searchName:'',
searchName:{
ToProductImage:'',
Relight:'',
},
isTextarea:false,//是否展开
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
@@ -264,6 +281,7 @@ export default defineComponent({
generateList:[],
likeList:[],
similarity:30,
brightenValue:1,
})
let productimgMenuList = ref([
{
@@ -487,10 +505,11 @@ export default defineComponent({
}
let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
let data:any ={
prompt:productImgData.searchName,
prompt:productImgData.searchName[productimgMenu.value.value],
toProductImageVOList:selectArr,
userLikeGroupId:upload.value.userlikeGroupId,
direction:RelightDirection.value,
brightenValue:productImgData.brightenValue,
imageStrength:(100 - imageStrength)/100,
}
productImgData.isProductimg = true
@@ -587,7 +606,11 @@ export default defineComponent({
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
let data = {
uniqueId:str,userId:JSON.parse(userInfo).userId,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
type:productimgMenu.value.value,
}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []
@@ -607,6 +630,9 @@ export default defineComponent({
// scaleImage.value.isProductimg = false
scaleImage.value.init(arr,index)
scaleImage.value.isLike = false
scaleImage.value.productimgSearchName = productImgData.searchName[productimgMenu.value.value]
scaleImage.value.productimgSimilarity = productImgData.similarity
scaleImage.value.productimgRelightDirection = RelightDirection.value
scaleImage.value.isComparison = true
}
let generalIsMenuShow:any = {}
@@ -853,13 +879,17 @@ methods: {
.productImg_left{
width: 25%;
position: relative;
.Guide_1_32{
height: 100%;
overflow-y: auto;
&.Guide_1_32::-webkit-scrollbar{display: none;}
}
.upload_file_item{
display: flex;
margin-right: 1rem;
width: auto !important;
height: 14rem !important;
border: none !important;
margin-bottom: 0 !important;
&.upload_file_item:last-child{
margin-right: 0rem;
}

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

@@ -71,7 +71,20 @@
</a-slider> -->
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="productimgBrightenValue"
:tooltipVisible="false"
:max="5"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
@@ -140,12 +153,14 @@ export default defineComponent({
type:Object,
default:{
similarity:30,
brightenValue:1,
upload:'',
},
}
},
setup(props:any,{emit}) {
const store = useStore();
let productimg = reactive({
isProductimg:false,
productimgSearchName:'',
@@ -153,6 +168,7 @@ export default defineComponent({
productimgRemProductimg:false,
productimgIsProductimg:false,
productimgSimilarity:props.productData.similarity,
productimgBrightenValue:props.productData.brightenValue,
productimgUpload:props.productData.upload,
productimgRelightDirection:props.productData.RelightDirection,
productimgRelightDirectionList:props.productData.RelightDirectionList,
@@ -186,6 +202,7 @@ export default defineComponent({
direction:productimg.productimgRelightDirection,
prompt:productimg.productimgSearchName,
toProductImageVOList:[obj],
brightenValue:productimg.productimgBrightenValue,
userLikeGroupId:productimg.productimgUpload.userlikeGroupId,
imageStrength:(100 - imageStrength)/100,
}
@@ -268,7 +285,11 @@ export default defineComponent({
if(generateProceedList){
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
let str = generateProceedList.join(',')
let data = {uniqueId:str,userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
let data = {
uniqueId:str,
userId:JSON.parse(userInfo).userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
type:scaleImageList.value[scaleImageIndex.value]?.resultType
}
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
(rv) => {
generateProceedList = []