调整layout速度慢问题

This commit is contained in:
X1627315083
2024-05-23 13:25:19 +08:00
parent a5cfaeafe5
commit 785bb8b70e
6 changed files with 148 additions and 128 deletions

View File

@@ -89,18 +89,19 @@
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="workspaceItem.systemDesignerPercentage"
@afterChange="systemDesigner"
@afterChange="setSystemDesigner"
:tip-formatter="formatter"
:tooltipVisible="false"
>
</a-slider>
<div class="habit_System_Designer_text_max">
<div class="habit_System_Designer_text">
{{ $t('Habit.System') }}<span>(100%)</span>
{{ $t('Habit.System') }}<span>({{systemDesigner.system}}%)</span>
</div>
<div class="habit_System_Designer_text">
{{ $t('Habit.Designer') }}<span>(100%)</span>
{{ $t('Habit.Designer') }}<span>({{systemDesigner.designer}}%)</span>
</div>
</div>
</div>
@@ -191,6 +192,10 @@ export default defineComponent({
mannequinType:'',
mannequinId:'',
})
let systemDesigner:any = ref({
system:0,
designer:0,
})
let mannequins:any = ref([{},{}])
let systemSeleves= ref(false);
let total= ref(0);
@@ -228,6 +233,7 @@ export default defineComponent({
return{
systemSeleves,
mannequins,
systemDesigner,
openType,
total,
driver__,
@@ -624,10 +630,12 @@ export default defineComponent({
}
},
//设置系统设计占比
systemDesigner(num: number) {
setSystemDesigner(num: number) {
this.workspaceItem.systemDesignerPercentage = num
},
formatter(value: number) {
this.systemDesigner.system = 100 - value
this.systemDesigner.designer = value
let num = Math.abs((value-50)*2)
return `${num}%`;
},
@@ -908,7 +916,7 @@ export default defineComponent({
}
.habit_System_Designer {
margin-top: calc(8rem*1.2);
// margin-top: calc(8rem*1.2);
:deep(.ant-slider-track),
:deep(.ant-slider-rail) {

View File

@@ -443,8 +443,9 @@ export default defineComponent({
}
},
layout(){
async layout(){
if(this.loadingShow)return
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
@@ -457,51 +458,52 @@ export default defineComponent({
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return
}
}
if(this.loadingShow){
return
}
this.loadingShow = true
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(async ()=>{
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
).catch(rv=>{
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
})
})
},
setmoodbClass(val:any){
this.moodb_className = val

View File

@@ -1107,6 +1107,7 @@ export default defineComponent({
cursor: pointer;
&:hover .delete_like_file_block{
display: block;
opacity: 1;
}
img{
object-fit: cover;

View File

@@ -610,25 +610,28 @@ export default defineComponent({
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('layoutCentent')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('gender','')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false
domTurnImg(layoutCentent).then((rv)=>{
let file =rv
let param = new FormData();
param.append('inPin','0')
param.append('gender','')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
})
})
})
},

View File

@@ -180,6 +180,28 @@ export default defineComponent({
this.uploadUrl = getUploadUrl();
},
directives:{
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
},
//操作移动
layout:{
mounted (el,layout:any,binding) {
@@ -541,28 +563,6 @@ export default defineComponent({
})
},
},
modelImg:{
// mounted(el) {
// let parentNode = el.parentNode
// if(parentNode.offsetHeight > parentNode.offsetWidth){
// el.style.height = 100+'%'
// el.style.width = 'auto'
// }else{
// el.style.width = 100+'%'
// el.style.height = 'auto'
// }
// },
// updated (el) {
// let parentNode = el.parentNode
// if(parentNode.offsetHeight > parentNode.offsetWidth){
// el.style.height = 100+'%'
// el.style.width = 'auto'
// }else{
// el.style.width = 100+'%'
// el.style.height = 'auto'
// }
// }
}
},
methods: {
init(){
@@ -641,27 +641,28 @@ export default defineComponent({
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('layoutCentent')
let file = await domTurnImg(layoutCentent)
let param = new FormData();
param.append('inPin','0')
param.append('gender','')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('gender','')
param.append('level1Type','Moodboard')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
// console.log(rv);
rv.imgUrl = rv.url
this.layout = false
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
this.store.commit("setDisposeMoodboard", rv);
}
).catch(rv=>{
this.loadingShow = false
})
})
})
},
beforeUpload(){
@@ -900,6 +901,8 @@ export default defineComponent({
// object-fit: cover;
// width: 100%;
// height: 100%;
height: 100%;
width: auto;
pointer-events: none;
float: left;
user-select:none;