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

detail印花页面布局调整

Browse Source
This commit is contained in:
X1627315083
2025-09-15 15:38:45 +08:00
parent 615c38be89
commit 8f41fae0ce
4 changed files with 130 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

247
src/component/Detail/detailRight/editPrintElement.vue
View File

@@ -1,56 +1,56 @@
<template>
<div class="editPrintElement">
<div class="detailText" style="text-align: left; margin-bottom: 1rem;">
{{ $t('DesignPrintOperation.ModifyPrint') }}
</div>
<div class="printOverallBtn" v-if="type == 'print'">
<div class="overallSlogin">
<div
class="habit_Overal_Single_text"
style="margin-left: 0"
:class="{ active: !overallSingle }"
>
{{ $t('DesignPrintOperation.Overall') }}
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
<label>
<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="single">
{{ $t('DesignPrintOperation.Single') }}
</div>
</label>
<label>
<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="overall">
{{ $t('DesignPrintOperation.Overall') }}
</label>
</div>
<div v-show="!overallSingle" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
class="system_silder"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
:tip-formatter="formatter"
>
</a-slider>
</div>
<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}">
<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}">
<div class="imgItem"
v-if="stateOverallSingle == 'single'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
>
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
<div class="imgItem"
v-if="stateOverallSingle == 'overall'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
style="width:14rem;height:14rem;left: 0;right: 0;margin: 0 auto;"
>
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
</div>
</div>
</div>
<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
<div class="itemList" :style="{width:prentWidth || 0}">
<div class="imgItem"
v-if="stateOverallSingle == 'single'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
>
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
<div class="imgItem"
v-if="stateOverallSingle == 'overall'"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item"
style="width:14rem;height:14rem;"
>
<img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div>
</div>
<div v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
<a-slider id="system_silder"
class="system_silder"
:min="20"
:max="1000"
v-model:value="systemDesignerPercentage"
:tip-formatter="formatter"
>
</a-slider>
</div>
<div class="editPrintElementBox">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
@@ -60,7 +60,7 @@
<div
v-for="item,index in printStyleList[type][stateOverallSingle]"
:key="item"
v-if="overallSingle"
v-if="stateOverallSingle == 'single'"
:style="item?.pattern?.style"
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
class="modal_imgItem"
@@ -72,7 +72,7 @@
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<ul v-if="stateOverallSingle == 'single'" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
@@ -82,8 +82,8 @@
<img src="../../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
<div v-show="stateOverallSingle != 'single'"></div>
<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
@@ -125,7 +125,6 @@ export default defineComponent({
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
overallSingle:true,
systemDesignerPercentage:0,
printStyleList:{
print:{
@@ -168,11 +167,6 @@ export default defineComponent({
})
const setOveralSingle = ()=>{
if(!editPrintElementData.overallSingle){
editPrintElementData.stateOverallSingle = 'overall'
}else{
editPrintElementData.stateOverallSingle = 'single'
}
setItemPosition()
}
const formatter = (value:any)=>{
@@ -197,7 +191,7 @@ export default defineComponent({
let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
let y = sketchH / 2 -(sketchH * height/2)
if(!editPrintElementData.overallSingle){
if(!editPrintElementData.stateOverallSingle == 'single'){
x = sketchW / 2
y = sketchH / 2
}
@@ -212,7 +206,7 @@ export default defineComponent({
let item = {
angle:0,
designType:data.designType,
ifSingle:editPrintElementData.overallSingle,
ifSingle:editPrintElementData.stateOverallSingle == 'single',
level2Type:data.level2Type,
location,
minIOPath:data.minIOPath || data.originalUrl,
@@ -354,9 +348,9 @@ export default defineComponent({
})
setItemPosition()
}
if(props.type == 'print'){
editPrintElementData.overallSingle = state
}
// if(props.type == 'print'){
// editPrintElementData.overallSingle = state
// }
}
// undividedLayer
//计算宽高使用editPrintElementData.selectDetail.path
@@ -392,7 +386,7 @@ export default defineComponent({
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
v.pattern.designOpenrtionBtn = false
})
if(!editPrintElementData.overallSingle){
if(editPrintElementData.stateOverallSingle != 'single'){
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
}else{
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
@@ -462,7 +456,7 @@ export default defineComponent({
let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
if(!editPrintElementData.overallSingle){
if(editPrintElementData.stateOverallSingle != 'single'){
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
}
@@ -740,7 +734,6 @@ export default defineComponent({
onMounted(()=>{
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
editPrintElementData.overallSingle = true
}
})
onBeforeUnmount(()=>{
@@ -857,74 +850,88 @@ export default defineComponent({
> .overallSlogin{
align-items: center;
display: flex;
// margin-top: 1.4rem;
margin-bottom: 2.2rem;
> label{
display: flex;
align-items: center;
font-size: 1.6rem;
margin-right: 2.4rem;
&:last-child{
margin-right: 0rem;
}
> input{
margin-right: 1rem;
}
}
}
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
}
.habit_System_Designer {
align-items: center;
display: flex;
justify-content: center;
.ant-slider-track,
.ant-slider-rail {
background-color: #e1e1e1;
border-radius: calc(0.5rem*1.2);
}
:deep(.system_silder){
width: 17rem;
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover{
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text{
font-size: 1.8rem;
margin: 0 1rem;
&.active {
color: rgba(0, 0, 0, 0.7);
// font-weight: 900;
// transform: scale(1.2);
}
}
.habit_System_Designer {
align-items: center;
display: flex;
.ant-slider-track,
.ant-slider-rail {
background-color: #e1e1e1;
border-radius: calc(0.5rem*1.2);
}
:deep(.system_silder){
width: 20rem;
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover{
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text{
font-size: 1.8rem;
color: rgba(0, 0, 0, 0.7);
margin-right: 3rem;
font-weight: 600;
}
color: rgba(0, 0, 0, 0.7);
margin-right: 3rem;
font-weight: 600;
}
}
> .printElementList{
width: 100%;
height: 10rem;
position: relative;
overflow-x: auto;
.itemList{
height: 100%;
> .printElementListBorder{
&.single{
padding: 2rem 4rem;
width: 100%;
border-radius: 1.5rem;
border: .05rem solid #000;
}
.imgItem{
width: 8rem;
height: 8rem;
position: absolute;
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
> img{
width: 100%;
> .printElementList{
width: 100%;
height: 10rem;
position: relative;
overflow-x: auto;
.itemList{
height: 100%;
object-fit: cover;
}
> i{
.imgItem{
width: 8rem;
height: 8rem;
position: absolute;
right: 1rem;
top: 1rem;
color: #fff;
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
> img{
width: 100%;
height: 100%;
object-fit: cover;
}
> i{
position: absolute;
right: 1rem;
top: 1rem;
color: #fff;
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
}
}
}
}
> .editPrintElementBox{
flex: 1;
overflow: hidden;

1
src/lang/cn.ts
View File

@@ -636,6 +636,7 @@ export default {
},
DesignPrintOperation: {
Placement: "调整位置",
ModifyPrint: "修改印花",
Overall: "整体",
Single: "单个",
Scale: "大小",

1
src/lang/en.ts
View File

@@ -638,6 +638,7 @@ export default {
},
DesignPrintOperation: {
Placement: "Placement",
ModifyPrint: "Modify Print",
Overall: "Overall",
Single: "Single",
Scale: "Scale",

2
src/views/HomeMain.vue
View File

@@ -350,7 +350,7 @@ export default defineComponent({
const pastDuePage = computed(()=>{
const isAllowedRoute = route.path === '/home/events' || route.path === '/home/works';
const hasNoSystemAccess = userDetail.value.systemList.indexOf(1) === -1;
return !hasNoSystemAccess && !isAllowedRoute;
return hasNoSystemAccess && !isAllowedRoute;
})
watch(()=>homeMainData.userDetailLanguage,(newVal)=>{
if(locale.value == newVal || !newVal)return