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

调整layout速度慢问题

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

18
src/component/Detail/habit.vue
View File

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

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

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

1
src/component/HomePage/SketchboardUpload.vue
View File

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

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

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

83
src/component/HomePage/layoutMobile.vue
View File

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

81
src/tool/domTurnImg.js
View File

@@ -1,45 +1,48 @@
import html2canvas from "html2canvas"; import html2canvas from "html2canvas";
const getJpeg = dom =>{ const getJpeg = dom =>{
return new Promise(resolve =>{ return new Promise(resolve =>{
html2canvas(dom,{useCORS: true,}).then(canvas =>{ setTimeout(() => {
let base64 = canvas.toDataURL('image/jpeg',.9); html2canvas(dom,{useCORS: true,}).then(canvas =>{
let quality = 0.9 // 压缩系数0-1之间 let base64 = canvas.toDataURL('image/jpeg',.9);
let newImage = new Image() // let quality = 0.9 // 压缩系数0-1之间
newImage.src = base64 let newImage = new Image()
newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要 newImage.src = base64
let imgWidth, newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要
imgHeight // let imgWidth,
let w = undefined // imgHeight
newImage.onload = function () { // let w = undefined
w = this.width * 1 newImage.onload = function () {
imgWidth = this.width // w = this.width * 1
imgHeight = this.height // imgWidth = this.width
let canvas = document.createElement('canvas') // imgHeight = this.height
let ctx = canvas.getContext('2d') // let canvas = document.createElement('canvas')
if (Math.max(imgWidth, imgHeight) > w) { // let ctx = canvas.getContext('2d')
if (imgWidth > imgHeight) { // if (Math.max(imgWidth, imgHeight) > w) {
canvas.width = w // if (imgWidth > imgHeight) {
canvas.height = w * (imgHeight / imgWidth) // canvas.width = w
} else { // canvas.height = w * (imgHeight / imgWidth)
canvas.height = w // } else {
canvas.width = w * (imgWidth / imgHeight) // canvas.height = w
} // canvas.width = w * (imgWidth / imgHeight)
} else { // }
canvas.width = imgWidth // } else {
canvas.height = imgHeight // canvas.width = imgWidth
quality = 0.6 // canvas.height = imgHeight
} // quality = 0.6
ctx.clearRect(0, 0, canvas.width, canvas.height) // }
ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage // ctx.clearRect(0, 0, canvas.width, canvas.height)
let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句 // ctx.drawImage(this, 0, 0, canvas.width, canvas.height) // // 这里面的 this 指向 newImage
let fileData = dataURLtoFile(smallBase64); // let smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名 let fileData = dataURLtoFile(base64);
// console.log(smallBase64); let fileOfBlob = new File([fileData], new Date() + ".jpg"); // 命名图片名
// resolve(base64ToFile(fileOfBlob)) // console.log(smallBase64);
resolve(fileOfBlob) // resolve(base64ToFile(fileOfBlob))
} resolve(fileOfBlob)
}
})
}, 100);
}) })
})
} }
//base64转成blob //base64转成blob
function dataURLtoFile(dataURI, type) { function dataURLtoFile(dataURI, type) {