调整layout速度慢问题
This commit is contained in:
@@ -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) {
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1107,6 +1107,7 @@ export default defineComponent({
|
||||
cursor: pointer;
|
||||
&:hover .delete_like_file_block{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
img{
|
||||
object-fit: cover;
|
||||
|
||||
@@ -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
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user