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

09-12

Browse Source
This commit is contained in:
WangXiaoDong
2023-09-12 10:11:27 +08:00
parent 3440f2f868
commit 173f35042d
71 changed files with 4291 additions and 1865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/component/Detail/AccessoryReplaceModal.vue
View File

@@ -127,7 +127,6 @@ export default defineComponent({
this.loadingShow = false
})
},
//提交
submitOthers(){
this.othersData.color = this.othersData.color ? `${this.modifyColor.r} ${this.modifyColor.g} ${this.modifyColor.b}` : ''

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

@@ -4,16 +4,11 @@
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
>
<!-- <template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template> -->
<div class="design_title_text">
<div>Details</div>
<div class="design_title_text_intro">edit the details of your design</div>
@@ -30,27 +25,33 @@
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_img" @click="showDesignImgDetail()">
<div class="detail_modal_body_img">
<!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
<img class="detial_img" :src="designItemDetail.designItemUrl">
<div v-for="item,index in designItemDetail.clothes" :key="item">
<div class="clothes_item_img_block" @click="clothesDetail(item,index)">
<img class="clothes_item_img" :src="item.path">
</div>
</div>
<img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
<div>
<!-- 全屏 -->
<i class="fi fi-bs-expand-arrows-alt"></i>
<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit"></i>
<i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
<!-- 层 -->
<i class="fi fi-rr-copy"></i>
<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
</div>
</div>
<div class="detail_modal_body_category">
<div class="detail_modal_right_top scroll_style">
<div v-show="designOrder" class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item clothes_detail_item_apparel">
<div class="clothes_item_header">
<i class="fi fi-rs-comments"></i>
<div>Current Apparel</div>
<i class="fi fi-rr-edit"></i>
</div>
<img src="" alt="" class="centent" @click="openCurrent(1)">
<img :src="currentItem.path" alt="" class="centent" @click="openCurrent(1)">
</div>
<div class="clothes_detail_item clothes_detail_item_print">
<div class="clothes_item_header">
@@ -58,7 +59,10 @@
<div>Current Print</div>
<i class="fi fi-rr-edit"></i>
</div>
<i class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
<img src="" alt="">
</div>
<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
</div>
<div class="clothes_detail_item clothes_detail_item_color">
<div class="clothes_item_header">
@@ -68,20 +72,17 @@
</div>
<div class="img_block_item centent" @click="openCurrent(3)">
<div class="color_item">
<div class="color_content" :style="{background:`#6c6cac`}"></div>
<div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
<div class="color_content_body">
<div class="color_des">222</div>
<div class="color_des">111</div>
<div class="color_des">{{currentItem.color?.tcx}}</div>
<div class="color_des">{{currentItem.color?.name}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
<div class="clothes_detail_item subitOkPreviewBtn">
Submit
</div>
</div>
</div>
<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>
@@ -93,24 +94,16 @@
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem ref="setDesignItem"></setDesignItem>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -118,23 +111,28 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
DesignDetailAlter
DesignDetailAlter,
setDesignItem,
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
let designItemDetail :any = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
let parentData:any = ref({
design:{},
index:0,
@@ -142,44 +140,52 @@ export default defineComponent({
type:'',
})//父组件传过来的数据
let others:any = ref({
left:200+'px',
top:100+'px',
})
let currentItem:any = ref({})//点击上衣或者下衣
let current:any = ref({})//点击上衣或者下衣
provide('current',current)
return{
designItemDetail,
store,
parentData,
others,
currentItem,
current,
}
},
data(){
return{
loadingShow:false,
loadingShow:false,//加载中
designDetailShow:true,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
imgListr:[
{
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
id: 1,
},
{
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
id: 2,
},
{
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
id: 3,
},
{
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
id: 4,
},
],
imgDesignImg:true,
designOrder:false,
}
},
mounted(){
let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
console.log(rv);
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
methods:{
openCurrent(num: Number) {
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.init(num)
if(num ==2 ){
}
},
@@ -187,9 +193,12 @@ export default defineComponent({
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designOrder = false
this.currentItem = {}
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.terminate()
}else{
this.designShowPrview = 1
}
},
@@ -239,71 +248,52 @@ export default defineComponent({
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
this.designShowPrview = num
let setDesignItem:any = this.$refs.setDesignItem
console.log(setDesignItem);
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
if(this.designShowPrview == 3){
setDesignItem.init()
}
// this.others = designItemDetail.others
// if(this.generateHighDesignImg){
// this.designShowPrview = 3
// }else{
// this.designShowPrview = 2
// }
},
//图片按下样子
mousedownDesignImg(){
this.imgDesignImg = false
},
//图片抬起样子
mouseupDesignImg(){
this.imgDesignImg = true
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
if(this.currentItem?.id == clothes.id){
return
}
this.designOrder = true
this.current = JSON.parse(JSON.stringify(clothes))
this.currentItem = clothes
let DesignDetailAlter:any = this.$refs.DesignDetailAlter
DesignDetailAlter.changePlace()
// let elementReplace:any = this.$refs.ElementReplace
// let data ={
// clothes:clothes,
// index:index,
// }
// elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
@@ -339,23 +329,12 @@ export default defineComponent({
<style lang="less">
.design_detail_modal_component{
color: #000;
max-width: 1150px ;
.design_title_text{
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
margin-bottom: 2rem;
.design_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
max-width: 1440px ;
.ant-modal-content{
border-radius: 10px;
overflow: hidden;
// overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
@@ -365,6 +344,7 @@ export default defineComponent({
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
}
@@ -381,28 +361,7 @@ export default defineComponent({
}
.design_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.turn_button{
width: 3.6rem;
@@ -436,6 +395,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
width: 100%;
overflow: hidden;
// padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_img{
@@ -447,6 +407,14 @@ export default defineComponent({
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
>div{
height: 50%;
.clothes_item_img_block{
display: flex;
}
}
.detial_img{
max-width: 100%;
max-height: 100%;
@@ -454,6 +422,8 @@ export default defineComponent({
div{
i{
position: absolute;
cursor: pointer;
zoom: 1.2;
&.fi-bs-expand-arrows-alt{
top: 0;
left: 0;
@@ -473,14 +443,18 @@ export default defineComponent({
.detail_modal_body_category{
width: 17%;
height: 100%;
position: relative;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
.centent_div{
display: flex;
justify-content: space-between;
}
.centent{
cursor: pointer;
@@ -510,13 +484,21 @@ export default defineComponent({
width: 10rem;
height: 10rem;
}
&.clothes_detail_item_apparel{
img{
max-height: 100%;
}
}
.color_item{
display: inline-block;
vertical-align: top;
border: 1px solid #ebe9e9;
.color_content{
width: 6rem;
width: 8rem;
height: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.color_content_body{
.color_des{
@@ -537,35 +519,10 @@ export default defineComponent({
margin: 1rem 0;
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
&.subitOkPreviewBtn{
position: relative;
margin-top: 2rem;
}
}
}
}
@@ -628,7 +585,6 @@ export default defineComponent({
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;

609
src/component/Detail/DesignDetailAlter.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="detail_modal_body_select">
<div v-show="type_ == 1 && select == true">
<div v-show="(type_ == 1 || type_ == 2) && select == true">
<div class="detail_uploadLibrary">
<div class="switch_type_list">
<div
@@ -18,40 +18,57 @@
<span>Library</span>
</div>
</div>
<!-- <div v-show="openClick == 1">
<div v-show="openClick == 1" class="moodboard_body">
<div v-show="openClick == 2" class="detail_Library">
<div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<div class="moodboard_body">
<div class="upload_img_body scroll_style">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in fileList"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="Uploading..."
/>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
</div>
<div
class="delete_file_block"
@click="deleteFile(file)"
@click.stop="deleteFile(index)"
>
Delete
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length != 8"
v-show="uploadList.length != 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
@@ -60,34 +77,40 @@
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
multiple
:maxCount="8 - moodboarList.length+fileList.length"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
@change="(file) => upFileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length != 8"
v-show="uploadList.length != 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
</div>
</div> -->
<div v-show="openClick == 2">
</div>
</div>
</div>
<div v-show="type_ == 2 && select == true">
1111111111111111111111111
<div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
</div>
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div>
</div>
<div v-show="type_ == 3 && select == true">
<div class="detail_color">
<div class="right_content_line">
@@ -179,9 +202,6 @@
<span class="icon iconfont icon-huoquduixiang"></span>
<span class="get_color_des"></span>
</div>
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
<img src="#" :title="pantongName">
</div>
</div>
</div>
</div>
@@ -191,7 +211,7 @@
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
</template>
<script>
import { defineComponent,computed,ref, h ,nextTick } from 'vue'
import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -200,7 +220,7 @@ import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
export default defineComponent({
props: ["msg"],
components:{
@@ -210,11 +230,39 @@ export default defineComponent({
const store = useStore();
let type_ = ref(1);
let select = ref(false);
let parentData = ref({
})//父组件传过来的数据
let current = inject('current')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
]
let isShowLoading = ref(false)
let clothesList = ref([])
let uploadList = ref([])
let apparelList = ref([])
let printList = ref([])
let selectCode = ref('Sketchboard')
//颜色
let selectColor = ref({
rgba:{},
@@ -223,8 +271,17 @@ export default defineComponent({
})
return{
store,
parentData,
current,
openClick,
searchPictureName,
disignTypeList,
isShowLoading,
clothesList,
uploadList,
apparelList,
printList,
selectCode,
type_,
select,
selectColor,
@@ -235,12 +292,30 @@ export default defineComponent({
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
// console.log(DesignDetailEnd.selectIndex);
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
@@ -250,14 +325,32 @@ export default defineComponent({
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
data(){
return{
token: "",
uploadUrl:'',
upload: {
isPin: 0,
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
@@ -278,26 +371,187 @@ export default defineComponent({
},
spin: true,
}),
getPantongNameTime:true
}
},
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.error("Your browser does not support it")
}
})
},
methods:{
//点击判断
init(num){
this.type_ = num
this.select = true
let arr = this.current.color
// if(!arr[3]){
// arr[3] = 1
// }
this.selectColor = {
rgba:{
r:108,
g:108,
b:172,
a:1
r:Number(arr.r),
g:Number(arr.g),
b:Number(arr.g),
a:Number(arr.a?arr.a:1),
},
hex:'#6c6cac'
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
}
console.log(this.selectColor);
this.uploadList = []
if (num == 1) {
this.selectCode = 'Sketchboard'
this.upload.level1Type = 'Sketchboard'
this.uploadList = this.apparelList
}else if (num == 2){
this.selectCode = 'Printboard'
this.upload.level1Type = 'Printboard'
this.uploadList = this.printList
}
if(num == 1 || num == 2){
this.clothesList = []
this.getLibraryList()
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
upFileUploadChange(data) {
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
file.designType = res.data.designType
file.category = this.current;
console.log(file);
let fileList = this.uploadList.filter(
(v) => v.status === "done"
);
if (this.uploadList.length >= 8) {
message.error("You can select up to 8 images");
} else {
// this.store.commit("setSketchboardFile", fileList);
this.uploadList = fileList
// this.store.commit("clearMoodTemplateId");
if(this.selectCode == 'Sketchboard'){
this.apparelList = this.uploadList
}else{
this.printList = this.uploadList
}
}
} else if (file.status === "error") {
let index = -1;
this.uploadList.forEach((ele, index1) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.uploadList.splice(index, 1);
}
message.error(file.name + "upload failed");
}
},
//关闭
terminate(){
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0
},
//切换整体衣服
changePlace(){
this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.type_ = 0
this.uploadList = []
this.apparelList = []
this.printList = []
this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.selectIndex = 0
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
showFileCategory(file) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
item.categoryShow = false;
}
},
hiddenFileCategory() {
for (let item of this.clothesList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
this.current.id_ = imgData.id
this.current.path = imgData.url
}else{
console.log(imgData,this.current.printObject);
this.current.printObject.url = imgData.url
this.current.printObject.id = imgData.id
}
// imgData.type_ = this.type_
// this.store.commit("addGenerateMaterialFils", imgData);
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
page:1,
pictureName:this.searchPictureName,
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
this.isShowLoading = false
}
).catch((res)=>{
this.isShowLoading = false
});
},
//衣服
open(num) {
this.openClick = num;
@@ -306,6 +560,7 @@ export default defineComponent({
},
//印花
@@ -322,15 +577,6 @@ export default defineComponent({
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
//清除当前的颜色
clearCurrentColor(){
this.selectColor = {
rgba:{}
}
this.colorFileList = []
this.pantongName = ''
this.pantongNameList = []
this.tcxColor = ''
},
colorDeleteFile(index){
this.colorFileList.splice(index, 1)
this.selectColorList = []
@@ -340,9 +586,14 @@ export default defineComponent({
},
rgbaToHex(rgba) { // rgba转16进制
let hex = '#';
for (const i of rgba) {
hex += Number(i).toString(16).padStart(2, '0');
}
rgba.forEach((i,index) => {
if(index == 3){
hex += Math.round(i * 255).toString(16)
}else{
hex += Number(i).toString(16).padStart(2, '0');
}
});
return hex;
},
//通过HSV获取颜色
@@ -373,40 +624,34 @@ export default defineComponent({
}
hsvList.push(obj)
})
// let data = []
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
// if(rv){
// this.pantongName = rv.name
// console.log(rv);
// }
// })
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
(rv) => {
if(rv){
rv.forEach(element => {
this.pantongNameList.push(element.name)
});
console.log(rv);
}
}
).catch(res=>{
});
},
//通过tcx获取颜色
getTcxColor(){
if(!this.tcxColor){
return
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
if(rv && rv.name){
// let hex = this.rgbaToHex([color.r,color.g,color.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
this.selectColor = this.reviewColor
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name
let colorList =this.colorList.filter((v) => Object.keys(v).length)
let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList)
this.getColorBg = true
}else{
@@ -414,16 +659,43 @@ export default defineComponent({
}
})
},
//查询颜色的潘通值和txc
getPantongName(v) {
if(!v.r){
return
}
let color = [v.r, v.g, v.b];
let hsv = rgbToHsv(color);
let data = [{
h: hsv[0],
s: hsv[1],
v: hsv[2],
}]
return new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv) => {
if (rv) {
this.selectColor.tcx = rv[0].tcx
this.selectColor.name = rv[0].name
resolve();
}
})
.catch((res) => {
reject();
});
});
},
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
let data = {
id:'',
name:'',
rgbValue:v
}
return data
})
// this.store.commit('setColorboardList',newColorList)
},
fileUploadChange(data){
@@ -450,8 +722,7 @@ export default defineComponent({
let colorHex = this.rgbaToHex(color)
let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,7)
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
selectColor = selectColor.join('&').split("&")
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
@@ -479,6 +750,8 @@ export default defineComponent({
width: 20%;
>div{
height: 100%;
display: flex;
flex-direction: column;
}
i{
font-size: 1.8rem;
@@ -486,6 +759,8 @@ export default defineComponent({
}
.detail_uploadLibrary{
.switch_type_list {
margin-bottom: 1rem;
margin-top: -1rem;
display: flex;
align-items: center;
position: relative;
@@ -537,7 +812,185 @@ export default defineComponent({
}
}
}
.detail_Library{
.content_search_block{
display: flex;
margin-bottom: 1rem;
.search_input{
width: 15rem;
padding-left: 1.5rem;
// height: 4rem;
// line-height: 3.8rem;
// background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 5rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
}
.detail_Library_item,.detail_Upload_item{
width: 100%;
// height: calc(100% - 19rem);
flex: 1;
overflow: hidden;
position: relative;
&.generate::-webkit-scrollbar{display: none;}
>div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
overflow-X: hidden;
height: 100%;
&.scroll_style::-webkit-scrollbar{display: none;}
}
.content_img_item{
display: inline-block;
vertical-align: top;
// padding: 0 1.4rem;
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.active{
opacity: .5;
img{
transform: scale(.9);
}
}
&.select_item_img{
// border-color: #343579;
}
.print_content_img{
width: 100%;
height: 100%;
}
.content_img{
max-width: 100%;
max-height: 100%;
}
}
.content_img_name{
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
.upload_img_body{
width: 100%;
.upload_item{
justify-content: space-between;
}
}
.moodboard_body{
.upload_file_item{
margin: 0;
margin-bottom: 2rem;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
}
}
}
.detail_color{
// height: calc(100% - 5.4rem);
height: 100%;
@@ -904,21 +1357,7 @@ export default defineComponent({
vertical-align: middle;
}
}
.get_color_bg{
width: 18rem;
height: 18rem;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
img{
opacity: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
}
}
}

219
src/component/Detail/DesignDetailEnd.vue
View File

@@ -14,7 +14,16 @@
<span>New Print</span>
</div>
<div class="print_left">
<img src="" alt="">
<!-- <img :src="current.path" :title="current.type"> -->
<img :src="current?.printObject?.url" v-if="current?.printObject?.url && current?.printObject?.url != 'none'">
<div src="@/assets/images/homePage/null_img.png" v-else ></div>
<div
v-show="current?.printObject?.url && current?.printObject?.url != 'none'"
class="delete_file_block"
@click="deleteFile"
>
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div>
@@ -26,14 +35,14 @@
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overalSingle }"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overalSingle" />
<a-switch @click="setOveralSingle" v-model:checked="overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: overalSingle }"
:class="{ active: overallSingle }"
>
Single
</div>
@@ -46,17 +55,15 @@
>
</a-slider>
</div>
</div>
</div>
</div>
<div class="result_apparel_print_img">
<img v-show="type_==1" class="result_appare_img" src="" alt="">
<img v-show="type_==2" class="result_print_img" src="" alt="">
<img v-show="type_==1" class="result_appare_img" :src="current.path" :title="current.type">
<img v-show="type_==2" class="result_print_img" :src="current.path" :title="current.type" @click="setPrint">
</div>
</div>
<div v-show="type_ == 2"></div>
<div v-show="type_ == 3">
<div class="result_color upload_title">
<i class="color_edit fi fi-bs-comments"></i>
@@ -64,53 +71,62 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<div :title="color?.name?color?.name:''" @click="selectColorItem(index,color)" @dblclick="setSelectColorItem(color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
<!-- <div class="color_content" :style="{background:`#6c6cac`}"></div> -->
<div class="color_content" :style="{'background-color':`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`}">
</div>
<div class="color_content_body">
<div class="color_des">22</div>
<div class="color_des">111</div>
<div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{ color.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="type_ == 1 || type_ == 3" @click.stop="setPreview" class="subitOkPreviewBtn">preview</div>
<div v-show="type_ == 2" @click.stop="setPrint" class="subitOkPreviewBtn">Layout</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
<DesignPrintOperation ref="DesignPrintOperation"></DesignPrintOperation>
</div>
</template>
<script>
import { defineComponent,computed,ref, h } from 'vue'
import { defineComponent,computed,ref, h ,inject} from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignPrintOperation from './DesignPrintOperation.vue';
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,
Draggable,Sketch,DesignPrintOperation
},
setup(prop) {
const store = useStore();
let type_ = ref(0);
let current = inject('current')//父组件传过来的数据
//印花
let overalSingle = ref()
let systemDesignerPercentage = ref(30)
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
//颜色
let colorList = ref([{},{},{},{},{},{},{},{}])
//加载中
let loadingShow = ref(false)
return{
overalSingle,
systemDesignerPercentage,
store,
current,
type_,
overallSingle,
systemDesignerPercentage,
colorList,
loadingShow,
}
},
data(){
@@ -127,40 +143,126 @@ export default defineComponent({
init(num){
this.type_ = num
this.colorList[this.selectIndex] = this.$parent.selectColor
this.overallSingle = this.current.printObject.ifSingle
this.systemDesignerPercentage = this.current.printObject.scale*100
console.log(this.current);
},
//模型
//印花
systemDesigner(num) {
console.log(num);
this.current.printObject.scale = num
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
},
formatter(value) {
return `${value}%`;
},
setPrint(){
if(this.current.printObject.url && this.current?.printObject?.url != 'none'){
let DesignPrintOperation = this.$refs.DesignPrintOperation
DesignPrintOperation.init()
}else{
message.error('Please select print');
}
},
deleteFile(){
this.current.printObject = {}
},
//颜色
selectColorItem(index,color){
let hex
let parent = this.$parent
this.selectIndex = index
this.$parent.selectIndex = index
if(this.$parent.selectColor.rgba.r == color?.rgba?.r && this.$parent.selectColor.rgba.g == color?.rgba?.g && this.$parent.selectColor.rgba.b == color?.rgba?.b){
return
}
if(color.rgba?.r){
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b])
hex = parent.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a])
}else{
hex = '#FFFFFF'
}
this.selectIndex = index
this.$parent.selectIndex = index
this.$parent.selectColor = color?.rgba + ''? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {rgba:{},hex:''}
this.$parent.selectColor = color?.rgba?.r != '' ? {rgba:{r:color.rgba?.r,g:color.rgba?.g,b:color.rgba?.b,a:color.rgba?.a},hex:hex} : {}
this.$parent.tcxColor = ''
this.$parent.pantongName = ''
},
setSelectColorItem(color){
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
let string = `${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a}`
this.current.color = string
designItemDetail.clothes.forEach((element,index) => {
if(element.id == this.current.id){
designItemDetail.clothes[index] = this.current
}
});
},
//提交
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
console.log(this.current,designItemDetail);
if(this.type_ == 1){
designItemDetail.clothes[index].id = this.current.id_
designItemDetail.clothes[index].path = this.current.path
return
}else if(this.type_ == 2){
this.setPrint()
return
}else if(this.type_ == 3){
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
designItemDetail.clothes[index].color = color
}
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
// this.parentData.design.designItemUrl = rv.designItemUrl
// this.$emit('finishRedesign',this.parentData)
// this.closeModal()
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.loadingShow = false
// this.closeModal()
console.log(rv);
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less" scoped>
.detail_modal_body_result{
width: 26%;
position: relative;
i{
font-size: 1.8rem;
display: block;
}
.upload_title{
display: flex;
margin-bottom: 1rem;
@@ -180,16 +282,20 @@ export default defineComponent({
display: flex;
flex-direction: column;
.result_apparel_print_img{
position: relative;
flex: 1;
img{
width: 100%;
width: auto;
height: 100%;
max-height: 35rem;
margin-top: 2rem;
}
.result_print_img{
transform: scale(.7);
transform: scale(.85);
transform-origin: right top;
position: absolute;
right: 0;
cursor: pointer;
}
}
}
@@ -198,11 +304,33 @@ export default defineComponent({
display: flex;
justify-content: space-between;
.print_left{
position: relative;
img{
width: 8rem;
width: auto;
height: 8rem;
margin: auto;
display: block;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
.print_right{
.habit_Overal_Single {
@@ -211,7 +339,6 @@ export default defineComponent({
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
@@ -248,13 +375,6 @@ export default defineComponent({
:deep(.ant-slider-handle:hover) {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
// .habit_System_Designer_text_max {
// display: flex;
// justify-content: space-between;
// .habit_System_Designer_text {
// }
// }
}
}
}
@@ -273,14 +393,21 @@ export default defineComponent({
position: relative;
cursor: pointer;
border: 0.1rem solid #DCDCEC;
height: 8.5rem;
width: 7rem;
box-sizing: border-box;
.color_content{
width: 7rem;
width: 100%;
height: 4rem;
}
.color_content_body{
.color_des{
font-size: 1.2rem;
font-weight: 600;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
}
.select_upload_color{
@@ -292,8 +419,10 @@ export default defineComponent({
}
}
}
.subitOkPreviewBtn{
bottom: 4rem;
position: absolute;
}
}

530
src/component/Detail/DesignDetailOld.vue
View File

@@ -1,530 +0,0 @@
<template>
<div>
<a-modal class="design_detail_modal_component"
v-model:visible="designDetailShow"
:footer="null"
title="Mailbox binding"
width="80%"
:maskClosable="false"
:centered="true"
>
<template #closeIcon>
<div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
</template>
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
<div class="design_detail_modal_body" v-show="designShowPrview == 1">
<div class="detail_modal_body_left" @click="showDesignImgDetail()">
<img class="detial_img" :src="designItemDetail.designItemUrl">
</div>
<div class="detail_modal_body_right">
<div class="detail_modal_right_top scroll_style">
<div class="clothes_detail_item">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Apparel</div>
<div class="clothes_item_content">
<!-- 拖拽功能 -->
<Draggable :list="designItemDetail.clothes" item-key="id" :animation="100">
<template #item="{ element,index }">
<div class="clothes_item_img_block" @click="clothesDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</template>
</Draggable>
</div>
</div>
<div class="clothes_detail_item" v-show="designItemDetail.others && designItemDetail.others.length">
<div class="clothes_item_header"><span class="icon iconfont icon-dangqianweizhi"></span>Others</div>
<div class="clothes_item_content others_clothes_item_content">
<div class="clothes_item_img_block" v-for="(element,index) in designItemDetail.others" :key="element.path" @click="othersDetail(element,index)">
<img class="clothes_item_img" :src="element.path">
</div>
</div>
</div>
</div>
<div class="detail_modal_right_bottom">
<div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
<div class="detail_redesign_button" @click="redesignItem()">Redesign</div>
</div>
</div>
</div>
<div class="design_detail_perview" v-show="designShowPrview == 2">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
</div>
</div>
<div class="design_detail_perview design_detail_perview_second" v-show="designShowPrview == 3">
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
</div>
<div class="design_detail_perview_content" >
<img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
<div class="img_item_hover">
<div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
</div>
</a-modal>
<ElementReplace ref="ElementReplace"></ElementReplace>
<AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
export default defineComponent({
components:{
ElementReplace,
AccessoryReplace,
Draggable,
},
setup() {
const store = useStore();
let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
let parentData:any = ref({
design:{},
index:0,
collectionList:[],
type:'',
})//父组件传过来的数据
return{
designItemDetail,
store,
parentData
}
},
data(){
return{
loadingShow:false,
designDetailShow:false,
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
}
},
methods:{
closeModal(){
if(this.designShowPrview == 1){
this.designDetailShow = false
}else if(this.designShowPrview == 2){
this.designShowPrview = this.designShowPrview - 1
}else if(this.designShowPrview == 3){
this.designShowPrview = 1
}
},
showDesignDetailModal(data:any){
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}`
this.parentData = data
this.loadingShow = true
Https.axiosGet(url).then(
(rv: any) => {
this.store.commit('setDesignItemDetail',rv)
this.generateHighDesignImg = rv.highDesignUrl
this.designShowPrview = 1
this.designDetailShow = true
this.loadingShow = false
}
).catch(rv=>{
this.loadingShow = false
})
},
//切换上一张或下一张图的详情
changeDesignItem(type:string){
let {design,index,collectionList} = this.parentData
let newDesign = {}
let newIndex = 0
if(type === 'last'){
if(index>0){
newIndex = this.parentData.index - 1
}else{
newIndex = this.parentData.collectionList.length - 1
}
}else{
if(index < this.parentData.collectionList.length - 1){
newIndex = this.parentData.index + 1
}else{
newIndex = 0
}
}
newDesign = collectionList[newIndex]
let data = {
design:newDesign,
index:newIndex,
collectionList:collectionList
}
this.showDesignDetailModal(data)
},
//显示图片详情
showDesignImgDetail(){
if(this.generateHighDesignImg){
this.designShowPrview = 3
}else{
this.designShowPrview = 2
}
},
//生成高级图片
generateHighDesign(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
(rv: any) => {
this.generateHighDesignImg = rv
this.loadingShow = false
this.designShowPrview = 3
}
).catch(rv=>{
this.loadingShow = false
})
},
//删除生成的真人图
deleteGeneratePic(){
let design:any = this.parentData.design
let data = {
designItemId: design.designItemId,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
(rv: any) => {
this.loadingShow = false
this.generateHighDesignImg = ''
this.designShowPrview = 2
}
).catch(rv=>{
this.loadingShow = false
})
},
//元素替换
clothesDetail(clothes:any, index:number){
let elementReplace:any = this.$refs.ElementReplace
let data ={
clothes:clothes,
index:index,
}
elementReplace.showelementReplaceModal(data)
},
othersDetail(others:any, index:number){
let accessoryReplace:any = this.$refs.AccessoryReplace
let data ={
others:others,
index:index,
}
accessoryReplace.showAccessoryReplaceModal(data)
},
//重新设计
redesignItem(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
delete designItemDetail.designItemUrl
let priority = designItemDetail.clothes.map((v:any)=>{
return v.type
})
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv: any) => {
this.parentData.design.designItemUrl = rv.designItemUrl
this.$emit('finishRedesign',this.parentData)
this.closeModal()
this.loadingShow = false
this.closeModal()
}
).catch(res=>{
this.loadingShow = false
});
}
}
})
</script>
<style lang="less">
.design_detail_modal_component{
color: #000;
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
overflow-y: hidden;
padding: 0;
}
.close_icon{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
line-height: 3.6rem;
text-align: center;
.icon-guanbi{
font-size: 2rem;
color: #ffffff;
}
}
.turn_button{
width: 3.6rem;
height: 3.6rem;
background: #000000;
border-radius: 50%;
position: absolute;
top: calc(50% - 1.8rem);
cursor: pointer;
line-height: 3.6rem;
text-align: center;
&.turn_left_button{
left: -8rem;
}
&.turn_right_button{
right: -8rem;
}
.icon_turn{
font-size: 2.4rem;
color: #ffffff;
}
}
.design_detail_modal_body{
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 1.5rem 1rem 2.5rem;
box-sizing: border-box;
.detail_modal_body_left{
width: 43.3rem;
height: 100%;
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
.detial_img{
max-width: 100%;
max-height: 100%;
}
}
.detail_modal_body_right{
width: calc(100% - 44rem);
height: 100%;
.detail_modal_right_top{
width: 100%;
height: calc(100% - 3.9rem);
background: #fff;
overflow-y: auto;
.clothes_detail_item{
padding-left: 1.5rem;
.clothes_item_header{
height: 6.4rem;
display: flex;
align-items: center;
font-size: 18px;
color: #000000;
.icon-dangqianweizhi{
font-size: 1.8rem;
color: #000000;
margin-right: 1rem;
}
}
.clothes_item_content{
padding:0 0.5rem 2.3rem;
border-bottom: 0.1rem solid #F2F3FB;
&.others_clothes_item_content{
border-bottom:none
}
.clothes_item_img_block{
width: 20.5rem;
height: 20.5rem;
border: 0.1rem solid #F5F5F5;
display: inline-block;
text-align: center;
line-height: 21.3rem;
margin-right: 1rem;
margin-bottom: 1rem;
.clothes_item_img{
max-width: 100%;
max-height: 100%;
}
}
}
}
}
.detail_modal_right_bottom{
position: relative;
.detail_page_num{
position: absolute;
top: 2rem;
left: 12.4rem;
font-size: 1.8rem;
font-family: Roboto;
font-weight: 400;
color: #000000;
}
.detail_redesign_button{
position: absolute;
top: 1.4rem;
right: 0;
padding: 0 1.8rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
}
}
}
.design_detail_perview{
width: 100%;
height: 100%;
padding: 0.7rem 0 0.6rem;
&.design_detail_perview_second{
width: 100%;
height: 100%;
padding: 0.7rem 9.1rem 0.6rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.design_detail_perview_content{
width: 46.2rem;
height: 100%;
background: #fff;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
.perview_img{
max-width: 100%;
max-height: 100%;
}
.generate_button{
position: absolute;
top: 0;
right: -20.2rem;
padding: 0 1.5rem;
text-align: center;
height: 3.6rem;
line-height: 3.6rem;
background: #343579;
font-size: 14px;
font-family: Roboto;
color: #FFFFFF;
cursor: pointer;
}
&:hover .img_item_hover{
display: block;
}
.img_item_hover{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top:0;
background: rgba(0,0,0,0.4);
display: none;
.img_operate_block{
width: 3.6rem;
height: 3.6rem;
background: rgba(0,0,0,0.6);
border-radius: 50%;
position: absolute;
right: 2.2rem;
text-align: center;
line-height: 3.6rem;
cursor: pointer;
&.delete_img_block{
top: 2rem;
}
.operate_icon{
font-size: 1.8rem;
color: #fff;
}
}
}
}
}
}
</style>

848
src/component/Detail/DesignPrintOperation.vue Normal file
View File

@@ -0,0 +1,848 @@
<template>
<div>
<a-modal
class="designOpenrtion_modal"
v-model:visible="designOpenrtion"
:footer="null"
width="80%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
>
<div class="designOpenrtion_content">
<div class="design_title_text">
<div>Placement</div>
</div>
<div class="design_closeIcon" @click.stop="closeModal()">
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="designOpenrtion_open">
<!-- -->
<div class="print_right">
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
<div
class="habit_Overal_Single_text"
:class="{ active: overallSingle }"
>
Single
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
</a-slider>
</div>
<div v-show="current.printObject.ifSingle" @click="random" class="button_second">Random</div>
<div v-show="current.printObject.ifSingle" class="print_input">
<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
</div>
<div class="designOpenrtion_nav">
<div class="designOpenrtion_single" v-show="current.printObject.ifSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
<img :src="item.url" @click="setpitch(item,index)">
</div>
<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
<img :src="designOpenrtionList[0].url">
</div>
</div>
<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
</div>
</div>
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="sketch">
<div class="designOpenrtion_print">
<div
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList[index].style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.url" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div>
</div>
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtion_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</a-modal>
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup(prop) {
let designOpenrtion = ref(false);
let designOpenrtionList = ref([])
let current = inject('current')//父组件传过来的数据
let overallSingle = ref(false)
let systemDesignerPercentage = ref(0)
let printAmount = ref(1)//印花数量
let printZIndex = ref(2)//印花优先级
let printStyleList = ref([{
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let print = ref({
width:'',
height:''
})
let sketch = ref({
width:'',
height:''
})
let loadingShow = ref(false)
return {
designOpenrtion,
designOpenrtionList,
overallSingle,
systemDesignerPercentage,
current,
printAmount,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
print,
sketch,
loadingShow,
};
},
data() {
return {
store: useStore(),
};
},
directives:{
//操作旋转
rotote:{
mounted(el,value){
let mouse = true;
let angle = 0
let num = 1
let x = 0
let y = 0
num = value.value[1].scale
angle = value.value[1].rotateZ
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.value[0]]
// 添加鼠标按下事件监听器
el.style.transform = "rotateZ("+ angle + "deg)"
el.addEventListener('mousedown', (e) => {
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
document.addEventListener('mousemove', (e) => {
if (mouse) {
let X = eX
let Y = eY
let x = e.clientX - X
let y = Y - e.clientY
angle = Math.atan2(x,y)*(180 / Math.PI)
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
el.style.transform = "rotateZ("+ angle + "deg)"
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
});
});
//缩放
// let timeSwitch = true
// el.parentNode.addEventListener('mousemove', (e) => {
// el.parentNode.addEventListener('mousewheel',(e) => {
// if(timeSwitch){
// timeSwitch = false
// if(e.deltaY > 0){
// if(num <= 1){
// num -= 0.05
// }else{
// num -= 0.1
// }
// }else{
// //放大
// if(num <= 1){
// num += 0.05
// }else{
// num += 0.1
// }
// }
// if(num >= 3){
// num = 3
// }else if (num < .2){
// num = .2
// }
// setTimeout(() => {
// timeSwitch = true
// }, 100);
// elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
// console.log(num);
// }
// });
// });
}
},
},
methods: {
init(){
let DesignPrintOperationParent = this.$parent
this.designOpenrtion = true
this.clearModal()
this.designOpenrtionList.push(this.current.printObject)
this.overallSingle = DesignPrintOperationParent.overallSingle
this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
let skecth = new Image
skecth.src = this.current.path
skecth.onload=()=>{
this.sketch.width = skecth.width/10+'rem'
this.sketch.height = skecth.height/10+'rem'
}
let print = new Image
print.src = this.current.printObject.url
print.onload=()=>{
this.print.width = print.width+'px'
this.print.height = print.height+'px'
this.printStyleList[0].style.width = print.width+'px'
this.printStyleList[0].style.height = print.height+'px'
}
},
systemDesigner(num) {
this.current.printObject.scale = num
},
setOveralSingle(){
},
formatter(value) {
return `${value}%`;
},
setOveralSingle(){
this.current.printObject.ifSingle = this.overallSingle
if (!this.current.printObject.ifSingle) {
this.printAmount = 1
this.setprintAmount()
}
},
setpitch(item,index){
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
},
//设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[index].designOpenrtionBtn = true
this.printStyleList[index].style.zIndex = this.printZIndex++
this.printStyleList[index].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
let scale = Number(this.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(this.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
this.printStyleList[this.imgDomIndex].transform = {
scale:scale,
rotateZ:rotateZ,
}
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
}
if(x.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
}
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
}
if(y.replace(/px/g,'') <= 0){
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
}
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let num = width/height
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
this.printStyleList[this.imgDomIndex].style.width = width
this.printStyleList[this.imgDomIndex].style.height = height
},
//鼠标抬起
sizeMouseup(e){
this.printStyleList[this.imgDomIndex].style={
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
setprintAmount(){
if(this.printAmount < 1){
this.printAmount = 1
return
}
if(this.printAmount > 10){
this.printAmount = 10
return
}
let printTiemNum
if(this.printAmount>this.printStyleList.length){
let num = this.printAmount - this.printStyleList.length
for (let index = 0; index < num; index++) {
this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
this.refetchTemplate(this.printStyleList.length-1)
this.designOpenrtionList.push(this.current.printObject)
}
}else{
let num = this.printStyleList.length - this.printAmount
this.designOpenrtionList.splice(this.printStyleList.length-num,num)
this.printStyleList.splice(this.printStyleList.length-num,num)
}
this.printStyleList.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
this.imgDomIndex = this.printStyleList.length-1
},
random(){
this.printStyleList.forEach((v,index)=>{
this.refetchTemplate(index)
})
},
//随机重置图片顺序
refetchTemplate(index) {
let scale = (Math.trunc(Math.random()*15)+1)*.1
let rotateZ1 = Math.trunc(Math.random()*360)+1
let rotateZ2 = Math.trunc(Math.random()*360)+1
let sketch = document.getElementsByClassName('designOpenrtion_sketch')[0]
console.log(sketch.offsetHeight);
let x = sketch.width-Number(this.print.width.replace(/px/g,''))
let y = sketch.height-Number(this.print.height.replace(/px/g,''))
this.printStyleList[index]={
centers:{
left:0,
top:0,
},
style:{
left:Math.trunc(Math.random()*x)+1+"px",
top:Math.trunc(Math.random()*y)+1+"px",
right:"auto",
bottom:"auto",
width:this.print.width.replace(/px/g,'')*scale+'px',
height:this.print.height.replace(/px/g,'')*scale+'px',
zIndex:this.printZIndex++
},
transform:{
// scale:scale<.2?.2:scale,//0.2-3
rotateZ:rotateZ1-rotateZ2,
},
designOpenrtionBtn:false
}
},
setPreview(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let index
let scale = this.printStyleList[0].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,'')
designItemDetail.clothes.forEach((v,ind)=>{
if(v.id == this.current.id){
index = ind
}
})
let priority = designItemDetail.clothes.map((v)=>{
return v.type
})
// let
let data = {
...designItemDetail,
priority:priority,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // this.parentData.design.designItemUrl = rv.designItemUrl
// // this.$emit('finishRedesign',this.parentData)
// // this.closeModal()
// let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
// console.log(designItemDetail);
// this.loadingShow = false
// // this.closeModal()
// console.log(rv);
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
clearModal(){
this.printAmount = 1//显示数量
this.designOpenrtion = true//modal页面关闭
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.designOpenrtionList = []
this.printStyleList.splice(1,this.printStyleList.length-1)
this.printStyleList[0] = {
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:'auto',
height:'auto',
zIndex:1,
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}
},
closeModal(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let _this = this
Modal.confirm({
title: 'The above changes are not saved, being sure to continue? ',
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
// centered:true,
onOk() {
_this.designOpenrtion=false
}
});
},
},
});
</script>
<style lang="less">
.designOpenrtion_modal {
max-width: 1440px;
.ant-modal-body{
padding: 4rem 5rem 0rem!important;
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: 1rem;
overflow: hidden;
}
.designOpenrtion_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
display: flex;
flex-direction: column;
height: 100%;
.designOpenrtion_header {
position: relative;
height: 6.6rem;
width: 100%;
background: #F7F7F7;
.placement_modal_title{
position: absolute;
height: 100%;
line-height: 6.6rem;
left: 3.7rem;
top: 0;
font-size: 1.8rem;
color: #030303;
}
}
.designOpenrtion_open{
position: absolute;
top: 50%;
transform: translateY(-50%);
.print_right{
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid;
padding: 2rem 0;
width: 16rem;
border-radius: 1rem;
.habit_Overal_Single {
display: flex;
align-items: center;
justify-content: center;
// margin: 2rem 0;
transform: scale(.8);
// margin: 3rem 0;
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
&.active {
color: rgba(0, 0, 0, 0.7);
// font-weight: 900;
transform: scale(1.2);
}
}
.ant-switch {
margin: 0 1rem;
background-color: #efefef;
}
.ant-switch-checked {
background-color: #000;
}
}
.habit_System_Designer {
margin-top: 4rem;
transform: scale(.8);
width: 100%;
.ant-slider-track,
.ant-slider-rail {
height: .6rem;
background-color: #e1e1e1;
border-radius: 0.5rem;
}
.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);
}
}
.button_second{
margin-top: 1rem;
}
.print_input{
margin-top: 1rem;
.search_input{
width: 9.85rem;
padding: 0 1.5rem;
border: 2px solid #000;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
border-radius: 1.5rem;
&::placeholder {
color: #C2C2C2;
}
}
}
.designOpenrtion_nav{
display: flex;
margin-top: 2rem;
flex-wrap: wrap;
width: 100%;
height: 10rem;
overflow-x: hidden;
justify-content: space-evenly;
&.designOpenrtion_nav::-webkit-scrollbar {
display: none;
}
.active{
img{
border: 2px solid;
border-radius: 2px;
box-sizing: border-box;
}
}
.designOpenrtion_single{
width: 40%;
}
img{
width: 100%;
cursor: pointer;
}
.designOpenrtion_overall{
width: 80%;
}
}
}
}
.designOpenrtion_centent{
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
>img{
z-index: 2;
position: relative;
max-width: 100%;
max-height: 100%;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1;
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
}
}
.designOpenrtion_btn{
z-index: 3;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin: 1rem 0;
width: 10rem;
text-align: center;
position: initial;
transform: none;
}
}
}
</style>

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

@@ -1,41 +1,51 @@
<template>
<div class="habit">
<div class="habit_button" @click="habitBtn" >
<div v-show="openType.habit" class="habit_mask"></div>
<div class="habit_button" @click.stop="setOpenType('habit')" >
Workspace
<i class="fi fi-bs-angle-down"></i>
</div>
<div class="habit_content" v-fade="habit">
<div class="habit_content" v-fade="openType.habit">
<div class="habit_title">
<h3 class="" @click="aaa()">Workspace Setting</h3>
<h3>Workspace Setting</h3>
<div class="habit_intro">adjust your workspace setting</div>
</div>
<div class="habit_type" trigger="['click']">
<a-dropdown placement="bottomRight">
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<div class="habit_type" trigger="['click']" >
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
<a-button>
<UserOutlined />
{{habitType.habitTypeone}}
{{workspaceItem.workSpaceName}}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_workspace_show" v-fade="openType.workspace">
<ul class="habit_model_list">
<li v-for="item,index in workspace.workspaceList">
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.name }}</div>
<input v-show="item.putName" type="text" v-model="workspaceItemName">
<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
</li>
<li @click="newWorkspace" class="newWorkspace">
<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
<div v-show="!openType.addWorkspace">+</div>
</li>
</ul>
</div>
</div>
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !checked }"
:class="{ active: !workspaceItem.sexType }"
>
男
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
<div
class="habit_Overal_Single_text"
:class="{ active: checked }"
:class="{ active: workspaceItem.sexType }"
>
女
</div>
@@ -43,36 +53,37 @@
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !checked }"
:class="{ active: !workspaceItem.overallSingle }"
>
Overal
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: checked }"
:class="{ active: workspaceItem.overallSingle }"
>
Single
</div>
</div>
<div class="habit_habit_singleton" v-show="checked">
<a-dropdown >
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1"> 上衣 </a-menu-item>
<a-menu-item key="2"> 裤子 </a-menu-item>
</a-menu>
</template>
<div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
<a-dropdown @click.stop="setOpenType('singleton')">
<a-button>
<UserOutlined />
{{ workspace.position }}
{{ workspaceItem.position }}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_singleton_show" v-fade="openType.singleton">
<ul class="habit_model_list">
<li v-for="item,index in singleTypeList">
<div @click.stop="setSingle(item.value)">{{ item.label }}</div>
</li>
</ul>
</div>
</div>
<div class="habit_System_Designer">
<a-slider id="system_silder"
v-model:value="workspace.systemDesignerPercentage"
v-model:value="workspaceItem.systemDesignerPercentage"
@afterChange="systemDesigner"
:tip-formatter="formatter"
>
@@ -85,7 +96,7 @@
<div class="habit_model">
<a-dropdown placement="bottomRight"
trigger="['click']"
@click="modelBtn"
@click.stop="setOpenType('model')"
>
<a-button>
<UserOutlined />
@@ -94,7 +105,7 @@
</a-button>
</a-dropdown>
</div>
<div id="modelShow" class="habit_model_show" v-fade="model">
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
<div class="habit_btn">
<div class="model_current">
<div class="model_text">Current</div>
@@ -106,20 +117,20 @@
<div class="model_text">
<div
class="habit_System_Seleves_text"
:class="{ active: !checked }"
:class="{ active: systemSeleves }"
>
System
</div>
<a-switch v-model:checked="checked" />
<a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
<div
class="habit_System_Seleves_text"
:class="{ active: checked }"
:class="{ active: !systemSeleves }"
>
Seleves
</div>
</div>
<div class="model_img">
<div v-for="(item,index) in checked?obj:obj2" :key="item.id">
<div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
<img :src="item.url" alt="">
</div>
</div>
@@ -128,104 +139,192 @@
</div>
</div>
<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
</div>
</template>
<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import type { MenuProps } from "ant-design-vue";
import axios from "axios";
import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
components: {
DownOutlined,
UserOutlined,
ModelsModal,
},
setup(){
let workspace = ref({
sex:'male',
let workspaceItem = ref({
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:30,
position:'top'
position:'top',
sex:'male',
sexType:false,
overallSingle:false,
current:{
})
let checked:any= ref(true);
let value = ref<number>(30);
let tooltip = ref(true);
let habit = ref(false);
let model = ref(false);
let habitType = ref({
habitTypeone:"Workspace Setting",
habitTypeList:[
{
id:1,
name:"11111"
},
{
id:2,
name:"222"
},
{
id:2,
name:"333"
},
],
});
let obj= ref([
{
},
system:[{
id:1,
url:"11111"
},
{
id:2,
url:"11111"
},
]);
let obj2= ref([
{
}],
seleves:[{
id:1,
url:"22"
},
{
id:2,
url:"222"
}],
})
let systemSeleves= ref(true);
let openType = ref({
workspace:false,
singleton:false,
habit:false,
model:false,
addWorkspace:false,
})
let workspace = ref({
id:'2',
workspaceList:[
{
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:24,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:2,
name:"工作台3",
putName:false,
systemDesignerPercentage:23,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:3,
name:"工作台1",
putName:false,
systemDesignerPercentage:100,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
],
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
])
// const stringg = ref()
const habitTypeclick : MenuProps['onClick'] = (e)=>{
// this.habitType.habitTypeone = e
}
// const stringg:Ref<HTMLElement | null> = ref(null)
// const aaa = ()=>{
// if(stringg.value){
// console.log(stringg.value.classList)
// }
// }
return{
habitTypeclick,
checked,
value,
tooltip,
habit,
model,
habitType,
obj,
obj2,
workspace
systemSeleves,
openType,
workspace,
workspaceItem,
workspaceItemName,
singleTypeList
}
},
watch:{
'openType.habit':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
if(!newVal){
this.store.commit("setWoekspace", this.workspaceItem);
}
}
},
'workspaceItem.id':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
// if(!newVal){
// this.store.commit("setWoekspace", this.workspaceItem);
// }
this.workspace.workspaceList = this.workspace.workspaceList
}
},
workspaceItem:{
handler(newVal:any,oldVal:any){
console.log(123123);
// this.store.state.Workspace.workspace
}
}
},
data() {
return {
store: useStore(),
};
},
mounted() {
this.getworkspace()
},
directives:{
fade:{
mounted (el) {
el.addEventListener('click',()=>{
})
},
updated (el,model){
if(model.value){
el.style.display="block"
@@ -243,38 +342,154 @@ export default defineComponent({
},
methods: {
getworkspace(){
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
console.log(123);
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
// if (rv) {
// console.log(rv,'workspace');
// }
// })
// let url = Https.httpUrls.workspaceList + `?page=0&size=10`
// Https.axiosGet(url).then(
// (rv: any) => {
// console.log(rv);
// }
// ).catch(rv=>{
// })
let data = {
page:1,
size:10,
}
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
if (rv) {
console.log(rv,'workspace');
this.workspace.workspaceList = rv.page.content
this.workspace.workspaceList.forEach((rv:any)=>{
if(rv.sex == '男装'){
rv.sexType == true
}else{
rv.sexType == false
}
})
}
})
},
handleButtonClick(e: Event) {
setSex(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
},
setOverall(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
},
//修改名字
putName(index:number,v:string){
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
if(v == 'put'){
this.workspaceItemName = this.workspace.workspaceList[index].name
this.workspace.workspaceList[index].putName = true
}else if (v == 'delete'){
this.workspace.workspaceList.splice(index,1)
}else{
if(this.workspaceItemName == ''){
message.error('Please enter a workbench name');
}else{
if(index == -1){
this.workspace.workspaceList.push(this.workspaceItem)
console.log("click left button", e);
},
handleMenuClick(e: Event) {
// console.log("click", e);
this.getworkspace()
},
systemDesigner(num: Number) {
console.log(num);
this.workspaceItem.id = 2
this.workspaceItem.name = this.workspaceItemName
this.openType.addWorkspace = false
}else{
console.log(this.workspaceItemName,this.workspaceItem);
this.workspace.workspaceList[index].name = this.workspaceItemName
this.workspace.workspaceList[index].putName = false
}
}
}
},
//设置系统设计占比
systemDesigner(num: number) {
this.workspaceItem.systemDesignerPercentage = num
},
formatter(value: number) {
return `${value}%`;
},
habitBtn(){
this.habit = !this.habit
if(!this.habit){
this.model = false
console.log(this.habit);
//根据id设置当前参数
setWorkspace(num:number){
this.openType.addWorkspace = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == num){
this.workspaceItem = v
}
})
this.openType.workspace = false
},
//新建参数
newWorkspace(){
this.openType.addWorkspace = true
},
//设置single & overall
setSingle(v:string){
this.openType.singleton = false
this.workspaceItem.position = v
},
//切换系统还是自己的模特
setSystemSeleves(){
},
setOpenType(v:string){
if(v == 'habit'){
this.openType.habit = !this.openType.habit
}else if(v == 'workspace'){
this.openType.singleton = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.openType.workspace = !this.openType.workspace
}else if(v == 'model'){
this.openType.singleton = false
this.openType.workspace = false
this.openType.model = !this.openType.model
}else if(v == 'singleton'){
this.openType.singleton = !this.openType.singleton
this.openType.workspace = false
}
let mask = document.getElementsByClassName("habit_mask")[0]
mask.addEventListener("click", this.documentClick,true);
},
modelBtn(){
this.model = !this.model
documentClick(){
let mask = document.getElementsByClassName("habit_mask")[0]
mask.removeEventListener("click", this.documentClick);
this.openType.habit = false
this.openType.workspace = false
this.openType.model = false
this.openType.singleton = false
},
// //选择模特
// selectModels() {
// let modelsModal: any = this.$refs.modelsModal;
// modelsModal.init();
// },
// //确定选择模特
// sureSelectModel(event: any) {
// this.store.commit("setTemplateData", event);
// },
},
});
</script>
@@ -292,12 +507,24 @@ export default defineComponent({
padding: .4rem 1.5rem;
font-size: 1.2rem;
cursor: pointer;
position: relative;
.fi-bs-angle-down {
margin-left: 1rem;
display: inline-block;
transform: translateY(2px);
}
}
.habit_mask{
position: absolute;
top: -20px;
left: auto;
right: -30px;
bottom: 0;
// background: #000;
opacity: 0;
width: 100vw;
height: 100vh;
}
.habit_content {
border: solid 2px #000;
border-radius: 1rem;
@@ -333,12 +560,19 @@ export default defineComponent({
}
.habit_type {
margin-top: 1.5rem;
// cursor: pointer;
button{
cursor: pointer;
position: relative;
.habit_workspace_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
}
button:hover{
color: rgba(0, 0, 0, 0.5);
&.active{
transform: translateY(0%);
}
}
}
.habit_Overal_Single {
@@ -361,6 +595,19 @@ export default defineComponent({
}
.habit_habit_singleton {
margin-bottom: 3rem;
position: relative;
.habit_singleton_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
&.active{
transform: translateY(0%);
}
}
}
.habit_System_Designer {
margin-top: 8rem;
@@ -388,7 +635,6 @@ export default defineComponent({
}
.habit_model{
margin-top: 2rem;
}
.habit_model_show{
@@ -412,6 +658,49 @@ export default defineComponent({
display: flex;
justify-content: space-between;
}
.habit_model_list{
margin: 0;
li{
padding: .5rem 0;
display: flex;
input{
border: 0;
width: 80%;
background: rgba(0,0,0,0);
}
>div{
cursor: pointer;
width: 80%;
}
&.newWorkspace{
text-align: center;
justify-content: center;
div{
border-radius: 50%;
border: 1px solid #000;
display: inline-block;
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
}
i{
flex: 1;
}
}
i{
cursor: pointer;
}
.fi-rr-trash{
margin-left: 1rem;
}
}
li:hover{
background: rgba(0, 0, 0, 0.1);
}
}
.model_Designer{
.model_text{
display: flex;