调整部分bug
This commit is contained in:
4
.env.dev
4
.env.dev
@@ -8,6 +8,4 @@ VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
|
|||||||
# 徐佩
|
# 徐佩
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.31.118:5567'
|
# VUE_APP_BASE_URL = 'http://192.168.31.118:5567'
|
||||||
# 海波
|
# 海波
|
||||||
# VUE_APP_BASE_URL = 'http://192.168.1.3:5567'
|
# VUE_APP_BASE_URL = 'http://192.168.31.34:5567'
|
||||||
|
|
||||||
ss
|
|
||||||
|
|||||||
BIN
src/assets/images/icon/details_model.png
Normal file
BIN
src/assets/images/icon/details_model.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 B |
11
src/assets/images/icon/details_model.svg
Normal file
11
src/assets/images/icon/details_model.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1889_2355)">
|
||||||
|
<path d="M10.9998 0C8.74433 0 6.91631 1.90562 6.91631 4.25642C6.91631 6.60723 8.74468 8.51249 10.9998 8.51249C13.255 8.51249 15.0833 6.60686 15.0833 4.25642C15.0833 1.90599 13.2553 0 10.9998 0ZM8.69973 4.25642C8.69973 2.93251 9.72924 1.85951 10.9998 1.85951C12.2704 1.85951 13.2996 2.93251 13.2996 4.25642C13.2996 5.58034 12.2701 6.65334 10.9998 6.65334C9.72958 6.65334 8.69973 5.58034 8.69973 4.25642ZM7.37514 10.746C7.40545 10.7358 7.43715 10.7308 7.46921 10.7311H14.5304C14.5628 10.7311 14.5949 10.7366 14.6256 10.7471L20.2159 12.6894V14.3118C20.2159 14.4116 20.1699 14.5053 20.0922 14.5638C20.0145 14.6219 19.9145 14.6375 19.8236 14.6055L15.3189 13.0402C14.9743 12.9207 14.5959 12.981 14.3016 13.2021C14.0072 13.4232 13.8326 13.7787 13.8326 14.1567V22H15.6164V15.1026L19.2613 16.3696C19.8957 16.5896 20.5932 16.4788 21.1356 16.0711C21.6781 15.6637 22 15.009 22 14.3121V12.4653C21.9997 11.7987 21.5899 11.2072 20.9834 10.9966L15.1896 8.98381C14.9771 8.9101 14.7548 8.87233 14.5308 8.87233H7.46921C7.24554 8.87233 7.02326 8.90937 6.81039 8.98381L1.42354 10.8553C0.573456 11.1501 0 11.9788 0 12.9123V14.3114C0 15.0082 0.321567 15.6629 0.864016 16.0703C1.40646 16.4781 2.10395 16.5889 2.73837 16.3688L5.99202 15.2385C6.08295 15.2065 6.18294 15.2221 6.26063 15.2806C6.33832 15.3387 6.38466 15.4324 6.38466 15.5322V21.9996H8.16843V15.5322C8.16843 14.835 7.84687 14.18 7.30407 13.7722C6.76127 13.3644 6.06344 13.254 5.42867 13.4748L2.17502 14.6052C2.08444 14.6368 1.9848 14.6208 1.90745 14.5627C1.82976 14.5046 1.78412 14.4109 1.78377 14.3114V12.9123C1.78377 12.7794 1.86495 12.6611 1.98584 12.6186L7.37514 10.7471V10.746Z" fill="black"/>
|
||||||
|
<path d="M11.8931 17.5625H10.1094V21.9998H11.8931V17.5625Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1889_2355">
|
||||||
|
<rect width="22" height="22" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -720,6 +720,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.generalModel_state .generalModel_state_item.smail .el-cascader {
|
.generalModel_state .generalModel_state_item.smail .el-cascader {
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
}
|
}
|
||||||
|
.generalModel_state .generalModel_state_item.smail .ant-select-selection-placeholder {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
.generalModel_state .generalModel_state_item > input {
|
.generalModel_state .generalModel_state_item > input {
|
||||||
height: 6rem !important;
|
height: 6rem !important;
|
||||||
padding: 1rem !important;
|
padding: 1rem !important;
|
||||||
@@ -762,8 +766,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item {
|
.generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: inline-block;
|
||||||
align-items: center;
|
overflow: hidden;
|
||||||
|
line-height: 2.7rem;
|
||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item .el-cascader {
|
.generalModel_state .generalModel_state_item .el-cascader {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
|
|||||||
@@ -791,7 +791,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.el-cascader{
|
.el-cascader{
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
}
|
}
|
||||||
|
.ant-select-selection-placeholder{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
>input{
|
>input{
|
||||||
height: 6rem !important;
|
height: 6rem !important;
|
||||||
@@ -838,8 +841,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.ant-select-selector{
|
.ant-select-selector{
|
||||||
.ant-select-selection-item{
|
.ant-select-selection-item{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
// display: flex;
|
||||||
align-items: center;
|
display: inline-block;
|
||||||
|
// align-items: center;
|
||||||
|
//文字超出隐藏
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 2.7rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -139,7 +139,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
onMounted(async ()=>{
|
onMounted(async ()=>{
|
||||||
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
|
let GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
|
||||||
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
|
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
|
||||||
if(!window.isAddGmail){
|
if(!window.isAddGmail){
|
||||||
if(!existingScript){
|
if(!existingScript){
|
||||||
|
|||||||
@@ -82,11 +82,9 @@ export default defineComponent({
|
|||||||
operationsModal:false,
|
operationsModal:false,
|
||||||
operationsEdit:false,
|
operationsEdit:false,
|
||||||
loadingShow:false,
|
loadingShow:false,
|
||||||
title:''
|
title:'',
|
||||||
})
|
|
||||||
let operationsData = reactive({
|
|
||||||
name:'',
|
name:'',
|
||||||
type:'Enterprise',
|
systemUser:'Enterprise',
|
||||||
})
|
})
|
||||||
let state = ref([
|
let state = ref([
|
||||||
{
|
{
|
||||||
@@ -104,38 +102,37 @@ export default defineComponent({
|
|||||||
operations.title = funStr
|
operations.title = funStr
|
||||||
if(funStr == 'Add') operations.operationsEdit = false
|
if(funStr == 'Add') operations.operationsEdit = false
|
||||||
if(funStr == 'Edit'){
|
if(funStr == 'Edit'){
|
||||||
operationsData.name=data.name
|
operations.systemUser=data.type
|
||||||
operationsData.type=data.type
|
operations.name=data.name
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
let setAddData = ()=>{
|
let setAddData = ()=>{
|
||||||
return {
|
return {
|
||||||
"name": operationsData.name,
|
"type": operations.systemUser,
|
||||||
"type": operationsData.type,
|
name:operations.name,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let setEditData = ()=>{
|
let setEditData = ()=>{
|
||||||
return {
|
return {
|
||||||
"name": operationsData.country,
|
"type": operations.systemUser,
|
||||||
"type": operationsData.credits,
|
name:operations.name,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
let cancelDsign = ()=>{
|
let cancelDsign = ()=>{
|
||||||
operationsData.name=''
|
operations.value='Enterprise'
|
||||||
operationsData.type='Enterprise'
|
operations.operationsModal = false
|
||||||
|
operations.operationsEdit = false
|
||||||
}
|
}
|
||||||
let setOk = ()=>{
|
let setOk = ()=>{
|
||||||
let data
|
let data
|
||||||
if(operations.title == 'Add'){
|
if(operations.title == 'Add'){
|
||||||
data = setAddData()
|
data = setAddData()
|
||||||
if(!data.name)return message.warning('Please check the input box marked with *')
|
if(!data.name)return message.warning('Please check the input box marked with *')
|
||||||
Https.axiosPost(Https.httpUrls.addOrganization, data).then(
|
Https.axiosGet(Https.httpUrls.addOrganization, {params:data}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if (rv) {
|
cancelDsign()
|
||||||
cancelDsign()
|
emit('searchHistoryList')
|
||||||
emit('searchHistoryList')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -143,7 +140,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
...toRefs(operations),
|
...toRefs(operations),
|
||||||
...toRefs(operationsData),
|
|
||||||
state,
|
state,
|
||||||
cancelDsign,
|
cancelDsign,
|
||||||
init,
|
init,
|
||||||
|
|||||||
@@ -104,39 +104,37 @@ export default defineComponent({
|
|||||||
const columns: any = computed(() => {
|
const columns: any = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
title: "City",
|
title: "Id",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "city",
|
dataIndex: "id",
|
||||||
key: "city",
|
key: "id",
|
||||||
width:150,
|
width:150,
|
||||||
ellipsis:true
|
ellipsis:true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Country",
|
title: "Name",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "country",
|
dataIndex: "name",
|
||||||
key: "country",
|
key: "name",
|
||||||
width:150,
|
width:150,
|
||||||
ellipsis:true
|
ellipsis:true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Create Time",
|
title: "Create Time",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "createTime",
|
dataIndex: "createTime",
|
||||||
key: "createTime",
|
key: "createTime",
|
||||||
width:150,
|
width:150,
|
||||||
ellipsis:true,
|
ellipsis:true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Status",
|
title: "Type",
|
||||||
align: "center",
|
align: "center",
|
||||||
dataIndex: "status",
|
dataIndex: "type",
|
||||||
key: "status",
|
key: "type",
|
||||||
fixed: "right",
|
|
||||||
width:150,
|
width:150,
|
||||||
Operations: true,
|
|
||||||
ellipsis:true,
|
ellipsis:true,
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
//改变页码
|
//改变页码
|
||||||
@@ -158,9 +156,9 @@ export default defineComponent({
|
|||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
if (rv) {
|
if (rv) {
|
||||||
console.log(rv)
|
console.log(rv)
|
||||||
// this.dataList = rv
|
filter.dataList = rv
|
||||||
filter.dataList = rv.content;
|
// filter.dataList = rv.content;
|
||||||
filterData.total = rv.total;
|
// filterData.total = rv.total;
|
||||||
filter.tableLoading = false;
|
filter.tableLoading = false;
|
||||||
|
|
||||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||||
|
|||||||
@@ -39,6 +39,10 @@
|
|||||||
<img src="@/assets/images/icon/details_elements.png" alt="">
|
<img src="@/assets/images/icon/details_elements.png" alt="">
|
||||||
<div class="detailText">Elements</div>
|
<div class="detailText">Elements</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="nav_item" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
|
||||||
|
<img src="@/assets/images/icon/details_model.svg" alt="">
|
||||||
|
<div class="detailText">Model</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
||||||
@@ -293,6 +297,7 @@ export default defineComponent({
|
|||||||
let workspace = store.state.Workspace.probjects
|
let workspace = store.state.Workspace.probjects
|
||||||
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
|
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
|
||||||
let clothes:any = await setClothes([detailData.selectDetail])
|
let clothes:any = await setClothes([detailData.selectDetail])
|
||||||
|
console.log(detailData.designDetail)
|
||||||
let data = {
|
let data = {
|
||||||
designItemId:detailData.designDetail.designItemId,
|
designItemId:detailData.designDetail.designItemId,
|
||||||
designSingleItemDTOList:clothes,
|
designSingleItemDTOList:clothes,
|
||||||
@@ -537,12 +542,13 @@ export default defineComponent({
|
|||||||
> .gallery_btn{
|
> .gallery_btn{
|
||||||
width: 6rem;
|
width: 6rem;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
|
margin-top: 2rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .nav_list{
|
> .nav_list{
|
||||||
margin-top: 2.7rem;
|
margin-top: 2.7rem;
|
||||||
height: 38rem;
|
// height: 38rem;
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
border-radius: 1.4rem;
|
border-radius: 1.4rem;
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
<print v-show="currentDetailType == 'print'"></print>
|
<print v-show="currentDetailType == 'print'"></print>
|
||||||
<color v-if="currentDetailType == 'color'"></color>
|
<color v-if="currentDetailType == 'color'"></color>
|
||||||
<element v-show="currentDetailType == 'element'"></element>
|
<element v-show="currentDetailType == 'element'"></element>
|
||||||
|
<models v-show="currentDetailType == 'models'"></models>
|
||||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -18,11 +19,12 @@ import sketch from './sketch.vue'
|
|||||||
import print from './print.vue'
|
import print from './print.vue'
|
||||||
import color from './colorBox/index.vue'
|
import color from './colorBox/index.vue'
|
||||||
import element from './element.vue'
|
import element from './element.vue'
|
||||||
|
import models from './models.vue'
|
||||||
import addDetails from '@/component/Detail/addDetails.vue'
|
import addDetails from '@/component/Detail/addDetails.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
sketch,print,color,addDetails,element
|
sketch,print,color,addDetails,element,models
|
||||||
},
|
},
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|||||||
171
src/component/DetailCopy/detailLeft/models.vue
Normal file
171
src/component/DetailCopy/detailLeft/models.vue
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sketch">
|
||||||
|
<div class="detailText">Current Model</div>
|
||||||
|
<div class="select_sketch">
|
||||||
|
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
|
||||||
|
<img :src="frontBack.body.path || selectDetail.path" alt="">
|
||||||
|
</div>
|
||||||
|
<selectList @selectImgItem="selectImgItem" :isUpload="false" level1Type="Models" type="models" :catecoryList="sketchCatecoryList"></selectList>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||||
|
import selectList from './module/selectList.vue'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
selectList,
|
||||||
|
},
|
||||||
|
emit:['addDetail'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
const detailData = reactive({
|
||||||
|
selectTitle:'current',
|
||||||
|
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
|
||||||
|
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||||
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||||
|
sketchCatecoryList:computed(()=>{
|
||||||
|
return store.state.UserHabit.sex.value
|
||||||
|
}),
|
||||||
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
|
||||||
|
})
|
||||||
|
const getDetailListData = reactive({
|
||||||
|
total:0,
|
||||||
|
pageSize:10,
|
||||||
|
currentPage:1,
|
||||||
|
})
|
||||||
|
const getDetailListDom = reactive({
|
||||||
|
libraryList:null as any,
|
||||||
|
})
|
||||||
|
const openCurrent = ()=>{
|
||||||
|
detailData.selectTitle = 'current'
|
||||||
|
}
|
||||||
|
const openUpload = ()=>{
|
||||||
|
detailData.selectTitle = 'upload'
|
||||||
|
}
|
||||||
|
const openLibrary = ()=>{
|
||||||
|
detailData.selectTitle = 'library'
|
||||||
|
getDetailListDom.libraryList.init()
|
||||||
|
}
|
||||||
|
const selectImgItem = (data:any)=>{
|
||||||
|
data.url = data.presignedUrl
|
||||||
|
let value = {
|
||||||
|
data,
|
||||||
|
}
|
||||||
|
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||||
|
}
|
||||||
|
const openAddDetail = ()=>{
|
||||||
|
emit('addDetail')
|
||||||
|
}
|
||||||
|
return{
|
||||||
|
...toRefs(detailData),
|
||||||
|
...toRefs(getDetailListData),
|
||||||
|
...toRefs(getDetailListDom),
|
||||||
|
|
||||||
|
openCurrent,
|
||||||
|
openUpload,
|
||||||
|
openLibrary,
|
||||||
|
selectImgItem,
|
||||||
|
openAddDetail,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.sketch{
|
||||||
|
// width: 34rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> .detailText{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
> .select_sketch{
|
||||||
|
width: 100%;
|
||||||
|
height: 23.5rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: .5rem;
|
||||||
|
// border: 1px dashed #202020;
|
||||||
|
border: 1px dashed transparent;
|
||||||
|
position: relative;
|
||||||
|
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
> img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
> i{
|
||||||
|
position: absolute;
|
||||||
|
left: auto;
|
||||||
|
right: 1rem;
|
||||||
|
top: 2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
> div{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
> i{
|
||||||
|
font-size: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .switch_type_list{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
> .switch_type_item:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
> .switch_type_item{
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 6.5rem;
|
||||||
|
}
|
||||||
|
> .switch_type_item::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: #000;
|
||||||
|
height: calc(.4rem*1.2);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: -.5rem;
|
||||||
|
width: 0px;
|
||||||
|
transition: 0.3s all;
|
||||||
|
}
|
||||||
|
> .select_swtich {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
> .select_swtich::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .sketch_content_list{
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
> .content_item{
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="libraryList">
|
<div class="libraryList">
|
||||||
<div class="generalModel_state" v-if="type != 'element'">
|
<div class="generalModel_state" v-if="type != 'element'">
|
||||||
<div class="generalModel_state_item" style="width: 40%;">
|
<div class="generalModel_state_item" v-if="level1Type != 'Models'" style="width: 40%;">
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="designType"
|
v-model:value="designType"
|
||||||
:options="designTypeList"
|
:options="designTypeList"
|
||||||
@@ -18,7 +18,76 @@
|
|||||||
></template>
|
></template>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="generalModel_state_item" style="width: 35%;">
|
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="margin-bottom: 1rem;" :style="{'width':mannequinData.system == 'system'?'48%':'100%'}">
|
||||||
|
<a-select
|
||||||
|
v-model:value="mannequinData.system"
|
||||||
|
:options="systemList"
|
||||||
|
@change="handleChange"
|
||||||
|
style="width:100%"
|
||||||
|
size="large"
|
||||||
|
:fieldNames="{ label: 'name', value: 'value' }"
|
||||||
|
>
|
||||||
|
<template #suffixIcon
|
||||||
|
><span
|
||||||
|
class="icon iconfont icon-xiala"
|
||||||
|
style="color: #343579"
|
||||||
|
></span
|
||||||
|
></template>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="generalModel_state_item" v-if="level1Type == 'Models'" v-show="mannequinData.system == 'system'" style="width: 48%; margin-bottom: 1rem;">
|
||||||
|
<!-- {{ mannequinStyle }} -->
|
||||||
|
<a-select
|
||||||
|
v-model:value="mannequinData.style"
|
||||||
|
:options="mannequinStyle"
|
||||||
|
@change="handleChange"
|
||||||
|
style="width:100%"
|
||||||
|
size="large"
|
||||||
|
:fieldNames="{ label: 'name', value: 'value' }"
|
||||||
|
>
|
||||||
|
<template #suffixIcon
|
||||||
|
><span
|
||||||
|
class="icon iconfont icon-xiala"
|
||||||
|
style="color: #343579"
|
||||||
|
></span
|
||||||
|
></template>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
|
||||||
|
<a-select
|
||||||
|
v-model:value="mannequinData.ageGroup"
|
||||||
|
:options="ageGroupList"
|
||||||
|
@change="handleChange"
|
||||||
|
style="width:100%"
|
||||||
|
size="large"
|
||||||
|
:fieldNames="{ label: 'name', value: 'value' }"
|
||||||
|
>
|
||||||
|
<template #suffixIcon
|
||||||
|
><span
|
||||||
|
class="icon iconfont icon-xiala"
|
||||||
|
style="color: #343579"
|
||||||
|
></span
|
||||||
|
></template>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="generalModel_state_item" v-if="level1Type == 'Models'" style="width: 39%;">
|
||||||
|
<a-select
|
||||||
|
v-model:value="mannequinData.sex"
|
||||||
|
:options="sexList"
|
||||||
|
@change="handleChange"
|
||||||
|
style="width:100%"
|
||||||
|
size="large"
|
||||||
|
:fieldNames="{ label: 'name', value: 'value' }"
|
||||||
|
>
|
||||||
|
<template #suffixIcon
|
||||||
|
><span
|
||||||
|
class="icon iconfont icon-xiala"
|
||||||
|
style="color: #343579"
|
||||||
|
></span
|
||||||
|
></template>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="generalModel_state_item" style="width: 35%;" v-if="level1Type != 'Models'">
|
||||||
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||||
</div>
|
</div>
|
||||||
<div class="generalModel_state_item" style="width: auto;">
|
<div class="generalModel_state_item" style="width: auto;">
|
||||||
@@ -29,8 +98,8 @@
|
|||||||
<div class="libraryList_box">
|
<div class="libraryList_box">
|
||||||
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
|
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
|
||||||
<div class="content_img_item_block" :class="{active:file?.checked}">
|
<div class="content_img_item_block" :class="{active:file?.checked}">
|
||||||
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
|
<img v-lazy="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
|
||||||
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
<sketchCategory v-if="level1Type != 'Models'" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
||||||
@@ -84,6 +153,19 @@ export default defineComponent({
|
|||||||
designType:'',
|
designType:'',
|
||||||
searchPictureName:'',
|
searchPictureName:'',
|
||||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||||
|
mannequinData:{
|
||||||
|
sex:'Female',
|
||||||
|
style:'',
|
||||||
|
system:'system',
|
||||||
|
ageGroup:'Adult',
|
||||||
|
systemList:[],
|
||||||
|
libraryList:[],
|
||||||
|
},
|
||||||
|
systemList:[{name:'System',value:'system',},{name:'Library',value:'library',}],//系统
|
||||||
|
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//风格列表
|
||||||
|
sexList:computed(()=>store.state.UserHabit.sex.value),//风格列表
|
||||||
|
ageGroupList:computed(()=>store.state.UserHabit.ageGroup),//风格列表
|
||||||
|
|
||||||
})
|
})
|
||||||
const getDetailListData = reactive({
|
const getDetailListData = reactive({
|
||||||
total:0,
|
total:0,
|
||||||
@@ -126,7 +208,44 @@ export default defineComponent({
|
|||||||
// store.commit('DesignDetailCopy/setNewDetail',data)
|
// store.commit('DesignDetailCopy/setNewDetail',data)
|
||||||
}
|
}
|
||||||
const getLibraryList = ()=>{
|
const getLibraryList = ()=>{
|
||||||
detailData.isShowLoading = true
|
if(props.type == 'models'){
|
||||||
|
getModelList()
|
||||||
|
}else{
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getModelList = ()=>{
|
||||||
|
detailData.isShowLoading = true
|
||||||
|
let value = {
|
||||||
|
sex:detailData.mannequinData.sex,
|
||||||
|
style:detailData.mannequinData?.style,
|
||||||
|
ageGroup:store.state.Workspace.probjects.ageGroup,
|
||||||
|
}
|
||||||
|
Https.axiosGet(Https.httpUrls.getMannequins,{params:value}).then((rv: any) => {
|
||||||
|
if (rv) {
|
||||||
|
rv.forEach((item:any) => {
|
||||||
|
if(item.type == 'System'){
|
||||||
|
detailData.mannequinData.systemList = item.modelList
|
||||||
|
}else{
|
||||||
|
detailData.mannequinData.libraryList = item.modelList
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setMannequinList()
|
||||||
|
}
|
||||||
|
detailData.isShowLoading = false
|
||||||
|
}).catch((res)=>{
|
||||||
|
detailData.isShowLoading = false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const setMannequinList = ()=>{
|
||||||
|
if(detailData.mannequinData.system == 'system'){
|
||||||
|
detailData.libraryList = detailData.mannequinData.systemList
|
||||||
|
}else{
|
||||||
|
detailData.libraryList = detailData.mannequinData.libraryList
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getList = ()=>{
|
||||||
|
detailData.isShowLoading = true
|
||||||
let level2Type = ''
|
let level2Type = ''
|
||||||
let workspace = store.state.Workspace.probjects
|
let workspace = store.state.Workspace.probjects
|
||||||
// let type = store.state.DesignDetailCopy.currentDetailType
|
// let type = store.state.DesignDetailCopy.currentDetailType
|
||||||
@@ -159,14 +278,13 @@ export default defineComponent({
|
|||||||
).catch((res)=>{
|
).catch((res)=>{
|
||||||
detailData.isShowLoading = false
|
detailData.isShowLoading = false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const handleChange = ()=>{
|
const handleChange = ()=>{
|
||||||
getDetailListData.currentPage = 1
|
getDetailListData.currentPage = 1
|
||||||
detailData.libraryList = []
|
detailData.libraryList = []
|
||||||
getLibraryList()
|
getLibraryList()
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
// getLibraryList()
|
|
||||||
})
|
})
|
||||||
return{
|
return{
|
||||||
...toRefs(detailData),
|
...toRefs(detailData),
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
v-if="isUpload"
|
||||||
@click.stop="openUpload()"
|
@click.stop="openUpload()"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
||||||
@@ -85,6 +86,11 @@ export default defineComponent({
|
|||||||
default:'' as any,
|
default:'' as any,
|
||||||
required:true
|
required:true
|
||||||
},
|
},
|
||||||
|
isUpload:{
|
||||||
|
type:Boolean,
|
||||||
|
default:true,
|
||||||
|
required:false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
emits:['selectImgItem'],
|
emits:['selectImgItem'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
|
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
|
||||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
||||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
||||||
|
<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -20,9 +21,10 @@ import sketchType from './sketchType.vue'
|
|||||||
import printType from './printType.vue'
|
import printType from './printType.vue'
|
||||||
import editPrintElement from './editPrintElement.vue'
|
import editPrintElement from './editPrintElement.vue'
|
||||||
import elementType from './elementType.vue'
|
import elementType from './elementType.vue'
|
||||||
|
import modelsType from './modelsType.vue'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
sketchType,printType,elementType,editPrintElement
|
sketchType,printType,elementType,editPrintElement,modelsType
|
||||||
},
|
},
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
|||||||
60
src/component/DetailCopy/detailRight/modelsType.vue
Normal file
60
src/component/DetailCopy/detailRight/modelsType.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
|
||||||
|
<div class="detailText">New Model</div>
|
||||||
|
<div class="sketchContent">
|
||||||
|
<img :src="selectDetail.newDetail?.[currentDetailType].url" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
const detailData = reactive({
|
||||||
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||||
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||||
|
})
|
||||||
|
const getDetailListData = reactive({
|
||||||
|
|
||||||
|
})
|
||||||
|
const getDetailListDom = reactive({
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(detailData),
|
||||||
|
...toRefs(getDetailListData),
|
||||||
|
...toRefs(getDetailListDom),
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.sketchType{
|
||||||
|
margin: auto 0;
|
||||||
|
width: 100%;
|
||||||
|
> .detailText{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
> .sketchContent{
|
||||||
|
> img{
|
||||||
|
width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
max-height: 60rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -164,18 +164,20 @@ export default defineComponent({
|
|||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: .7rem ;
|
padding: .7rem ;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 4rem;
|
// max-height: 4rem;
|
||||||
> i{
|
> i{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 1.5rem;
|
// padding: 1.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: .6rem;
|
border-radius: .6rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
|
width: 4rem;
|
||||||
|
height: 4rem;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
> i:hover{
|
> i:hover{
|
||||||
background: #000000;
|
background: #000000;
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="img_block_item" v-else>
|
<div class="img_block_item" v-else>
|
||||||
<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
|
<div class="title">
|
||||||
<div>Moodboard</div>
|
<div>Moodboard</div>
|
||||||
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="img_block_item" v-if="allBoardData?.printboardFiles?.length>0 || allBoardData?.generatePrintFiles?.length>0">
|
<div class="img_block_item">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div>Printboard</div>
|
<div>Printboard</div>
|
||||||
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
|
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
|
||||||
@@ -45,7 +45,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
|
<div class="img_block_item">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div>Colorboard</div>
|
<div>Colorboard</div>
|
||||||
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
|
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
|
||||||
@@ -59,6 +59,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="img_block_item mannquin">
|
||||||
|
<div class="title">
|
||||||
|
<div>Mannequin</div>
|
||||||
|
<i class="fi fi-rr-edit" @click="openCollection('mannequin')"></i>
|
||||||
|
</div>
|
||||||
|
<div class="mannquin_img_item" v-for="(model) in probjects?.model" :key="model">
|
||||||
|
<div class="all_img_item_block">
|
||||||
|
<img class="all_img_content cover_img" :src="model?.url">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!--
|
<!--
|
||||||
<div class="img_block_item img_block_item_sketch">
|
<div class="img_block_item img_block_item_sketch">
|
||||||
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
||||||
@@ -68,7 +79,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="img_block_item img_block_item_sketch">
|
<div class="img_block_item img_block_item_sketch">
|
||||||
<div class="title" v-if="allBoardData?.sketch">
|
<div class="title" style="width: 100%;">
|
||||||
<div>Sketchboard</div>
|
<div>Sketchboard</div>
|
||||||
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
|
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,12 +114,15 @@ export default defineComponent({
|
|||||||
return store.state.UploadFilesModule.showSketchboard})
|
return store.state.UploadFilesModule.showSketchboard})
|
||||||
let allBoardData:any = computed(()=>{
|
let allBoardData:any = computed(()=>{
|
||||||
return store.state.UploadFilesModule.allBoardData})
|
return store.state.UploadFilesModule.allBoardData})
|
||||||
|
let probjects:any = computed(()=>{
|
||||||
|
return store.state.Workspace.probjects})
|
||||||
const openCollection = (str:any)=>{
|
const openCollection = (str:any)=>{
|
||||||
emit('openCollection',str)
|
emit('openCollection',str)
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
allBoardData,
|
allBoardData,
|
||||||
|
probjects,
|
||||||
sketch,
|
sketch,
|
||||||
sketchList,
|
sketchList,
|
||||||
openCollection,
|
openCollection,
|
||||||
@@ -269,6 +283,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.mannquin{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.sketch_img_item{
|
.sketch_img_item{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -282,6 +299,12 @@ export default defineComponent({
|
|||||||
height: 6.8rem;
|
height: 6.8rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.mannquin_img_item{
|
||||||
|
width: 6.8rem;
|
||||||
|
height: 15rem;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.color_item{
|
.color_item{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -291,7 +314,7 @@ export default defineComponent({
|
|||||||
margin-right: 4%;
|
margin-right: 4%;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
width: 21%;
|
width: 21%;
|
||||||
&:nth-child(4n){
|
&:nth-child(5n){
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -346,7 +369,7 @@ export default defineComponent({
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
>div{
|
> .lager_img_item{
|
||||||
width: 30%;
|
width: 30%;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@@ -1,341 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="start">
|
|
||||||
<div class="createProject" v-if="!selectObject?.type">
|
|
||||||
<div v-if="state == 1" class="createProjectBtn">
|
|
||||||
<div @click="createProject" class="gallery_btn gallery_btn_radius">New Project</div>
|
|
||||||
<div @click="getHistoryProject" class="gallery_btn white gallery_btn_radius">Resume Project</div>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="state == 2" class="selectProjectBtn">
|
|
||||||
<div style="width: 100%; margin: 2rem; display:flex;align-items: center;">
|
|
||||||
<i @click="()=>state = 1" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>Please choose your workflow</div>
|
|
||||||
<div class="porjectBox">
|
|
||||||
<div class="selectProjectBtn_title" v-for="item in opjectList" :key="item.value" @click="selectProject(item)">{{item.title}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType" :workflowTitle="opjectList.filter((item)=>item.value == selectObject.type)[0].title"></workflow>
|
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
|
||||||
<a-spin size="large" />
|
|
||||||
</div>
|
|
||||||
<affiche ref="affiche"></affiche>
|
|
||||||
<div class="userSystem" v-if="userDetail.systemList.indexOf(1) == -1">
|
|
||||||
You can use these features only after becoming a regular user~
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,onMounted,nextTick,onBeforeUnmount,toRefs, reactive,watch} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import {useRoute} from 'vue-router'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import workflow from './workflow/index.vue'
|
|
||||||
// import workspace from './model/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import router from '@/router';
|
|
||||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
|
||||||
import {projectList} from '@/tool/listData'
|
|
||||||
import affiche from "@/component/HomePage/affiche.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workflow,affiche
|
|
||||||
},
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
const route = useRoute()
|
|
||||||
const {t} = useI18n()
|
|
||||||
const data = reactive({
|
|
||||||
state:1,//状态 1:创建项目 2:选择项目
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
|
||||||
userDetail:computed(()=>{
|
|
||||||
return store.state.UserHabit.userDetail
|
|
||||||
}),
|
|
||||||
opjectList:[
|
|
||||||
{
|
|
||||||
title:'Series Design',
|
|
||||||
value:'seriesDesign',
|
|
||||||
httpValue:'SERIES_DESIGN',
|
|
||||||
},{
|
|
||||||
title:'Single Product Design',
|
|
||||||
value:'singleProductDesign',
|
|
||||||
httpValue:'SINGLE_DESIGN',
|
|
||||||
},{
|
|
||||||
title:'Sketch Design',
|
|
||||||
value:'sketchDesign',
|
|
||||||
httpValue:'SKETCH_COLLAGE_PROCESS',
|
|
||||||
},{
|
|
||||||
title:'Print Design',
|
|
||||||
value:'printDesign',
|
|
||||||
httpValue:'PRINT_DESIGN',
|
|
||||||
},{
|
|
||||||
title:'Product Design',
|
|
||||||
value:'productDrawingDesign',
|
|
||||||
httpValue:'FINISHED_PRODUCT',
|
|
||||||
},{
|
|
||||||
title:'3D Pattern Making',
|
|
||||||
value:'printingDesign3D',
|
|
||||||
httpValue:'THREE_D_PLATE_MAKING',
|
|
||||||
},
|
|
||||||
],//项目列表
|
|
||||||
isShowMark:false,
|
|
||||||
})
|
|
||||||
const dataDom = reactive({
|
|
||||||
affiche:null as any,
|
|
||||||
workflow:null as any
|
|
||||||
})
|
|
||||||
const createProject =()=>{
|
|
||||||
data.state = 2
|
|
||||||
createData()
|
|
||||||
}
|
|
||||||
const createData = ()=>{
|
|
||||||
store.commit("clearAllData");
|
|
||||||
store.commit("clearAllCollection");
|
|
||||||
store.commit("setAllBoardDataChoose",{});
|
|
||||||
store.commit("clearShowSketchboard",{});
|
|
||||||
store.commit("clearAllCollection");
|
|
||||||
}
|
|
||||||
const selectProject =(item:any)=>{
|
|
||||||
let data = {
|
|
||||||
type:item.value,
|
|
||||||
httpType:item.httpValue,//项目类型
|
|
||||||
}
|
|
||||||
store.commit('setProbject',data)
|
|
||||||
let list:any = projectList
|
|
||||||
store.commit('setProjectList',list[item.value])
|
|
||||||
}
|
|
||||||
const getHistoryProject = ()=>{
|
|
||||||
router.push('/home/history')
|
|
||||||
}
|
|
||||||
const getHistory = ()=>{
|
|
||||||
let value = {
|
|
||||||
id:Number(route.params.id),
|
|
||||||
}
|
|
||||||
if(!route.params.id)return
|
|
||||||
createData()
|
|
||||||
Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
|
|
||||||
setProjectData(rv)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
|
|
||||||
// console.log(newVal,oldVal);
|
|
||||||
|
|
||||||
|
|
||||||
// })
|
|
||||||
const getWorks = ()=>{
|
|
||||||
let data:any = {
|
|
||||||
"accountId": 0,
|
|
||||||
"collectionId": 0,
|
|
||||||
"coverId": 0,
|
|
||||||
"createDate": "",
|
|
||||||
id:Number(route.params.id),
|
|
||||||
"isDeleted": 0,
|
|
||||||
"portfolioDes": "",
|
|
||||||
"portfolioName": "",
|
|
||||||
"portfolioType": "",
|
|
||||||
"status": 0,
|
|
||||||
"updateDate": "",
|
|
||||||
"userLikeGroupId":''
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.setPorfolioChoose, data).then(
|
|
||||||
(rv: any) => {
|
|
||||||
setProjectData(rv)
|
|
||||||
// this.setPortfolio(rv.portfolioDTO)
|
|
||||||
// this.store.commit("setUserGroupId", rv.userGroupId);
|
|
||||||
// this.dealHistoryChooseData(rv, type);
|
|
||||||
}
|
|
||||||
).catch((res)=>{
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const setProjectData = (rv:any)=>{
|
|
||||||
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
|
||||||
//取出数组对象某个值
|
|
||||||
let storeData = {
|
|
||||||
name:rv.name,
|
|
||||||
id:rv.id,
|
|
||||||
type:type?.value,
|
|
||||||
httpType:rv.process,//项目类型
|
|
||||||
ageGroup:rv.workspaceVO.ageGroup,
|
|
||||||
style:rv.workspaceVO.style,
|
|
||||||
styleId:rv.workspaceVO.styleId,
|
|
||||||
styleName:rv.workspaceVO.styleName,
|
|
||||||
sex:rv.workspaceVO.sex,
|
|
||||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
|
||||||
position:{
|
|
||||||
label:rv.workspaceVO.positionEnum.value,
|
|
||||||
value:rv.workspaceVO.positionEnum.name
|
|
||||||
},
|
|
||||||
positionList:[],
|
|
||||||
publishData:{
|
|
||||||
id:rv.portfolioDTO.id?rv.portfolioDTO.id:'',
|
|
||||||
portfolioDes:rv.portfolioDTO.portfolioDes?rv.portfolioDTO.portfolioDes:'',
|
|
||||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
|
||||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
|
||||||
},
|
|
||||||
model:{}
|
|
||||||
}
|
|
||||||
let model:any = {}
|
|
||||||
let position = []
|
|
||||||
if(data.selectObject.sex == "Female"){
|
|
||||||
// if(rv.workspaceVO.sex == "Female"){
|
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinFemaleId,
|
|
||||||
type:rv.workspaceVO.mannequinFemaleType,
|
|
||||||
url:rv.workspaceVO.femalePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.FemalePosition
|
|
||||||
}else{
|
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinMaleId,
|
|
||||||
type:rv.workspaceVO.mannequinMaleType,
|
|
||||||
url:rv.workspaceVO.malePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.MalePosition
|
|
||||||
}
|
|
||||||
storeData.model = model
|
|
||||||
data.selectObject.positionList = position
|
|
||||||
storeData.positionList = position
|
|
||||||
store.commit('setProbject',storeData)
|
|
||||||
let list:any = projectList
|
|
||||||
store.commit('setProjectList',list[type.value])
|
|
||||||
nextTick(()=>{
|
|
||||||
dataDom.workflow.isUpdataPorject = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onMounted(async ()=>{
|
|
||||||
let test:any = getCookie('isTest')
|
|
||||||
let isTest =JSON.parse(test)
|
|
||||||
//判断账号剩余时间是否太短
|
|
||||||
let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
|
|
||||||
// if(!data.userDetail.isBeginner || data.userDetail.systemUser == 0)return
|
|
||||||
if(!isModalOne){//判断是否是试用用户
|
|
||||||
// if(!isTest && !isModalOne){//判断是否是试用用户
|
|
||||||
await new Promise(async (resolve) => {
|
|
||||||
if(isTest){
|
|
||||||
// openGuide()
|
|
||||||
resolve('')
|
|
||||||
}else{
|
|
||||||
await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
|
|
||||||
if (rv) {
|
|
||||||
let dateNow = Date.now()
|
|
||||||
let date:any = new Date(dateNow)
|
|
||||||
let rvDate:any = new Date(rv);
|
|
||||||
let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
|
|
||||||
let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
|
|
||||||
let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
|
|
||||||
let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
|
|
||||||
if(days < 5){
|
|
||||||
setTimeout(() => {
|
|
||||||
let text = {
|
|
||||||
str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
|
|
||||||
title:`${t('HomeView.jsContent7')}`,
|
|
||||||
}
|
|
||||||
dataDom.affiche.init(text)
|
|
||||||
}, 500);
|
|
||||||
}else{
|
|
||||||
// openGuide()
|
|
||||||
}
|
|
||||||
resolve('')
|
|
||||||
}else{
|
|
||||||
// openGuide()
|
|
||||||
resolve('')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}else if(!isModalOne && isTest){
|
|
||||||
}else{
|
|
||||||
// openGuide()
|
|
||||||
}
|
|
||||||
if(route.params.type == 'Works'){
|
|
||||||
getWorks()
|
|
||||||
}else{
|
|
||||||
getHistory()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
onBeforeUnmount(()=>{
|
|
||||||
// data.selectObject = null
|
|
||||||
// store.commit('createProbject')
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
createProject,
|
|
||||||
selectProject,
|
|
||||||
getHistoryProject,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.start{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
.userSystem{
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
z-index:2;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 4rem;
|
|
||||||
}
|
|
||||||
> .createProject{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
> .createProjectBtn,> .selectProjectBtn{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
> .createProjectBtn{
|
|
||||||
> div{
|
|
||||||
margin: 1rem;
|
|
||||||
width: 19rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .selectProjectBtn{
|
|
||||||
flex-direction: column;
|
|
||||||
> .porjectBox{
|
|
||||||
display: flex;
|
|
||||||
> .selectProjectBtn_title{
|
|
||||||
padding: 2rem;
|
|
||||||
width: 21rem;
|
|
||||||
height: 26rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 2rem;
|
|
||||||
border: 1px solid #000;
|
|
||||||
text-align: center;
|
|
||||||
background: #f6f6f6;
|
|
||||||
color: #000;
|
|
||||||
transition: all .3s;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0 2rem;
|
|
||||||
&:hover{
|
|
||||||
background: #000;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,742 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="collection_modal_item">
|
|
||||||
<div class="modal_left" >
|
|
||||||
<div class="switch_type_list" >
|
|
||||||
<div
|
|
||||||
@click.stop="open(1)"
|
|
||||||
class="switch_type_item"
|
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('MoodboardUpload.Upload') }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click.stop="open(2)"
|
|
||||||
class="switch_type_item"
|
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('MoodboardUpload.Library') }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click.stop="open(3)"
|
|
||||||
class="switch_type_item"
|
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('MoodboardUpload.Generate') }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="openClick == 1" 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"
|
|
||||||
:key="file"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload_file_item_content"
|
|
||||||
v-show="file?.status === '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" />
|
|
||||||
<div
|
|
||||||
class="delete_file_block"
|
|
||||||
@click="deleteFile(file)"
|
|
||||||
>
|
|
||||||
{{ $t('MoodboardUpload.Delete') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload_file_item upload_component"
|
|
||||||
v-show="moodboarList.length < 8"
|
|
||||||
>
|
|
||||||
|
|
||||||
<a-upload
|
|
||||||
:action="uploadUrl + '/api/element/upload'"
|
|
||||||
list-type="picture-card"
|
|
||||||
:capture="null"
|
|
||||||
:data="{
|
|
||||||
...upload,
|
|
||||||
}"
|
|
||||||
:headers="{ Authorization: token }"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
:maxCount="8 - moodboarList.length+fileList.length"
|
|
||||||
accept=".jpg,.png,.jpeg,.bmp"
|
|
||||||
@change="(file) => fileUploadChange(file)"
|
|
||||||
>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="upload_tip_block"
|
|
||||||
v-show=" moodboarList.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 class="upload_max_tip">
|
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
|
||||||
<span>{{ $t('MoodboardUpload.Maximum') }}</span>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="upload_max_tip">
|
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
|
||||||
<span
|
|
||||||
>Maximum 10 images can be uploaded, Maximum 2M per
|
|
||||||
image</span
|
|
||||||
>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<Material
|
|
||||||
v-show="openClick == 2"
|
|
||||||
ref="Material"
|
|
||||||
msg="Moodboard"
|
|
||||||
></Material>
|
|
||||||
<Generate
|
|
||||||
v-show="openClick == 3"
|
|
||||||
ref="Generate"
|
|
||||||
msg="Moodboard"
|
|
||||||
></Generate>
|
|
||||||
</div>
|
|
||||||
<div class="modal_right" v-show="moodboarList.length >= 1 || edieShow">
|
|
||||||
<div class="modal_layout" >
|
|
||||||
<div class="modal_text">
|
|
||||||
<div>
|
|
||||||
{{ $t('MoodboardUpload.Thumbnail') }}
|
|
||||||
</div>
|
|
||||||
<div v-show="moodboarList.length > 1" class="modal_btn started_btn" @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal_img" >
|
|
||||||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
|
||||||
<img v-lazy="item.imgUrl">
|
|
||||||
<div class="checked" >
|
|
||||||
<i class="fi fi-rr-trash"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
|
|
||||||
<div class="modal_text">
|
|
||||||
<div>{{ $t('MoodboardUpload.selected') }}</div>
|
|
||||||
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal_img_max">
|
|
||||||
<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
|
|
||||||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
|
||||||
<img :src="item.imgUrl" v-modelImg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="modal_img">
|
|
||||||
<img :src="modalImg[0].imgUrl">
|
|
||||||
</div>
|
|
||||||
<div class="mark_loading" v-show="loadingShow">
|
|
||||||
<a-spin size="large" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, h, ref ,computed,nextTick,inject} from "vue";
|
|
||||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
||||||
import { getCookie } from "@/tool/cookie";
|
|
||||||
import { getUploadUrl,isMoible } from "@/tool/util";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { message, Upload } from "ant-design-vue";
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import Material from "@/component/HomePage/Material.vue";
|
|
||||||
import Generate from "@/component/HomePage/Generate.vue";
|
|
||||||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
|
||||||
import layout from "@/component/HomePage/layout.vue";
|
|
||||||
import domTurnImg from '@/tool/domTurnImg'
|
|
||||||
import GO from "@/tool/GO";
|
|
||||||
import moodb from "@/tool/moodb";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
export default defineComponent({
|
|
||||||
components: { Material, MoodTemplate, Generate,layout },
|
|
||||||
setup() {
|
|
||||||
const store = useStore()
|
|
||||||
let lessenList: any = ref([]);
|
|
||||||
let fileList: any = ref([]);
|
|
||||||
let showFileList: any = ref([]);
|
|
||||||
let templateModal: any = ref(false);
|
|
||||||
let templateFileList: any = ref([]);
|
|
||||||
let openClick: any = ref(1);
|
|
||||||
let moodb_className:any = ref([]);
|
|
||||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
|
||||||
let layoutList:any = []//选中后随机生成的list
|
|
||||||
let layoutOpen = ref(false)
|
|
||||||
let loadingShow = ref(false)
|
|
||||||
let modalImg:any= computed(()=>{
|
|
||||||
return store.state.UploadFilesModule.disposeMoodboard
|
|
||||||
})
|
|
||||||
let uploading:any = ref([])
|
|
||||||
let edieShow:any = ref()
|
|
||||||
let {t} = useI18n()
|
|
||||||
|
|
||||||
return {
|
|
||||||
fileList,
|
|
||||||
showFileList,
|
|
||||||
lessenList,
|
|
||||||
templateModal,
|
|
||||||
templateFileList,
|
|
||||||
openClick,
|
|
||||||
moodb_className,
|
|
||||||
flex_direction,
|
|
||||||
layoutList,
|
|
||||||
layoutOpen,
|
|
||||||
loadingShow,
|
|
||||||
modalImg,
|
|
||||||
uploading,
|
|
||||||
edieShow,
|
|
||||||
t,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
indicator: h(LoadingOutlined, {
|
|
||||||
style: {
|
|
||||||
fontSize: "2.4rem",
|
|
||||||
},
|
|
||||||
spin: true,
|
|
||||||
}),
|
|
||||||
upload: {
|
|
||||||
isPin: 0,
|
|
||||||
gender:'',
|
|
||||||
level1Type: "Moodboard",
|
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
},
|
|
||||||
token: "",
|
|
||||||
uploadUrl: "",
|
|
||||||
moodTemplateId: "", //模板id
|
|
||||||
store: useStore(),
|
|
||||||
moodb_:moodb.moodb_,
|
|
||||||
moodboarList:computed(()=>{
|
|
||||||
return useStore().state.UploadFilesModule.moodboard
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// watcheffect(){
|
|
||||||
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
|
|
||||||
// (v: any) => v.checked == true
|
|
||||||
// );
|
|
||||||
// this.store.commit("setMoodboardFile", breviaryList);
|
|
||||||
// console.log(22);
|
|
||||||
// },
|
|
||||||
mounted() {
|
|
||||||
this.token = getCookie("token") || "";
|
|
||||||
this.uploadUrl = getUploadUrl();
|
|
||||||
},
|
|
||||||
directives:{
|
|
||||||
modelImg:{
|
|
||||||
mounted(el) {
|
|
||||||
let parentNode = el.parentNode
|
|
||||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
|
||||||
el.style.height = 100+'%'
|
|
||||||
el.style.width = 'auto'
|
|
||||||
}else{
|
|
||||||
el.style.width = 100+'%'
|
|
||||||
el.style.height = 'auto'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
updated (el) {
|
|
||||||
let parentNode = el.parentNode
|
|
||||||
if(parentNode.offsetHeight >= parentNode.offsetWidth){
|
|
||||||
el.style.height = 100+'%'
|
|
||||||
el.style.width = 'auto'
|
|
||||||
}else{
|
|
||||||
el.style.width = 100+'%'
|
|
||||||
el.style.height = 'auto'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
open(num: Number) {
|
|
||||||
this.openClick = num;
|
|
||||||
if(num ==2 ){
|
|
||||||
let material:any = this.$refs.Material
|
|
||||||
material.init('Moodboard')
|
|
||||||
}else if (num == 3){
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fileUploadChange(data: any) {
|
|
||||||
let file = data.file;
|
|
||||||
let bor = true
|
|
||||||
if (file.status === "done") {
|
|
||||||
let res = JSON.parse(file.xhr.response);
|
|
||||||
if(res.errCode == 0){
|
|
||||||
file.imgUrl = res.data.url;
|
|
||||||
file.resData = res.data;
|
|
||||||
file.type_ = {
|
|
||||||
type1:'upload',
|
|
||||||
type2:'Moodboard'
|
|
||||||
};
|
|
||||||
file.id_ = GO.id++
|
|
||||||
file.id = res.data.id
|
|
||||||
let fileList = this.fileList.filter(
|
|
||||||
(v: any) => v.status === "done"
|
|
||||||
);
|
|
||||||
let arr = this.store.state.UploadFilesModule.moodboard
|
|
||||||
if(arr.length >= 8){
|
|
||||||
message.info(this.t('MoodboardUpload.jsContent1'))
|
|
||||||
}else{
|
|
||||||
this.store.commit("setMoodboardFile", fileList);
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
bor = false
|
|
||||||
}
|
|
||||||
// this.showFileList = this.fileList
|
|
||||||
} else if (file.status === "error") {
|
|
||||||
bor = false
|
|
||||||
}
|
|
||||||
if(!bor){
|
|
||||||
let res:any = JSON.parse(file.xhr.response);
|
|
||||||
let index = -1;
|
|
||||||
this.fileList.forEach((ele: any, index1: any) => {
|
|
||||||
if (file.uid === ele.uid) {
|
|
||||||
index = index1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (index > -1) {
|
|
||||||
this.fileList.splice(index, 1);
|
|
||||||
}
|
|
||||||
// message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
|
|
||||||
message.warning(res.errMsg);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeUpload(file: any) {
|
|
||||||
const isJpgOrPng =
|
|
||||||
file.type === "image/jpeg" ||
|
|
||||||
file.type === "image/png" ||
|
|
||||||
file.type === "image/jpg" ||
|
|
||||||
file.type === "image/bmp";
|
|
||||||
if (!isJpgOrPng) {
|
|
||||||
message.info(this.t('MoodboardUpload.jsContent3'));
|
|
||||||
}
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
||||||
if (!isLt2M) {
|
|
||||||
message.info(this.t('MoodboardUpload.jsContent4'));
|
|
||||||
}
|
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
||||||
},
|
|
||||||
|
|
||||||
deleteFile(item: any) {
|
|
||||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
|
||||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
|
||||||
item.state = 'delete'
|
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
|
||||||
}else{
|
|
||||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
|
||||||
let moodboard
|
|
||||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
|
||||||
if(items.id_ == item.id_){
|
|
||||||
moodboard = index
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.fileList.splice(moodboard,1)
|
|
||||||
this.store.commit("setMoodboardFile", this.fileList);
|
|
||||||
}
|
|
||||||
if(this.store.state.UploadFilesModule.moodboard.length == 0){
|
|
||||||
this.store.commit("clearMoodTemplateId");
|
|
||||||
this.layoutList = []
|
|
||||||
this.edieShow = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
openSetData() {
|
|
||||||
let arr = JSON.parse(
|
|
||||||
JSON.stringify(
|
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
|
||||||
.moodboardFiles
|
|
||||||
)
|
|
||||||
) || [];
|
|
||||||
let disposeMoodboard = JSON.parse(
|
|
||||||
JSON.stringify(
|
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
|
||||||
.disposeMoodboard
|
|
||||||
)
|
|
||||||
);
|
|
||||||
let moodboardPosition = JSON.parse(
|
|
||||||
JSON.stringify(
|
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
|
||||||
.moodboardPosition
|
|
||||||
)
|
|
||||||
);
|
|
||||||
let setboard = {
|
|
||||||
generate:[] as any,
|
|
||||||
material:[] as any,
|
|
||||||
moodboard:[] as any,
|
|
||||||
}
|
|
||||||
arr.forEach((v:any)=>{
|
|
||||||
if(v.type_.type1 == 'generate'){
|
|
||||||
setboard.generate.push(v)
|
|
||||||
}else if(v.type_.type1 == 'material'){
|
|
||||||
setboard.material.push(v)
|
|
||||||
}else{
|
|
||||||
setboard.moodboard.push(v)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
|
|
||||||
this.store.commit("setMoodboardMaterialFiles", setboard.material);
|
|
||||||
this.store.commit("setMoodboardFile", setboard.moodboard);
|
|
||||||
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
|
|
||||||
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
|
|
||||||
this.fileList = setboard.moodboard
|
|
||||||
},
|
|
||||||
|
|
||||||
async changeTemplateModal() {
|
|
||||||
if(this.modalImg[0]?.id){
|
|
||||||
let layout:any = this.$refs.layout
|
|
||||||
if(this.layoutList.length <= 0){
|
|
||||||
let styleObj = this.store.state.UploadFilesModule.moodboardPosition
|
|
||||||
if(!styleObj.domStyle)await this.layout()
|
|
||||||
//
|
|
||||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
|
||||||
this.layoutList = arr
|
|
||||||
}
|
|
||||||
if(window.screen.width<1300){
|
|
||||||
layout.isMobile = true
|
|
||||||
}else{
|
|
||||||
layout.isMobile = false
|
|
||||||
}
|
|
||||||
|
|
||||||
layout.init()
|
|
||||||
}else{
|
|
||||||
message.info(this.t('MoodboardUpload.jsContent5'))
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
async layout(){
|
|
||||||
if(this.loadingShow)return
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
this.loadingShow = true
|
|
||||||
this.store.commit("setDisposeMoodboard", []);
|
|
||||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
|
|
||||||
this.layoutList = arr
|
|
||||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
|
||||||
let moodb = this.moodb_[arr.length-1][random]
|
|
||||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
|
||||||
this.flex_direction = true
|
|
||||||
}else{
|
|
||||||
this.flex_direction = false
|
|
||||||
}
|
|
||||||
if(this.moodb_[arr.length-1].length != 1){
|
|
||||||
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
|
|
||||||
this.loadingShow = false
|
|
||||||
this.layout()
|
|
||||||
return resolve('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.edieShow = true
|
|
||||||
if(this.moodb_[arr.length-1].length == 2){
|
|
||||||
this.moodb_className = this.moodb_[arr.length-1][0]
|
|
||||||
}else{
|
|
||||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
|
||||||
}
|
|
||||||
this.layoutOpen = true
|
|
||||||
//提交模板
|
|
||||||
// this.loadingShow = true
|
|
||||||
this.layoutList.forEach((v:any)=>{
|
|
||||||
v.setPitch = false
|
|
||||||
})
|
|
||||||
nextTick().then(()=>{
|
|
||||||
let layoutCentent = document.getElementById('modal_img')
|
|
||||||
let obj = {
|
|
||||||
imgStyle:[],
|
|
||||||
domStyle:[],
|
|
||||||
borStyle:[],
|
|
||||||
rototeStyle:[],
|
|
||||||
translateStyle:[],
|
|
||||||
angleTRStyle:[],
|
|
||||||
angleTLStyle:[],
|
|
||||||
angleBRStyle:[],
|
|
||||||
angleBLStyle:[],
|
|
||||||
class:this.moodb_className,
|
|
||||||
}
|
|
||||||
this.store.commit("setDisposeMoodboardPosition", obj);
|
|
||||||
domTurnImg(layoutCentent).then((rv)=>{
|
|
||||||
let file = rv
|
|
||||||
let param = new FormData();
|
|
||||||
param.append('inPin','0')
|
|
||||||
param.append('level1Type','Moodboard')
|
|
||||||
param.append('gender','')
|
|
||||||
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
|
||||||
param.append('file',file);
|
|
||||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
|
||||||
.then((rv: any) => {
|
|
||||||
let img:any = rv
|
|
||||||
img.imgUrl = rv.url
|
|
||||||
img.resData = JSON.parse(JSON.stringify(img))
|
|
||||||
this.store.commit("setDisposeMoodboard", img);
|
|
||||||
this.loadingShow = false
|
|
||||||
resolve('')
|
|
||||||
}
|
|
||||||
).catch(rv=>{
|
|
||||||
this.loadingShow = false
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
setmoodbClass(val:any){
|
|
||||||
this.moodb_className = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.collection_modal_item {
|
|
||||||
// padding: 1.5rem 2.6rem 4rem;
|
|
||||||
height: 100%;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
.modal_left,.modal_right{
|
|
||||||
background: #f7f8fa;
|
|
||||||
border-radius: 3rem;
|
|
||||||
padding: 2rem 3rem;
|
|
||||||
}
|
|
||||||
.modal_left {
|
|
||||||
width: 71rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: 2rem;
|
|
||||||
// width: 50rem*1.2);
|
|
||||||
.switch_type_list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.switch_type_item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
// padding: 0 2rem*1.2);
|
|
||||||
height: calc(4rem*1.2);
|
|
||||||
border-radius: calc(0.8rem*1.2);
|
|
||||||
line-height: calc(4rem*1.2);
|
|
||||||
font-size: var(--aida-fsize1-8);
|
|
||||||
// margin-right: 2.2rem*1.2);
|
|
||||||
margin-right: calc(8rem*1.2);
|
|
||||||
color: #000;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
transform-origin: left;
|
|
||||||
transform: scale(1);
|
|
||||||
transition: 0.3s all;
|
|
||||||
&.switch_type_item::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
height: calc(.3rem*1.2);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: calc(.6rem*1.2);
|
|
||||||
width: 0px;
|
|
||||||
transition: 0.3s all;
|
|
||||||
}
|
|
||||||
&.select_swtich {
|
|
||||||
color: #000;
|
|
||||||
// font-weight: 900;
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
&.select_swtich::before {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch_icon {
|
|
||||||
font-size: calc(1.8rem*1.2);
|
|
||||||
margin-right: calc(0.8rem*1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.moodboard_body {
|
|
||||||
padding-top: calc(2.5rem*1.2);
|
|
||||||
flex: 1;
|
|
||||||
height: calc(30rem*1.2);
|
|
||||||
overflow-x: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
&.moodboard_body::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.upload_img_body {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-bottom: calc(1rem*1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.upload_max_tip {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(1.4rem*1.2);
|
|
||||||
color: #030303;
|
|
||||||
|
|
||||||
.icon-zhuyi {
|
|
||||||
font-size: calc(1.6rem*1.2);
|
|
||||||
margin-right: calc(0.7rem*1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_right{
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
min-width: calc(57rem*1.2);
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
.modal_layout,.modal_accomplish{
|
|
||||||
.modal_text{
|
|
||||||
font-size:var(--aida-fsize1-4);
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_layout{
|
|
||||||
.modal_img{
|
|
||||||
width: calc(40rem*1.2);
|
|
||||||
height: calc(5rem*1.2);
|
|
||||||
overflow-x: hidden;
|
|
||||||
display: flex;
|
|
||||||
&.modal_img::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.modal_img_item{
|
|
||||||
width: calc(4rem*1.2);
|
|
||||||
height: calc(4rem*1.2);
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
img{
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.checked{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
&.modal_img_item:hover .checked{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_accomplish{
|
|
||||||
// margin-top: 2rem*1.2);
|
|
||||||
height: calc(30rem*1.2);
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
.modal_text{
|
|
||||||
padding-top: calc(2rem*1.2);
|
|
||||||
padding-block: calc(2rem*1.2);
|
|
||||||
}
|
|
||||||
.modal_img_max{
|
|
||||||
// width: calc(57rem*1.2);
|
|
||||||
// height: calc(35rem*1.2);
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 1.62 / 1;
|
|
||||||
position: relative;
|
|
||||||
.mark_loading{
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_img{
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
>img{
|
|
||||||
// height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.modal_imgItem{
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
img{
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
float: left;
|
|
||||||
user-select:none;
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wh1{
|
|
||||||
width: 23%;
|
|
||||||
height: 48%;
|
|
||||||
}
|
|
||||||
.wh4{
|
|
||||||
width: 48.5%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.wh8{
|
|
||||||
width: 100%;
|
|
||||||
height: 48.5%;
|
|
||||||
}
|
|
||||||
.w1h2{
|
|
||||||
width: 23%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.w2h1{
|
|
||||||
width: 48.5%;
|
|
||||||
height: 48%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,962 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="sketchboard_upload_modal">
|
|
||||||
<div class="modal_left">
|
|
||||||
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
|
|
||||||
<div
|
|
||||||
@click.stop="open(1)"
|
|
||||||
class="switch_type_item"
|
|
||||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click.stop="open(2)"
|
|
||||||
class="switch_type_item"
|
|
||||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click.stop="open(3)"
|
|
||||||
class="switch_type_item Guide_1_9"
|
|
||||||
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
|
|
||||||
>
|
|
||||||
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
|
|
||||||
<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
|
|
||||||
</div>
|
|
||||||
<ul v-show="openMenu">
|
|
||||||
<li
|
|
||||||
v-for="item,index in sketchStyleList"
|
|
||||||
class="printModel_item"
|
|
||||||
@click.stop="setSceneList(item)"
|
|
||||||
:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
|
|
||||||
item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
|
|
||||||
item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
|
|
||||||
>{{ item.name }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="openClick == 1" class="sketchboard_body">
|
|
||||||
<div class="upload_img_body scroll_style">
|
|
||||||
<div class="upload_item">
|
|
||||||
<div
|
|
||||||
class="upload_file_item"
|
|
||||||
v-for="(file, index) in fileList"
|
|
||||||
:key="file"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload_file_item_content"
|
|
||||||
v-show="file?.status === '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" />
|
|
||||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
|
|
||||||
<div
|
|
||||||
class="delete_like_file_block"
|
|
||||||
@click.stop="deleteFile(file)"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="icon iconfont icon-shanchu"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <div
|
|
||||||
class="pin_block"
|
|
||||||
v-show="file?.status === 'done'"
|
|
||||||
>
|
|
||||||
<a-checkbox v-model:checked="file.pin"
|
|
||||||
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
|
||||||
>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="upload_file_item upload_component"
|
|
||||||
v-show="sketchboardList.length < 20"
|
|
||||||
>
|
|
||||||
<a-upload
|
|
||||||
:action="uploadUrl + '/api/element/upload'"
|
|
||||||
:capture="null"
|
|
||||||
list-type="picture-card"
|
|
||||||
:data="{
|
|
||||||
...upload,
|
|
||||||
gender:workspace.sex,
|
|
||||||
}"
|
|
||||||
:multiple="!driver__.driver"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:headers="{ Authorization: token }"
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
:maxCount="20 - sketchboardList.length+fileList.length"
|
|
||||||
accept=".jpg,.png,.jpeg,.bmp"
|
|
||||||
@change="(file) => fileUploadChange(file)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="upload_tip_block"
|
|
||||||
v-show="sketchboardList.length < 20"
|
|
||||||
>
|
|
||||||
<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 class="upload_max_tip">
|
|
||||||
<span class="icon iconfont icon-zhuyi"></span>
|
|
||||||
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Material
|
|
||||||
v-show="openClick == 2"
|
|
||||||
ref="Material"
|
|
||||||
msg="Sketchboard"
|
|
||||||
@confirmSelect="confirmSelect"
|
|
||||||
:disignTypeList="sketchCatecoryList"
|
|
||||||
@setLibrary = setSetchboardGenerate
|
|
||||||
></Material>
|
|
||||||
<Generate
|
|
||||||
v-show="openClick == 3"
|
|
||||||
ref="Generate"
|
|
||||||
msg="Sketchboard"
|
|
||||||
:scene="scene"
|
|
||||||
:gender="workspace.sex"
|
|
||||||
:sketchCatecoryList="sketchCatecoryList"
|
|
||||||
></Generate>
|
|
||||||
</div>
|
|
||||||
<div class="modal_right">
|
|
||||||
<div class="modal_layout">
|
|
||||||
<div class="modal_text">
|
|
||||||
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
|
||||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
|
||||||
</div>
|
|
||||||
<!-- <div class="modal_img modal_img_x" v-mousewheel>
|
|
||||||
<div class="mousewheel">
|
|
||||||
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
|
||||||
<img v-lazy="item.imgUrl">
|
|
||||||
<div class="checked" >
|
|
||||||
<i class="fi fi-rr-trash"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div class="modal_accomplish">
|
|
||||||
<div class="modal_img">
|
|
||||||
<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
|
|
||||||
<img v-lazy="item.imgUrl">
|
|
||||||
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
|
|
||||||
<!-- 在sketch 和print暂时关闭like -->
|
|
||||||
<!-- <div
|
|
||||||
class="delete_like_file_block left1"
|
|
||||||
:class="[driver__.driver?'hideEvents':'']"
|
|
||||||
>
|
|
||||||
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
|
||||||
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
|
||||||
</div> -->
|
|
||||||
<div class="pin_block">
|
|
||||||
<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
|
|
||||||
<i v-if="item.pin" class="fi fi-rr-check"></i>
|
|
||||||
<i v-else class="fi noCheck"></i>
|
|
||||||
<span>PIN</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="moreBox" @click.stop>
|
|
||||||
<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<scaleImage ref="scaleImage"></scaleImage>
|
|
||||||
|
|
||||||
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
|
|
||||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
||||||
import { getCookie } from "@/tool/cookie";
|
|
||||||
import { getUploadUrl } from "@/tool/util";
|
|
||||||
import GO from "@/tool/GO";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { message, Upload, Modal } from "ant-design-vue";
|
|
||||||
import Material from "@/component/HomePage/Material.vue";
|
|
||||||
import Generate from "@/component/HomePage/Generate.vue";
|
|
||||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
|
||||||
import more from './more.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: { Material, Generate,scaleImage,sketchCategory,more },
|
|
||||||
setup() {
|
|
||||||
let fileList: any = ref([
|
|
||||||
]);
|
|
||||||
let openClick: any = ref(1);
|
|
||||||
|
|
||||||
let store:any =useStore()
|
|
||||||
|
|
||||||
let sketchCatecoryList:any = computed(()=>{
|
|
||||||
return store.state.Workspace.probjects.positionList
|
|
||||||
})
|
|
||||||
let sketchCatecoryAllList:any = computed(()=>{
|
|
||||||
return store.state.Workspace.workspaceAllPosition
|
|
||||||
})
|
|
||||||
let workspace:any = computed(()=>{
|
|
||||||
return store.state.Workspace.probjects
|
|
||||||
})
|
|
||||||
let sketchboardList:any = computed(()=>{
|
|
||||||
return store.state.UploadFilesModule.sketchboard
|
|
||||||
})
|
|
||||||
let {t} = useI18n()
|
|
||||||
let driver__:any = inject('driver__')
|
|
||||||
let isTest = ref()
|
|
||||||
let useGenerate:any = ref({
|
|
||||||
imgId : '',
|
|
||||||
imgUrl:1,
|
|
||||||
checked:false,
|
|
||||||
level2Type:'',
|
|
||||||
designType:'',
|
|
||||||
})
|
|
||||||
|
|
||||||
let openMenu = ref(false)
|
|
||||||
let sketchStyleList:any = computed(()=>{
|
|
||||||
return store.state.UserHabit.SketchGenerateType
|
|
||||||
})
|
|
||||||
let scene = ref({
|
|
||||||
name: t('SketchboardUpload.GenerateSketch'),
|
|
||||||
value:'generate'
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
fileList,
|
|
||||||
openClick,
|
|
||||||
store,
|
|
||||||
sketchCatecoryList,
|
|
||||||
sketchCatecoryAllList,
|
|
||||||
workspace,
|
|
||||||
sketchboardList,
|
|
||||||
t,
|
|
||||||
driver__,
|
|
||||||
isTest,
|
|
||||||
useGenerate,
|
|
||||||
scene,
|
|
||||||
openMenu,
|
|
||||||
sketchStyleList,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
swtich_type: "upload",
|
|
||||||
indicator: h(LoadingOutlined, {
|
|
||||||
style: {
|
|
||||||
fontSize: "2.4rem",
|
|
||||||
},
|
|
||||||
spin: true,
|
|
||||||
}),
|
|
||||||
upload: {
|
|
||||||
isPin: 0,
|
|
||||||
level1Type: "Sketchboard",
|
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
},
|
|
||||||
token: "",
|
|
||||||
uploadUrl: "",
|
|
||||||
isTextarea:false,
|
|
||||||
isInputFocus:false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getSketchLabel(value) {
|
|
||||||
return (value: any) => {
|
|
||||||
let lable = "";
|
|
||||||
for (let item of this.sketchCatecoryList) {
|
|
||||||
if (item.value === value) {
|
|
||||||
lable = item.label;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return lable;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
directives:{
|
|
||||||
mousewheel:{
|
|
||||||
mounted (el) {
|
|
||||||
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
|
|
||||||
let dom:any = document.getElementsByClassName('modal_img_x')
|
|
||||||
let mouseover = ()=>{
|
|
||||||
// bodyDom.classList.add('active')
|
|
||||||
}
|
|
||||||
let mouseleave = ()=>{
|
|
||||||
// bodyDom.classList.remove('active')
|
|
||||||
}
|
|
||||||
dom.forEach((item:any) => {
|
|
||||||
item.addEventListener('mouseover',mouseover)
|
|
||||||
item.addEventListener('mouseleave',mouseleave)
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
el.addEventListener('wheel',(e:WheelEvent)=>{
|
|
||||||
let num = 0
|
|
||||||
if(e.deltaY > 0){
|
|
||||||
num = 25
|
|
||||||
}else{
|
|
||||||
num = -25
|
|
||||||
}
|
|
||||||
el.scrollBy(num, 0);
|
|
||||||
},true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
sketchboardList:{
|
|
||||||
handler(newVal:any,oldVal:any){
|
|
||||||
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
|
|
||||||
if(this.driver__.driver){
|
|
||||||
// driverObj__.moveTo(22)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
driver__:{
|
|
||||||
handler(newVal,oldVal){
|
|
||||||
if(newVal.index >= 15 && newVal.index <= 16){
|
|
||||||
if(this.driver__.driver){
|
|
||||||
// driverObj__.moveTo(15)
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.token = getCookie("token") || "";
|
|
||||||
let isTest:any = getCookie('isTest')
|
|
||||||
this.isTest =JSON.parse(isTest)
|
|
||||||
this.uploadUrl = getUploadUrl();
|
|
||||||
let Generate:any = this.$refs.Generate
|
|
||||||
if(this.driver__.driver){
|
|
||||||
Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
|
|
||||||
}else{
|
|
||||||
Generate.searchPictureName = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setSetchboardGenerate(item:any){
|
|
||||||
this.useGenerate.imgId = item.imgId
|
|
||||||
this.useGenerate.imgUrl = item.imgUrl
|
|
||||||
this.useGenerate.level2Type = item.level2Type
|
|
||||||
this.useGenerate.designType = item.designType
|
|
||||||
let Material:any = this.$refs.Material
|
|
||||||
let generate:any = this.$refs.Generate
|
|
||||||
|
|
||||||
if(item.designType == 'collection'){
|
|
||||||
}else {
|
|
||||||
generate.sketchboardList.forEach((item:any) => {
|
|
||||||
item.checked = false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
open(num: Number) {
|
|
||||||
this.openClick = num;
|
|
||||||
if (num == 2) {
|
|
||||||
let material: any = this.$refs.Material;
|
|
||||||
material.init("Sketchboard");
|
|
||||||
} else if (num == 3) {
|
|
||||||
// let Generate:any = this.$refs.Generate
|
|
||||||
// Generate.init('generate')
|
|
||||||
nextTick().then(()=>{
|
|
||||||
if(this.driver__.driver){
|
|
||||||
driverObj__.moveNext()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scaleImage(index:any){
|
|
||||||
let scaleImage:any = this.$refs.scaleImage
|
|
||||||
scaleImage.isLike = false
|
|
||||||
scaleImage.init(this.sketchboardList,index)
|
|
||||||
},
|
|
||||||
|
|
||||||
fileUploadChange(data: any) {
|
|
||||||
let file = data.file;
|
|
||||||
let bor = true
|
|
||||||
if (file.status === "done") {
|
|
||||||
let res = JSON.parse(file.xhr.response);
|
|
||||||
if(res.errCode == 0){
|
|
||||||
let category:any={
|
|
||||||
value:'',
|
|
||||||
name:'',
|
|
||||||
}
|
|
||||||
this.sketchCatecoryList.forEach((item:any) => {
|
|
||||||
if(item.value == res.data.level2Type){
|
|
||||||
category.value = item?.value
|
|
||||||
category.name = item?.name
|
|
||||||
}
|
|
||||||
});
|
|
||||||
file.imgUrl = res.data.url;
|
|
||||||
file.resData = res.data;
|
|
||||||
// file.pin = false;
|
|
||||||
//category用来数据处理
|
|
||||||
file.categoryValue = category?.value;
|
|
||||||
file.category = category?.name;
|
|
||||||
file.categoryShow = false;
|
|
||||||
file.id_ = GO.id++
|
|
||||||
file.id = res.data.id
|
|
||||||
file.type_ = {
|
|
||||||
type1:'upload',
|
|
||||||
type2:'Sketchboard'
|
|
||||||
};
|
|
||||||
let fileList = this.fileList.filter(
|
|
||||||
(v: any) => v.status === "done"
|
|
||||||
);
|
|
||||||
this.store.commit("setSketchboardFile", fileList);
|
|
||||||
}else{
|
|
||||||
bor = false
|
|
||||||
}
|
|
||||||
} else if (file.status === "error") {
|
|
||||||
bor = false
|
|
||||||
}
|
|
||||||
if(!bor){
|
|
||||||
let index = -1;
|
|
||||||
let res:any = JSON.parse(file.xhr.response);
|
|
||||||
this.fileList.forEach((ele: any, index1: any) => {
|
|
||||||
if (file.uid === ele.uid) {
|
|
||||||
index = index1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (index > -1) {
|
|
||||||
this.fileList.splice(index, 1);
|
|
||||||
}
|
|
||||||
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
|
||||||
message.warning(res.errMsg);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeUpload(file: any) {
|
|
||||||
const isJpgOrPng =
|
|
||||||
file.type === "image/jpeg" ||
|
|
||||||
file.type === "image/png" ||
|
|
||||||
file.type === "image/jpg" ||
|
|
||||||
file.type === "image/bmp";
|
|
||||||
if (!isJpgOrPng) {
|
|
||||||
message.info(this.t('SketchboardUpload.jsContent2'));
|
|
||||||
}
|
|
||||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
||||||
if (!isLt2M) {
|
|
||||||
message.info(this.t('SketchboardUpload.jsContent3'));
|
|
||||||
}
|
|
||||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
||||||
},
|
|
||||||
deleteFile(item: any) {
|
|
||||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
|
||||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
|
||||||
item.state = 'delete'
|
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
|
||||||
}else{
|
|
||||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
|
||||||
let moodboard
|
|
||||||
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
|
|
||||||
if(items.id_ == item.id_){
|
|
||||||
moodboard = index
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.fileList.splice(moodboard,1)
|
|
||||||
this.store.commit("setSketchboardFile", this.fileList);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
likeFile(item:any,str:string){
|
|
||||||
if(str == 'like'){
|
|
||||||
let data = {
|
|
||||||
generateDetailId:item.id,
|
|
||||||
level1Type:"Sketchboard",
|
|
||||||
level2Type: item.categoryValue?item.categoryValue:item.level2Type,
|
|
||||||
gender:this.workspace.sex,
|
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
|
||||||
(rv) => {
|
|
||||||
item.like = true
|
|
||||||
}
|
|
||||||
).catch(res=>{
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
let data = {
|
|
||||||
generateDetailId:item.id,
|
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
||||||
}
|
|
||||||
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
|
||||||
(rv) => {
|
|
||||||
item.like = false
|
|
||||||
}
|
|
||||||
).catch(res=>{
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
openSetData() {
|
|
||||||
this.useGenerate = {
|
|
||||||
imgId : '',
|
|
||||||
imgUrl:1,
|
|
||||||
checked:false,
|
|
||||||
level2Type:'',
|
|
||||||
designType:''
|
|
||||||
}
|
|
||||||
let arr = JSON.parse(
|
|
||||||
JSON.stringify(
|
|
||||||
this.store.state.UploadFilesModule.allBoardData
|
|
||||||
.sketchboardFiles
|
|
||||||
)
|
|
||||||
) || [];
|
|
||||||
let setboard = {
|
|
||||||
generate:[] as any,
|
|
||||||
material:[] as any,
|
|
||||||
moodboard:[] as any,
|
|
||||||
}
|
|
||||||
|
|
||||||
arr.forEach((v:any)=>{
|
|
||||||
v.pin = v.pin == 1?true:false
|
|
||||||
this.sketchCatecoryAllList.forEach((item:any) => {
|
|
||||||
if(v.level2Type == item.value){
|
|
||||||
v.category=item.name
|
|
||||||
v.categoryValue=item.value
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if(v.type_.type1 == 'generate'){
|
|
||||||
setboard.generate.push(v)
|
|
||||||
}else if(v.type_.type1 == 'material'){
|
|
||||||
setboard.material.push(v)
|
|
||||||
}else{
|
|
||||||
setboard.moodboard.push(v)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
|
|
||||||
this.store.commit("setSketchboardMaterialFiles", setboard.material);
|
|
||||||
this.store.commit("setSketchboardFile", setboard.moodboard);
|
|
||||||
this.fileList = setboard.moodboard
|
|
||||||
},
|
|
||||||
confirmSelect(event: any) {
|
|
||||||
for (let item of event) {
|
|
||||||
let data = {
|
|
||||||
imgUrl: item.url,
|
|
||||||
resData: item,
|
|
||||||
pin: false,
|
|
||||||
status: "done",
|
|
||||||
category: item.level2Type || "Outwear",
|
|
||||||
categoryShow: false,
|
|
||||||
};
|
|
||||||
if (this.fileList.length == 15) {
|
|
||||||
message.warning(
|
|
||||||
this.t('SketchboardUpload.jsContent4')
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.fileList.push(data);
|
|
||||||
}
|
|
||||||
this.store.commit("setSketchboardFile", this.fileList);
|
|
||||||
},
|
|
||||||
setSceneList(data:any){
|
|
||||||
if(this.scene.value === data.value) return
|
|
||||||
this.scene = data
|
|
||||||
let generate:any = this.$refs.Generate
|
|
||||||
generate.sketchboardList = []
|
|
||||||
generate.searchPictureName = ''
|
|
||||||
this.openMenu = false
|
|
||||||
},
|
|
||||||
openPrintModel(){
|
|
||||||
if(this.openMenu)return
|
|
||||||
document.addEventListener('click',this.removePrintModel)
|
|
||||||
this.openMenu = true
|
|
||||||
},
|
|
||||||
removePrintModel(){
|
|
||||||
this.openMenu = false
|
|
||||||
document.removeEventListener('click',this.removePrintModel)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.sketchboard_upload_modal {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
.modal_left,.modal_right{
|
|
||||||
background: #f7f8fa;
|
|
||||||
border-radius: 3rem;
|
|
||||||
padding: 2rem 3rem;
|
|
||||||
}
|
|
||||||
.modal_left {
|
|
||||||
width: 71rem;
|
|
||||||
margin-right: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.switch_type_list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.switch_type_item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
// padding: 0 2rem*1.2);
|
|
||||||
height: calc(4rem*1.2);
|
|
||||||
border-radius: calc(0.8rem*1.2);
|
|
||||||
line-height: calc(4rem*1.2);
|
|
||||||
font-size: var(--aida-fsize1-8);
|
|
||||||
// margin-right: 2.2rem*1.2);
|
|
||||||
margin-right: calc(8rem*1.2);
|
|
||||||
color: #000;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
transform-origin: left;
|
|
||||||
transform: scale(1);
|
|
||||||
transition: 0.3s all;
|
|
||||||
&.switch_type_item::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
height: calc(.3rem*1.2);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: calc(.6rem*1.2);
|
|
||||||
width: 0px;
|
|
||||||
transition: 0.3s all;
|
|
||||||
}
|
|
||||||
&.select_swtich {
|
|
||||||
color: #000;
|
|
||||||
// font-weight: 900;
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
&.select_swtich::before {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch_icon {
|
|
||||||
font-size: calc(1.8rem*1.2);
|
|
||||||
margin-right: calc(0.8rem*1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.printMenu{
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 2rem;
|
|
||||||
margin-top: auto;
|
|
||||||
position: relative;
|
|
||||||
>div{
|
|
||||||
width: 18rem;
|
|
||||||
font-size: var(--aida-fsize1-6);
|
|
||||||
border: 0;
|
|
||||||
i{
|
|
||||||
transition: all .3s;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
.forbidden{
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul{
|
|
||||||
width: 18rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.switch_type_item:nth-child(3){
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sketchboard_body {
|
|
||||||
// height: calc(100% - 5rem*1.2));
|
|
||||||
flex: 1;
|
|
||||||
padding-top: calc(2.5rem*1.2);
|
|
||||||
height: calc(30rem*1.2);
|
|
||||||
overflow-x: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
&.moodboard_body::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.upload_img_body {
|
|
||||||
height: calc(100% - 3rem*1.2);
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-bottom: calc(1rem*1.2);
|
|
||||||
&.upload_img_body::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.upload_file_item{
|
|
||||||
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(25% - 2rem);
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
border: 1px solid #f5f5f5;
|
|
||||||
vertical-align: top;
|
|
||||||
position: relative;
|
|
||||||
img{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
&.upload_component {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checked{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
&.modal_img_item:hover .checked{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.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%;
|
|
||||||
}
|
|
||||||
&:hover .delete_like_file_block{
|
|
||||||
// display: block;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.upload_max_tip {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(1.4rem*1.2);
|
|
||||||
color: #030303;
|
|
||||||
|
|
||||||
.icon-zhuyi {
|
|
||||||
font-size: calc(1.6rem*1.2);
|
|
||||||
margin-right: calc(0.7rem*1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal_right{
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.modal_layout,.modal_accomplish{
|
|
||||||
.modal_text{
|
|
||||||
font-size: var(--aida-fsize1-4);
|
|
||||||
font-weight: 400;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_layout{
|
|
||||||
padding-bottom: 4.8rem;
|
|
||||||
.modal_img{
|
|
||||||
width: calc(40rem*1.2);
|
|
||||||
height: calc(5rem*1.2);
|
|
||||||
// overflow-x: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
overflow-y: hidden;
|
|
||||||
&.modal_img::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.mousewheel{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.modal_img_item{
|
|
||||||
width: calc(4rem*1.2);
|
|
||||||
height: calc(4rem*1.2);
|
|
||||||
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
img{
|
|
||||||
// width: 100%;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
.checked{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
&.modal_img_item:hover .checked{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_accomplish{
|
|
||||||
// margin-top: 2rem*1.2);
|
|
||||||
overflow-x: hidden;
|
|
||||||
height: calc(30rem*1.2);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
|
||||||
.mark_loading{
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
// overflow-x: hidden;
|
|
||||||
&.modal_accomplish::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.modal_text{
|
|
||||||
padding-top: calc(2rem*1.2);
|
|
||||||
padding-block:calc(2rem*1.2);
|
|
||||||
}
|
|
||||||
.input_box{
|
|
||||||
z-index: 1;
|
|
||||||
input{
|
|
||||||
&.forbidden{
|
|
||||||
cursor:not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_img{
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-content: flex-start;
|
|
||||||
position: relative;
|
|
||||||
.modal_imgItem{
|
|
||||||
margin: 1rem;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
display: inline-block;
|
|
||||||
// width: calc(10rem*1.2);
|
|
||||||
// height: calc(10rem*1.2);
|
|
||||||
width: calc(33.33% - 2rem);
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
border: 1px solid #f5f5f5;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
.moreBox{
|
|
||||||
position: absolute;
|
|
||||||
right: 1rem;
|
|
||||||
top: 1rem;
|
|
||||||
// opacity: 0;
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
&.modal_imgItem:nth-child(even) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
&:hover .delete_like_file_block{
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
img{
|
|
||||||
object-fit: contain;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.pin_block{
|
|
||||||
position: absolute;
|
|
||||||
left: 1rem;
|
|
||||||
top: 1rem;
|
|
||||||
width: 8rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
border-radius: 3rem;
|
|
||||||
background: rgba(0,0,0,.7);
|
|
||||||
color: #fff;
|
|
||||||
>label{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-right: 1rem;
|
|
||||||
padding-left: .2rem;
|
|
||||||
}
|
|
||||||
i{
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 2rem;
|
|
||||||
background: #000;
|
|
||||||
&.noCheck{
|
|
||||||
background: inherit;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span{
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
opacity: 0.5;
|
|
||||||
// border: 2px solid;
|
|
||||||
border-radius: calc(1rem*1.2);
|
|
||||||
transform: scale(0.9);
|
|
||||||
// img {
|
|
||||||
// }
|
|
||||||
.operate_file_block{
|
|
||||||
pointer-events:none
|
|
||||||
}
|
|
||||||
.pin_block{
|
|
||||||
pointer-events:none
|
|
||||||
}
|
|
||||||
.delete_like_file_block{
|
|
||||||
pointer-events:none
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="more">
|
|
||||||
<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
|
|
||||||
<div class="more_box" v-show="show">
|
|
||||||
<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
|
|
||||||
<i class="fi fi-rr-edit"></i>
|
|
||||||
<div class="text">{{ $t('more.edit') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
|
|
||||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
|
||||||
<div class="text">{{ $t('more.enlargement') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
|
|
||||||
<i class="fi fi-br-download"></i>
|
|
||||||
<div class="text">{{ $t('more.down') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
|
|
||||||
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
|
||||||
<div class="text">{{ $t('more.delete') }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import { downloadIamge } from "@/tool/util";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
moreList:{type:Array,default:()=>[]},
|
|
||||||
item:{type:Object,default:()=>{}},
|
|
||||||
index:{type:Number,default:0},
|
|
||||||
},
|
|
||||||
emits:['deleteFile','scaleImage'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
const data = reactive({
|
|
||||||
show:false
|
|
||||||
})
|
|
||||||
|
|
||||||
const dataDom = reactive({
|
|
||||||
})
|
|
||||||
const openList = ()=>{
|
|
||||||
data.show = true
|
|
||||||
document.addEventListener('click',setShow)
|
|
||||||
}
|
|
||||||
const setShow = ()=>{
|
|
||||||
data.show = false
|
|
||||||
document.removeEventListener('click',setShow)
|
|
||||||
}
|
|
||||||
const setMore = (str:any)=>{
|
|
||||||
if(str == 'delete'){
|
|
||||||
emit("deleteFile",props.item);
|
|
||||||
}else if(str == 'edit'){
|
|
||||||
emit("scaleImage",props.index);
|
|
||||||
}else if(str == 'down'){
|
|
||||||
console.log(props.item);
|
|
||||||
downloadIamge(props.item.url)
|
|
||||||
}else if(str == 'enlargement'){
|
|
||||||
emit("scaleImage",props.index);
|
|
||||||
}
|
|
||||||
setShow()
|
|
||||||
}
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
openList,
|
|
||||||
setMore,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.more{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .fi{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(0,0,0,.7);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .6rem;
|
|
||||||
}
|
|
||||||
> .more_box{
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(0,0,0,.7);
|
|
||||||
right: 0;
|
|
||||||
margin-top: .5rem;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: .6rem;
|
|
||||||
padding: 1rem 0;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
// width: 12rem;
|
|
||||||
text-align: left;
|
|
||||||
> .item{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 1.3rem;
|
|
||||||
> i,> span{
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
> .text{
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
&:hover{
|
|
||||||
background: rgba(0,0,0,.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,238 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="contentBox" :class="{active:(selectKey_ == 'design' || selectKey_ == 'toProduct' || selectKey_ == 'relight' || selectKey_ == 'poseTransfer')}">
|
|
||||||
<seriesDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></seriesDesign>
|
|
||||||
<singleProductDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></singleProductDesign>
|
|
||||||
<sketchDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></sketchDesign>
|
|
||||||
<productDrawingDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></productDrawingDesign>
|
|
||||||
<printingDesign3D v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printingDesign3D>
|
|
||||||
<printDesign v-show="selectKey_ != 'yun'" v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" :workflowTitle="workflowTitle"></printDesign>
|
|
||||||
<div class="public">
|
|
||||||
<cloudUploading v-show="selectKey_ == 'yun'" v-if="selectObject.id" :workflowType="workflowType" ref="cloudUploading" @retrieve="(value:any)=>$emit('retrieve',value)"></cloudUploading>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,inject,watch,nextTick,provide,toRefs, reactive} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import seriesDesign from './seriesDesign.vue'
|
|
||||||
import printDesign from './printDesign.vue'
|
|
||||||
import singleProductDesign from './singleProductDesign.vue'
|
|
||||||
import sketchDesign from './sketchDesign.vue'
|
|
||||||
import productDrawingDesign from './productDrawingDesign.vue'
|
|
||||||
import printingDesign3D from './printingDesign3D.vue'
|
|
||||||
import cloudUploading from '../../model/cloudUploading/index.vue'
|
|
||||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D,
|
|
||||||
cloudUploading
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:String,
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
emit:['projectComplete','retrieve'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
const data = reactive({
|
|
||||||
navListData:computed(()=>store.state.Workspace.projectList),
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
userDetail:computed(()=>{
|
|
||||||
return store.state.UserHabit.userDetail
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
seriesDesign:null as any,
|
|
||||||
singleProductDesign:null as any,
|
|
||||||
printDesign:null as any,
|
|
||||||
sketchDesign:null as any,
|
|
||||||
productDrawingDesign:null as any,
|
|
||||||
printingDesign3D:null as any,
|
|
||||||
})
|
|
||||||
//处理design数据
|
|
||||||
const setDesignData = (str:any)=>{
|
|
||||||
// if (str in dataDom) {
|
|
||||||
if(str == 'workspace' || str == 'yun' || str == '')return
|
|
||||||
return new Promise(async (resolve,reject)=>{
|
|
||||||
if(str == "colorBoard")await setColor()
|
|
||||||
// if(str == "sketchBoard")await setSketch()
|
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
let value = {
|
|
||||||
type:str,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
if(allBoardData.indexOf(str) != -1){
|
|
||||||
await store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
let value = {
|
|
||||||
type:str,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
saveProject(str)
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
// } else {
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
const saveCanvas = (value:any,str:any)=>{
|
|
||||||
let json = dataDom[data.selectObject.type][str].getCanvasData()
|
|
||||||
let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
|
|
||||||
let formData = new FormData();
|
|
||||||
// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
formData.append("file", blob, "data.json");
|
|
||||||
formData.append('module', str);
|
|
||||||
formData.append('projectId', value.projectId);
|
|
||||||
let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
|
|
||||||
// message.success(t('exportModel.jsContent7'))
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const saveProject = (str:any)=>{
|
|
||||||
if(str == 'design')return
|
|
||||||
let value:any = {
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
if(str == 'deReconstruction' || str == 'canvas'){
|
|
||||||
saveCanvas(value,str)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
store.dispatch('getProjectData',str).then((data)=>{
|
|
||||||
// if(!data[str])return
|
|
||||||
value[str] = data[str]
|
|
||||||
console.log(value,132)
|
|
||||||
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
|
||||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setSketch = ()=>{
|
|
||||||
|
|
||||||
}
|
|
||||||
const setColor = ()=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
let colorBoards = store.state.UploadFilesModule.colorBoards;
|
|
||||||
if(colorBoards.length == 0)return resolve('')
|
|
||||||
let data: any = [];
|
|
||||||
for (let v of colorBoards) {
|
|
||||||
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
|
||||||
let hsv = rgbToHsv(color);
|
|
||||||
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
|
||||||
data.push({
|
|
||||||
h: hsv[0],
|
|
||||||
s: hsv[1],
|
|
||||||
v: hsv[2],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
|
||||||
.then((rv: any) => {
|
|
||||||
if (rv) {
|
|
||||||
rv.forEach((ele: any, index: number) => {
|
|
||||||
colorBoards[index].id = ele.id;
|
|
||||||
colorBoards[index].tcx = ele.tcx;
|
|
||||||
colorBoards[index].name = ele.name;
|
|
||||||
});
|
|
||||||
store.commit("setColorboardList", colorBoards);
|
|
||||||
resolve('');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((res) => {
|
|
||||||
reject();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setModule = (value:any)=>{//选中设置数据
|
|
||||||
if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
dataDom[data.selectObject.type].unfold()
|
|
||||||
}
|
|
||||||
watch(()=>props.selectKey_,async (newVal,oldVal)=>{
|
|
||||||
if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
|
|
||||||
setDesignData(oldVal)
|
|
||||||
}
|
|
||||||
// if(newVal == '' && oldVal != ''){
|
|
||||||
// //选择数据
|
|
||||||
// if(data.navListData.value[index]?.select){
|
|
||||||
// setDesignData(oldVal)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
setModule,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.contentBox{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
// overflow: hidden;
|
|
||||||
height: calc(100% - 5rem);
|
|
||||||
// &.active{
|
|
||||||
// overflow: initial;
|
|
||||||
// }
|
|
||||||
> .public{
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow-x: initial;
|
|
||||||
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,217 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
PrintboardUpload,canvasUpload,workspace
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
emits:['projectComplete'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
printBoard:null as any,
|
|
||||||
canvas:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
let arr = ['design','patternMaking3D']
|
|
||||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":["printBoard", ]
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)
|
|
||||||
let allBoardData = ['printBoard']
|
|
||||||
let canvasData = ['canvas']
|
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
|
||||||
const item = canvasData[index];
|
|
||||||
await getCanvasData(item)
|
|
||||||
}
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
if(arr.indexOf(item) != -1){
|
|
||||||
store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getCanvasData = (str:any)=>{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let value = {
|
|
||||||
module:str,
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
|
||||||
.then((rv) => {
|
|
||||||
store.commit("setCanvasData", {type:str,file:rv});
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.catch((rv) => {
|
|
||||||
resolve(null)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (data:any)=>{
|
|
||||||
let collectionData = {
|
|
||||||
printboardFiles: dealViewChooseData(
|
|
||||||
data.printBoard,"Printboard"
|
|
||||||
),
|
|
||||||
generatePrintFiles: [],
|
|
||||||
};
|
|
||||||
store.commit("setAllBoardDataChoose", collectionData);
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseData = (data: any,str:string)=> {
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let filesList = data.map((v: any) => {
|
|
||||||
let newData: any = {
|
|
||||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
|
||||||
id: v.id,
|
|
||||||
status: "done",
|
|
||||||
resData: v,
|
|
||||||
type_:{
|
|
||||||
type1:'material',
|
|
||||||
type2:v.level1Type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (v.level1Type === "Sketchboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
}
|
|
||||||
if (v.level1Type === "Printboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return filesList;
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,200 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
|
||||||
<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
|
|
||||||
<!-- <canvasUpload></canvasUpload> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import patternMaking3D from '../../model/patternMaking3D/index.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/test.vue";
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
patternMaking3D,canvasUpload,workspace,PrintboardUpload
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
printBoard:null as any,
|
|
||||||
patternMaking3D:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
let arr = ['design','patternMaking3D']
|
|
||||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":["patternMaking3D", 'printBoard']
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)
|
|
||||||
let allBoardData = ['patternMaking3D','printBoard']
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
if(arr.indexOf(item) > -1){
|
|
||||||
store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (value:any)=>{
|
|
||||||
let collectionData = {
|
|
||||||
printboardFiles: dealViewChooseData(
|
|
||||||
value.printBoard,"Printboard"
|
|
||||||
),
|
|
||||||
generatePrintFiles: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
store.commit("setAllBoardDataChoose", collectionData);
|
|
||||||
let patternMaking3DData = {
|
|
||||||
threeDsimpleId:value.patternMaking3D.threeDSimpleId,
|
|
||||||
collectionElementId:value.patternMaking3D.collectionElementId,
|
|
||||||
printMinioUrl:value.patternMaking3D.printMinioUrl,
|
|
||||||
x:value.patternMaking3D.x,
|
|
||||||
y:value.patternMaking3D.y,
|
|
||||||
};
|
|
||||||
store.commit('setPatternMaking3D',patternMaking3DData)
|
|
||||||
}
|
|
||||||
const dealViewChooseData = (data: any,str:string)=> {
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let filesList = data.map((v: any) => {
|
|
||||||
let newData: any = {
|
|
||||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
|
||||||
id: v.id,
|
|
||||||
status: "done",
|
|
||||||
resData: v,
|
|
||||||
type_:{
|
|
||||||
type1:'material',
|
|
||||||
type2:v.level1Type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (v.level1Type === "Printboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return filesList;
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<toProduct ref="toProduct"
|
|
||||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
|
||||||
class="toProduct"
|
|
||||||
:isState="selectKey_ =='toProduct'"
|
|
||||||
v-show="selectKey_ == 'toProduct'"
|
|
||||||
></toProduct>
|
|
||||||
<toProduct ref="relight"
|
|
||||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
|
||||||
class="relight"
|
|
||||||
:isState="selectKey_ =='relight'"
|
|
||||||
v-show="selectKey_ == 'relight'"
|
|
||||||
></toProduct>
|
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
|
||||||
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import toProduct from '../../model/toProduct/index.vue'
|
|
||||||
import poseTransfer from '../../model/poseTransfer/index.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workspace,toProduct,canvasUpload,poseTransfer
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
toProduct:null as any,
|
|
||||||
relight:null as any,
|
|
||||||
poseTransfer:null as any,
|
|
||||||
canvas:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any)=>{
|
|
||||||
console.log(str)
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
let arr = ['design','patternMaking3D']
|
|
||||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":['toProduct','relight','poseTransfer']
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)//设置历史数据
|
|
||||||
let allBoardData = ['toProduct','relight','poseTransfer']
|
|
||||||
let canvasData = ['canvas']
|
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
|
||||||
const item = canvasData[index];
|
|
||||||
await getCanvasData(item)
|
|
||||||
}
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
//还有一个canvas
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getCanvasData = (str:any)=>{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let value = {
|
|
||||||
module:str,
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
|
||||||
.then((rv) => {
|
|
||||||
store.commit("setCanvasData", {type:str,file:rv});
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.catch((rv) => {
|
|
||||||
resolve(null)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (data:any)=>{
|
|
||||||
if(data.toProduct){
|
|
||||||
let value = {
|
|
||||||
list: data.toProduct,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setToProductImage", value);
|
|
||||||
}
|
|
||||||
if(data.relight){
|
|
||||||
let value = {
|
|
||||||
list: data.relight,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setRelightList", value);
|
|
||||||
}
|
|
||||||
if(data.poseTransfer){
|
|
||||||
let value = {
|
|
||||||
list: data.poseTransfer,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setPoseTransfer", value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,338 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
|
|
||||||
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
|
||||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
|
||||||
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
|
||||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
|
||||||
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
|
|
||||||
<toProduct ref="toProduct"
|
|
||||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
|
||||||
class="toProduct"
|
|
||||||
:isState="selectKey_ =='toProduct'"
|
|
||||||
v-show="selectKey_ == 'toProduct'"
|
|
||||||
></toProduct>
|
|
||||||
<toProduct ref="relight"
|
|
||||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
|
||||||
class="relight"
|
|
||||||
:isState="selectKey_ =='relight'"
|
|
||||||
v-show="selectKey_ == 'relight'"
|
|
||||||
></toProduct>
|
|
||||||
<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
|
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import design from '../../model/design/index.vue'
|
|
||||||
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
|
|
||||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
|
||||||
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
|
|
||||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
|
||||||
import mannequin from '../../model/mannequin/index.vue'
|
|
||||||
import toProduct from '../../model/toProduct/index.vue'
|
|
||||||
import poseTransfer from '../../model/poseTransfer/index.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,toProduct,canvasUpload,poseTransfer
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
emits:['projectComplete'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
moodBoard:null as any,
|
|
||||||
printBoard:null as any,
|
|
||||||
colorBoard:null as any,
|
|
||||||
sketchBoard:null as any,
|
|
||||||
mannequin:null as any,
|
|
||||||
toProduct:null as any,
|
|
||||||
design:null as any,
|
|
||||||
relight:null as any,
|
|
||||||
poseTransfer:null as any,
|
|
||||||
canvas:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any,button:any)=>{
|
|
||||||
console.log(button)
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData(button)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
let arr = ['design','patternMaking3D']
|
|
||||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)//设置历史数据
|
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
|
|
||||||
let canvasData = ['canvas']
|
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
|
||||||
const item = canvasData[index];
|
|
||||||
await getCanvasData(item)
|
|
||||||
}
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
//还有一个canvas
|
|
||||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
if(arr.indexOf(item) != -1){
|
|
||||||
store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getCanvasData = (str:any)=>{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let value = {
|
|
||||||
module:str,
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
|
||||||
.then((rv) => {
|
|
||||||
store.commit("setCanvasData", {type:str,file:rv});
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.catch((rv) => {
|
|
||||||
resolve(null)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (data:any)=>{
|
|
||||||
let collectionData = {
|
|
||||||
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
|
|
||||||
id:data.moodBoard.moodTemplateId,
|
|
||||||
imgUrl:data.moodBoard.moodTemplateUrl,
|
|
||||||
resData:{
|
|
||||||
name:data.moodBoard.moodTemplateName,
|
|
||||||
}
|
|
||||||
}]:[],
|
|
||||||
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
|
|
||||||
moodboardFiles: dealViewChooseData(
|
|
||||||
data.moodBoard?.moodBoards,"Moodboard"
|
|
||||||
),
|
|
||||||
printboardFiles: dealViewChooseData(
|
|
||||||
data.printBoard,"Printboard"
|
|
||||||
),
|
|
||||||
generatePrintFiles: [],
|
|
||||||
colorBoards: dealViewChooseColor(
|
|
||||||
data.colorBoard
|
|
||||||
),
|
|
||||||
sketchboardFiles: dealViewChooseData(
|
|
||||||
data.sketchBoard,"Sketchboard"
|
|
||||||
),
|
|
||||||
};
|
|
||||||
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
|
|
||||||
store.commit("setAllBoardDataChoose", collectionData);
|
|
||||||
// store.commit('clearShowSketchboard')
|
|
||||||
store.commit("setShowSketchboard", data.sketchBoards);
|
|
||||||
let likeDesignCollectionList:any = []
|
|
||||||
if(data.design?.userLikeDetails){
|
|
||||||
data.design?.userLikeDetails.map(
|
|
||||||
(v: any) => {
|
|
||||||
let data = {
|
|
||||||
...v,
|
|
||||||
groupDetailId: v.id,
|
|
||||||
designItemUrl: v.designOutfitUrl,
|
|
||||||
designItemId: v.designItemId,
|
|
||||||
};
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
|
||||||
store.commit("setUserGroupId", data.design.userGroupId);
|
|
||||||
if(data.toProduct){
|
|
||||||
let value = {
|
|
||||||
list: data.toProduct,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setToProductImage", value);
|
|
||||||
}
|
|
||||||
if(data.relight){
|
|
||||||
let value = {
|
|
||||||
list: data.relight,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setRelightList", value);
|
|
||||||
}
|
|
||||||
if(data.poseTransfer){
|
|
||||||
let value = {
|
|
||||||
list: data.poseTransfer,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setPoseTransfer", value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseData = (data: any,str:string)=> {
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let filesList = data.map((v: any) => {
|
|
||||||
let newData: any = {
|
|
||||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
|
||||||
id: v.id,
|
|
||||||
status: "done",
|
|
||||||
resData: v,
|
|
||||||
type_:{
|
|
||||||
type1:'material',
|
|
||||||
type2:v.level1Type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (v.level1Type === "Sketchboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
}
|
|
||||||
if (v.level1Type === "Printboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return filesList;
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseColor = (data: any)=>{
|
|
||||||
let colorList = data.map((v: any) => {
|
|
||||||
let rgbValue = v.rgbValue.split(" ");
|
|
||||||
let newData: any = {
|
|
||||||
id: v.id,
|
|
||||||
name: v.name,
|
|
||||||
tcx: v.tcx || "",
|
|
||||||
rgbValue: {
|
|
||||||
r: rgbValue[0],
|
|
||||||
g: rgbValue[1],
|
|
||||||
b: rgbValue[2],
|
|
||||||
a: 1,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
if(v.gradient){
|
|
||||||
newData.gradient = v.gradient;
|
|
||||||
}else{
|
|
||||||
delete newData.gradient;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
console.log(colorList)
|
|
||||||
return colorList;
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,321 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
|
|
||||||
<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
|
|
||||||
<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
|
|
||||||
<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
|
|
||||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
|
||||||
<toProduct ref="toProduct"
|
|
||||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
|
||||||
class="toProduct"
|
|
||||||
:isState="selectKey_ =='toProduct'"
|
|
||||||
v-show="selectKey_ == 'toProduct'"
|
|
||||||
></toProduct>
|
|
||||||
<toProduct ref="relight"
|
|
||||||
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
|
|
||||||
class="relight"
|
|
||||||
:isState="selectKey_ =='relight'"
|
|
||||||
v-show="selectKey_ == 'relight'"
|
|
||||||
></toProduct>
|
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import design from '../../model/design/index.vue'
|
|
||||||
import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
|
|
||||||
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
|
|
||||||
import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
|
|
||||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
|
||||||
import toProduct from '../../model/toProduct/index.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,toProduct,canvasUpload,
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
moodBoard:null as any,
|
|
||||||
printBoard:null as any,
|
|
||||||
colorBoard:null as any,
|
|
||||||
sketchBoard:null as any,
|
|
||||||
toProduct:null as any,
|
|
||||||
design:null as any,
|
|
||||||
relight:null as any,
|
|
||||||
canvas:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
let arr = ['design','patternMaking3D']
|
|
||||||
if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight']
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)
|
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight']
|
|
||||||
let canvasData = ['canvas']
|
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
|
||||||
const item = canvasData[index];
|
|
||||||
await getCanvasData(item)
|
|
||||||
}
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
//还有一个canvas
|
|
||||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
if(arr.indexOf(item) != -1){
|
|
||||||
store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getCanvasData = (str:any)=>{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let value = {
|
|
||||||
module:str,
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
|
||||||
.then((rv) => {
|
|
||||||
store.commit("setCanvasData", {type:str,file:rv});
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.catch((rv) => {
|
|
||||||
resolve(null)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (data:any)=>{
|
|
||||||
let collectionData = {
|
|
||||||
disposeMoodboard: data.moodBoard?.moodTemplateId?[{
|
|
||||||
id:data.moodBoard.moodTemplateId,
|
|
||||||
imgUrl:data.moodBoard.moodTemplateUrl,
|
|
||||||
resData:{
|
|
||||||
name:data.moodBoard.moodTemplateName,
|
|
||||||
}
|
|
||||||
}]:[],
|
|
||||||
moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
|
|
||||||
moodboardFiles: dealViewChooseData(
|
|
||||||
data.moodBoard?.moodBoards,"Moodboard"
|
|
||||||
),
|
|
||||||
printboardFiles: dealViewChooseData(
|
|
||||||
data.printBoard,"Printboard"
|
|
||||||
),
|
|
||||||
generatePrintFiles: [],
|
|
||||||
colorBoards: dealViewChooseColor(
|
|
||||||
data.colorBoard
|
|
||||||
),
|
|
||||||
sketchboardFiles: dealViewChooseData(
|
|
||||||
data.sketchBoard,"Sketchboard"
|
|
||||||
),
|
|
||||||
};
|
|
||||||
if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
|
|
||||||
store.commit("setAllBoardDataChoose", collectionData);
|
|
||||||
// store.commit('clearShowSketchboard')
|
|
||||||
store.commit("setShowSketchboard", data.sketchBoards);
|
|
||||||
let likeDesignCollectionList:any = []
|
|
||||||
if(data.design?.userLikeDetails){
|
|
||||||
data.design?.userLikeDetails.map(
|
|
||||||
(v: any) => {
|
|
||||||
let data = {
|
|
||||||
...v,
|
|
||||||
groupDetailId: v.id,
|
|
||||||
designItemUrl: v.designOutfitUrl,
|
|
||||||
designItemId: v.designItemId,
|
|
||||||
};
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
|
||||||
store.commit("setUserGroupId", data.design.userGroupId);
|
|
||||||
if(data.toProduct){
|
|
||||||
let value = {
|
|
||||||
list: data.toProduct,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setToProductImage", value);
|
|
||||||
}
|
|
||||||
if(data.relight){
|
|
||||||
let value = {
|
|
||||||
list: data.relight,
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setRelightList", value);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseData = (data: any,str:string)=> {
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let filesList = data.map((v: any) => {
|
|
||||||
let newData: any = {
|
|
||||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
|
||||||
id: v.id,
|
|
||||||
status: "done",
|
|
||||||
resData: v,
|
|
||||||
type_:{
|
|
||||||
type1:'material',
|
|
||||||
type2:v.level1Type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (v.level1Type === "Sketchboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
}
|
|
||||||
if (v.level1Type === "Printboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return filesList;
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseColor = (data: any)=>{
|
|
||||||
let colorList = data.map((v: any) => {
|
|
||||||
let rgbValue = v.rgbValue.split(" ");
|
|
||||||
let newData: any = {
|
|
||||||
id: v.id,
|
|
||||||
name: v.name,
|
|
||||||
tcx: v.tcx || "",
|
|
||||||
rgbValue: {
|
|
||||||
r: rgbValue[0],
|
|
||||||
g: rgbValue[1],
|
|
||||||
b: rgbValue[2],
|
|
||||||
a: 1,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
if(v.gradient){
|
|
||||||
newData.gradient = v.gradient;
|
|
||||||
}else{
|
|
||||||
delete newData.gradient;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return colorList;
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,228 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="seriesDesign">
|
|
||||||
<workspace @setProject="workspaceBack" :workflowTitle="workflowTitle" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
|
||||||
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
|
|
||||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
|
||||||
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
|
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import workspace from '../../workflow/workspace.vue'
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
|
||||||
import deReconstruction from '../../model/deReconstruction/index.vue'
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
|
||||||
import mannequin from '../../model/mannequin/index.vue'
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey_:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowType:String,
|
|
||||||
httpWorkflowType:String,
|
|
||||||
workflowTitle:String,
|
|
||||||
},
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
workspaceBack:inject('setBack') as any,
|
|
||||||
})
|
|
||||||
const dataDom:any = reactive({
|
|
||||||
sketchBoard:null as any,
|
|
||||||
deReconstruction:null as any,
|
|
||||||
canvas:null as any,
|
|
||||||
mannequin:null as any,
|
|
||||||
})
|
|
||||||
const open = (str:any)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
if(dataDom[str]?.openSetData){
|
|
||||||
dataDom[str].openSetData(str)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setitemData = (arr:any)=>{
|
|
||||||
return new Promise((resolve,reject)=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
arr.forEach((rv:any)=>{
|
|
||||||
if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !dataDom[rv])return
|
|
||||||
dataDom[rv].openSetData()
|
|
||||||
})
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
|
|
||||||
}
|
|
||||||
const getCollection = ()=>{
|
|
||||||
let value:any = {
|
|
||||||
"id":data.selectObject.id,
|
|
||||||
"moduleList":["sketchBoard",'deReconstruction','mannequin']
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
|
||||||
historyChooseData(rv)
|
|
||||||
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
|
|
||||||
let canvasData = ['deReconstruction','canvas']
|
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
|
||||||
const item = canvasData[index];
|
|
||||||
await getCanvasData(item)
|
|
||||||
}
|
|
||||||
await setitemData(allBoardData)
|
|
||||||
//还有一个canvas
|
|
||||||
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
|
||||||
allBoardData.forEach((item)=>{
|
|
||||||
let value = {
|
|
||||||
type:item,
|
|
||||||
objectName:data.selectObject.type,
|
|
||||||
}
|
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
|
||||||
if(arr.indexOf(item) != -1){
|
|
||||||
store.dispatch('setAllBoardData',value)
|
|
||||||
}else{
|
|
||||||
store.dispatch('setModularData',value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getCanvasData = (str:any)=>{
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
let value = {
|
|
||||||
module:str,
|
|
||||||
projectId:data.selectObject.id,
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.exportSearch, value)
|
|
||||||
.then((rv) => {
|
|
||||||
store.commit("setCanvasData", {type:str,file:rv});
|
|
||||||
resolve('')
|
|
||||||
})
|
|
||||||
.catch((rv) => {
|
|
||||||
resolve(null)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const historyChooseData = (data:any)=>{
|
|
||||||
let collectionData = {
|
|
||||||
sketchboardFiles: dealViewChooseData(
|
|
||||||
data.sketchBoard,"Sketchboard"
|
|
||||||
),
|
|
||||||
};
|
|
||||||
store.commit("setAllBoardDataChoose", collectionData);
|
|
||||||
if(data.deReconstruction){
|
|
||||||
data.deReconstruction.url = data.deReconstruction.collageSketchUrl
|
|
||||||
data.deReconstruction.isLike = data.deReconstruction.liked
|
|
||||||
let value = {
|
|
||||||
list: [data.deReconstruction],
|
|
||||||
str:'add',
|
|
||||||
index:-1,
|
|
||||||
}
|
|
||||||
store.commit("setDeReconstruction", value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//统一处理选择组的渲染数据
|
|
||||||
const dealViewChooseData = (data: any,str:string)=> {
|
|
||||||
if (!data) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
let filesList = data.map((v: any) => {
|
|
||||||
let newData: any = {
|
|
||||||
imgUrl: v.url?v.url:v.designOutfitUrl,
|
|
||||||
id: v.id,
|
|
||||||
status: "done",
|
|
||||||
resData: v,
|
|
||||||
type_:{
|
|
||||||
type1:'material',
|
|
||||||
type2:v.level1Type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (v.level1Type === "Sketchboard") {
|
|
||||||
newData.pin = v.isPin;
|
|
||||||
newData.categoryValue = v.level2Type;
|
|
||||||
newData.level2Type = v.level2Type;
|
|
||||||
}
|
|
||||||
return newData;
|
|
||||||
});
|
|
||||||
return filesList;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(()=>{
|
|
||||||
nextTick(()=>{
|
|
||||||
getCollection()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
open,
|
|
||||||
unfold,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.seriesDesign{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
background: #ff6666;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="workflowBox">
|
|
||||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
|
||||||
<navList ref="navList" :workflowType="workflowType" @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
|
||||||
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
|
||||||
<div class="homeContent" ref="parent">
|
|
||||||
<navListBox
|
|
||||||
@setSelectKey=setSelectKey
|
|
||||||
:navListData="navListData"
|
|
||||||
:selectKey="selectKey"
|
|
||||||
:workflowType="workflowType"
|
|
||||||
v-model:isShowMark="isShowMark"
|
|
||||||
></navListBox>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<div class="back">
|
|
||||||
<div class="title">
|
|
||||||
<div v-show="navListData?.find((item:any) => item.value === selectKey_)?.name">
|
|
||||||
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
|
|
||||||
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
|
|
||||||
</div>
|
|
||||||
<div v-show="!navListData?.find((item:any) => item.value === selectKey_)?.name ">
|
|
||||||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
|
||||||
Cloud Generation Tasks
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
|
|
||||||
</div>
|
|
||||||
<content ref="content" @retrieve="retrieve" :selectKey_="selectKey_" @projectComplete="setBack()" :workflowType="workflowType" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></content>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
|
|
||||||
<workspace :firstTime="true" :workflowType="workflowType" @setProject="setProject" :workflowTitle="workflowTitle" :httpWorkflowType="httpWorkflowType"></workspace>
|
|
||||||
</div>
|
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
|
||||||
<a-spin size="large" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
import content from './content/index.vue'
|
|
||||||
import workspace from './workspace.vue'
|
|
||||||
import navList from './nav.vue'
|
|
||||||
import navListBox from './navBox.vue'
|
|
||||||
|
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
content,navList,navListBox,workspace
|
|
||||||
},
|
|
||||||
//props
|
|
||||||
props:{
|
|
||||||
workflowType:{
|
|
||||||
type:String,
|
|
||||||
},
|
|
||||||
workflowTitle:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
httpWorkflowType:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits:['goHome'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
let driver__:any = computed(()=>{
|
|
||||||
return store.state.Guide.guide
|
|
||||||
})
|
|
||||||
provide('driver__',driver__)
|
|
||||||
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
selectKey:'',
|
|
||||||
selectKey_:'',
|
|
||||||
isShowMark:false,
|
|
||||||
isUpdataPorject:false as any,
|
|
||||||
adminData:{
|
|
||||||
position:'',
|
|
||||||
dom:null as any,
|
|
||||||
parentDom:null as any,
|
|
||||||
},
|
|
||||||
navListData:computed(()=>{
|
|
||||||
return store.state.Workspace.projectList
|
|
||||||
}),
|
|
||||||
})
|
|
||||||
const setIsShowMark = (boolean:boolean)=>{
|
|
||||||
data.isShowMark = boolean
|
|
||||||
}
|
|
||||||
provide('setIsShowMark',setIsShowMark)
|
|
||||||
const dataTime = reactive({
|
|
||||||
selectTime:null as any,
|
|
||||||
})
|
|
||||||
const dataDom = reactive({
|
|
||||||
parent:null as any,
|
|
||||||
content:null as any,
|
|
||||||
navList:null as any
|
|
||||||
})
|
|
||||||
const setBack = ()=>{
|
|
||||||
data.selectKey = ''
|
|
||||||
updataPage()
|
|
||||||
}
|
|
||||||
provide('setBack',setBack)
|
|
||||||
const setProject = (value:any)=>{
|
|
||||||
// data.isUpdataPorject = data
|
|
||||||
if(value == 'set'){
|
|
||||||
data.isUpdataPorject = true
|
|
||||||
}else{
|
|
||||||
data.isUpdataPorject = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const setSelectKey = async (value:any)=>{
|
|
||||||
let {str,dom,position} = value
|
|
||||||
data.adminData.dom = dom
|
|
||||||
data.adminData.parentDom = value?.parentDom
|
|
||||||
data.adminData.position = position
|
|
||||||
data.selectKey = str
|
|
||||||
updataPage()
|
|
||||||
if(value.str)dataDom.content.setModule(value)
|
|
||||||
}
|
|
||||||
const updataPage = ()=>{
|
|
||||||
let {dom,position} = data.adminData
|
|
||||||
let contentDom:any = document.querySelectorAll('.workflow .content')[0]
|
|
||||||
clearTimeout(dataTime.selectTime)
|
|
||||||
let {top,left,width,height} = dom.getBoundingClientRect()
|
|
||||||
let parentPosition = dataDom.parent.getBoundingClientRect()
|
|
||||||
let parentTop = parentPosition?.top
|
|
||||||
let parentLeft = parentPosition?.left
|
|
||||||
if(data.selectKey_ && data.selectKey == ''){
|
|
||||||
// let index = data.navListData.findIndex((item:any) => item.value === data.selectKey_);
|
|
||||||
let y = top - parentTop + height / 2
|
|
||||||
let x = left - parentLeft + width / 2
|
|
||||||
if(position == 'nav'){
|
|
||||||
x = 0
|
|
||||||
y = dom.offsetTop + dom.offsetHeight / 2
|
|
||||||
}
|
|
||||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
|
||||||
gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
|
|
||||||
dataTime.selectTime = setTimeout(() => {
|
|
||||||
data.selectKey_ = data.selectKey
|
|
||||||
}, 500);
|
|
||||||
}else{
|
|
||||||
data.selectKey_ = data.selectKey
|
|
||||||
nextTick(()=>{
|
|
||||||
// let index = data.navListData.findIndex((item:any) => item.value === str);
|
|
||||||
let y = top - parentTop + height / 2
|
|
||||||
let x = left - parentLeft + width / 2
|
|
||||||
if(position == 'nav'){
|
|
||||||
x = 0
|
|
||||||
y = dom.offsetTop + dom.offsetHeight / 2
|
|
||||||
}
|
|
||||||
// dataDom.content.open({selectKey:data.selectKey_,workflowType:props.workflowType})
|
|
||||||
contentDom.style.transformOrigin = `${x}px ${y}px`
|
|
||||||
gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const goHome = ()=>{
|
|
||||||
emit("goHome");
|
|
||||||
}
|
|
||||||
const unfold = ()=>{
|
|
||||||
dataDom.content.unfold()
|
|
||||||
}
|
|
||||||
const retrieve = (str:any)=>{
|
|
||||||
console.log(str)
|
|
||||||
dataDom.navList.uploadSelectKey(str)
|
|
||||||
}
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
setBack,
|
|
||||||
setProject,
|
|
||||||
setSelectKey,
|
|
||||||
unfold,
|
|
||||||
goHome,
|
|
||||||
retrieve,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.workflowBox{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .workflow{
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
> .contentBox{
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
> .content,
|
|
||||||
>.homeContent{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 4rem;
|
|
||||||
padding-top: 3rem;
|
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
// background: #ff6666;
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
// width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
}
|
|
||||||
> .back{
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
> .title{
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> div{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
i{
|
|
||||||
font-size: 2rem;
|
|
||||||
display: flex;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .text{
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: auto;
|
|
||||||
i{
|
|
||||||
font-size: 3rem;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .homeContent{
|
|
||||||
// background: #91ff66;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,173 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="homeNav" :class="{active:isUnfold}">
|
|
||||||
<div class="navList unfold" @click="setUnfold" :title="'Expand the sidebar'" :class="{active:isUnfold}">
|
|
||||||
<!-- <i class="fi fi-rr-window-maximize"></i> -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
|
||||||
<span v-show="isUnfold">Module</span>
|
|
||||||
</div>
|
|
||||||
<div class="border"></div>
|
|
||||||
<div class="navList unfold" @click="goHome">
|
|
||||||
<i class="fi fi-sr-home"></i>
|
|
||||||
<span v-show="isUnfold">Home</span>
|
|
||||||
</div>
|
|
||||||
<div class="navList" :class="{active:selectKey == 'workspace'}" @click="setNav('workspace', $event.target)">
|
|
||||||
<i class="fi fi-rr-settings-sliders"></i>
|
|
||||||
<span v-show="isUnfold">Settings</span>
|
|
||||||
</div>
|
|
||||||
<div class="border"></div>
|
|
||||||
<div class="navList list" :class="[selectKey == item.value?'active':'',navListData.some((navListItem:any) => navListItem.value === item.value)?'exist':'',item.value]" v-for="item in navList" :key="item.value" @click="setNav(item.value, $event.target)">
|
|
||||||
<i :class="item.icon"></i>
|
|
||||||
<span v-show="isUnfold">{{ item.name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="border" style="margin-top: auto;" ></div>
|
|
||||||
<div class="navList list exist" v-show="['seriesDesign', 'singleProductDesign', 'productDrawingDesign'].includes(workflowType)" @click="setNav('yun', $event.target)">
|
|
||||||
<i class="fi fi-rr-cloud-upload-alt"></i>
|
|
||||||
<span v-show="isUnfold">云生成</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,watch,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import {projectList} from '@/tool/listData'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey:{type:String,default:''},
|
|
||||||
workflowType:{type:String,default:''},
|
|
||||||
navListData:{type:Array,default:()=>[]},
|
|
||||||
},
|
|
||||||
emits:['setSelectKey','unfold','goHome'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
const data = reactive({
|
|
||||||
isUnfold:false,
|
|
||||||
navList:[] as any,
|
|
||||||
})
|
|
||||||
|
|
||||||
const dataDom = reactive({
|
|
||||||
})
|
|
||||||
const setNav = (str:any,target:any)=>{
|
|
||||||
let data = {
|
|
||||||
str:str == props.selectKey?'':str,
|
|
||||||
dom:target,
|
|
||||||
posiiton:'nav',
|
|
||||||
}
|
|
||||||
|
|
||||||
emit("setSelectKey", data);
|
|
||||||
// emit("update:selectKey", str);
|
|
||||||
}
|
|
||||||
watch(()=>props.navListData,(newVal:any)=>{
|
|
||||||
let list:any = projectList.all
|
|
||||||
const combined = [...newVal, ...list];
|
|
||||||
const seen = new Set();
|
|
||||||
data.navList = combined.filter((item:any) => {
|
|
||||||
if (seen.has(item.value)) {
|
|
||||||
return false; // 如果value已经出现过,跳过当前对象
|
|
||||||
} else {
|
|
||||||
seen.add(item.value); // 如果value没有出现过,保留当前对象
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
})
|
|
||||||
const setUnfold = ()=>{
|
|
||||||
data.isUnfold = !data.isUnfold
|
|
||||||
emit("unfold");
|
|
||||||
}
|
|
||||||
const goHome = ()=>{
|
|
||||||
store.commit('createProbject')
|
|
||||||
emit("goHome");
|
|
||||||
}
|
|
||||||
const uploadSelectKey = (str:any)=>{
|
|
||||||
let dom = document.querySelector(`.homeNav .${str}`)
|
|
||||||
setNav(str,dom)
|
|
||||||
}
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
setNav,
|
|
||||||
setUnfold,
|
|
||||||
goHome,
|
|
||||||
projectList,
|
|
||||||
uploadSelectKey,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.homeNav{
|
|
||||||
padding: 5rem 0rem;
|
|
||||||
padding-bottom: 2.5rem;
|
|
||||||
background: #f7f8fa;
|
|
||||||
transition: all .3s;
|
|
||||||
width: 7rem;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
&.active{
|
|
||||||
width: 25rem;
|
|
||||||
}
|
|
||||||
> div{
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 1rem;
|
|
||||||
margin: 0 1rem;
|
|
||||||
&.list{
|
|
||||||
color: #bfbfbf;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
background: #ebebeb;
|
|
||||||
}
|
|
||||||
&.unfold{
|
|
||||||
&.active{
|
|
||||||
border: 1px solid #000000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.list{
|
|
||||||
&.exist{
|
|
||||||
color: #000000;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> i,> svg{
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
display: flex;
|
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
> svg{
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
> span{
|
|
||||||
font-size: 1.8rem;
|
|
||||||
line-height: 5rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.border{
|
|
||||||
border-bottom: 1px solid #D9D9D9;
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,231 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="homeNavBox">
|
|
||||||
<div class="navList">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'seriesDesign'" src="@/assets/images/homePage/seriesDesign.png" alt="">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'singleProductDesign'" src="@/assets/images/homePage/singleProductDesign.png" alt="">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'printDesign'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'productDrawingDesign'" src="@/assets/images/homePage/productDrawingDesign.png" alt="">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'printingDesign3D'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
|
|
||||||
<img :class="workflowType" v-if="workflowType == 'sketchDesign'" src="@/assets/images/homePage/sketchDesign.png" alt="">
|
|
||||||
<div class="navListItem"
|
|
||||||
v-for="item in navListData" :key="item.value"
|
|
||||||
:class="[
|
|
||||||
(item?.select || (selectObject.model.id > -1 && item.value == 'mannequin'))?'active':'',
|
|
||||||
`item${item.task}`,
|
|
||||||
workflowType,
|
|
||||||
]"
|
|
||||||
@click.stop="setNav(item.value,$event)" >
|
|
||||||
<!-- @click.stop="setSelect(item)" -->
|
|
||||||
<div class="background"></div>
|
|
||||||
<div class="text">
|
|
||||||
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
|
|
||||||
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
|
|
||||||
</div>
|
|
||||||
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
selectKey:{type:String,default:''},
|
|
||||||
isShowMark:{type:Boolean,default:false},
|
|
||||||
workflowType:{type:String,default:''},
|
|
||||||
},
|
|
||||||
emits:['setSelectKey','setModule'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const store = useStore();
|
|
||||||
const data = reactive({
|
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
navListData:computed(()=>store.state.Workspace.projectList),
|
|
||||||
})
|
|
||||||
const dataTime = reactive({
|
|
||||||
clickTime:null as any,
|
|
||||||
})
|
|
||||||
const dataDom = reactive({
|
|
||||||
navList:null as any
|
|
||||||
})
|
|
||||||
const setNav = async (str:any,event:any,button:string)=>{
|
|
||||||
clearTimeout(dataTime.clickTime)
|
|
||||||
let data = {
|
|
||||||
str:str == props.selectKey?'':str,
|
|
||||||
dom:event.target,
|
|
||||||
posiiton:'navBox',
|
|
||||||
button,
|
|
||||||
}
|
|
||||||
emit("setSelectKey", data);
|
|
||||||
// emit("update:selectKey", str);
|
|
||||||
}
|
|
||||||
const setSelect = (item:any)=>{
|
|
||||||
clearTimeout(dataTime.clickTime)
|
|
||||||
dataTime.clickTime = setTimeout(async ()=>{//防止双击和单机都执行的问题
|
|
||||||
if (item.select) {
|
|
||||||
let data = {
|
|
||||||
select:false,
|
|
||||||
value:item.value
|
|
||||||
}
|
|
||||||
emit('setModule',data)
|
|
||||||
item.select = false
|
|
||||||
}else{
|
|
||||||
let data = {
|
|
||||||
select:true,
|
|
||||||
value:item.value
|
|
||||||
}
|
|
||||||
emit('setModule',data)
|
|
||||||
item.select = true
|
|
||||||
}
|
|
||||||
|
|
||||||
},200)
|
|
||||||
}
|
|
||||||
return{
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
setNav,
|
|
||||||
setSelect,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.homeNavBox{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
> .navList{
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
img{
|
|
||||||
&.seriesDesign{width: 98rem;height: 58rem;}
|
|
||||||
&.singleProductDesign{width: 98rem;height: 43rem;}
|
|
||||||
&.printDesign{width: 8rem;height: 1.3rem;}
|
|
||||||
&.printingDesign3D{width: 8rem;height: 1.3rem;}
|
|
||||||
&.productDrawingDesign{width: 38rem;height: 23rem;}
|
|
||||||
&.sketchDesign{width: 38rem;height: 23rem;}
|
|
||||||
}
|
|
||||||
> .navListItem{
|
|
||||||
width: 22rem;
|
|
||||||
height: 10rem;
|
|
||||||
border-radius: 2rem;
|
|
||||||
border: 2px solid #000;
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all .2s;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 2rem;
|
|
||||||
&.seriesDesign{
|
|
||||||
&.item1-1{top: -5rem;left: -22rem;}
|
|
||||||
&.item1-2{top: 9rem;left: -22rem;}
|
|
||||||
&.item1-3{top: 23rem;left: -22rem;}
|
|
||||||
&.item1-4{top: 37rem;left: -22rem;}
|
|
||||||
&.item1-5{top: 51rem;left: -22rem;}
|
|
||||||
&.item2-1{top: 23rem;left: 8rem;}
|
|
||||||
&.item3-1{top: 23rem;left: 38rem;}
|
|
||||||
&.item4-1{top: 12rem;left: 68rem;}
|
|
||||||
&.item4-2{top: 34rem;left: 68rem;}
|
|
||||||
&.item5-1{top: 23rem;left: 98rem;}
|
|
||||||
}
|
|
||||||
&.singleProductDesign{
|
|
||||||
&.item1-1{top: -5rem;left: -22rem;}
|
|
||||||
&.item1-2{top: 9rem;left: -22rem;}
|
|
||||||
&.item1-3{top: 23rem;left: -22rem;}
|
|
||||||
&.item1-4{top: 37rem;left: -22rem;}
|
|
||||||
&.item1-5{top: 51rem;left: -22rem;}
|
|
||||||
&.item2-1{top: 16.5rem;left: 8rem;}
|
|
||||||
&.item3-1{top: 16.5rem;left: 38rem;}
|
|
||||||
&.item4-1{top: 16.5rem;left: 68rem;}
|
|
||||||
&.item5-1{top: 16.5rem;left: 98rem;}
|
|
||||||
}
|
|
||||||
&.printDesign,&.printingDesign3D{
|
|
||||||
&.item1-1{top: -3rem;left: -22rem;}
|
|
||||||
&.item2-1{top: -3rem;left: 8rem;}
|
|
||||||
}
|
|
||||||
&.productDrawingDesign{
|
|
||||||
&.item1-1{top: 6.5rem;left: -22rem;}
|
|
||||||
&.item2-1{top: -4rem;left: 8rem;}
|
|
||||||
&.item2-2{top: 17rem;left: 8rem;}
|
|
||||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
|
||||||
}
|
|
||||||
&.sketchDesign{
|
|
||||||
&.item1-1{top: -5rem;left: -22rem;}
|
|
||||||
&.item1-2{top: 18rem;left: -22rem;}
|
|
||||||
&.item2-1{top: 6.5rem;left: 8rem;}
|
|
||||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
|
||||||
}
|
|
||||||
.background{
|
|
||||||
// background: #e8e8e8;
|
|
||||||
background: #e8e8e8;
|
|
||||||
transition: all .3s;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.text{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
> i{
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
display: flex;
|
|
||||||
&.active{
|
|
||||||
box-shadow: #000 0px 0px 10px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .designIcon{
|
|
||||||
opacity: 1;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: #000 0px 0px 2px;
|
|
||||||
border-radius: 1rem;
|
|
||||||
> i{
|
|
||||||
display: flex;
|
|
||||||
padding: .5rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active{
|
|
||||||
border: 3px solid #000;
|
|
||||||
.background{
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover{
|
|
||||||
border: 3px solid #000;
|
|
||||||
.background{
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,371 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="workspace">
|
|
||||||
<div class="workspaceBox">
|
|
||||||
<div class="title marginBottom" style=" display:flex;align-items: center;">
|
|
||||||
<i v-if="firstTime" @click="setBack" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>
|
|
||||||
Project setting <div v-show="workflowTitle" style="font-size: 1.4rem;margin-top: auto;">({{ workflowTitle }})</div>
|
|
||||||
</div>
|
|
||||||
<div class="projectName marginBottom" v-if="show.title">
|
|
||||||
<div class="text">Project name: <span style="color: red;">*</span></div>
|
|
||||||
<div class="input">
|
|
||||||
<input type="text" v-model="selectObject.name">
|
|
||||||
<!-- <i class="fi fi-rr-edit"></i> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="gender marginBottom" v-if="show.age">
|
|
||||||
<div class="text">Role</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
|
|
||||||
<span>Adult</span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
|
|
||||||
<span>Child</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="gender marginBottom">
|
|
||||||
<div class="text">Gender:</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
|
|
||||||
<span>Female</span>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
|
|
||||||
<span>Male</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style marginBottom" v-if="show.style">
|
|
||||||
<div class="text">Style:</div>
|
|
||||||
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
|
||||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
|
||||||
<a-slider class="system_silder"
|
|
||||||
v-model:value="selectObject.systemDesignerPercentage"
|
|
||||||
:tip-formatter="formatter"
|
|
||||||
:tooltipVisible="false"
|
|
||||||
>
|
|
||||||
</a-slider>
|
|
||||||
<div class="text">
|
|
||||||
<div class="left">
|
|
||||||
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
|
|
||||||
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="position marginBottom" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position">
|
|
||||||
<div class="text">
|
|
||||||
Category:
|
|
||||||
</div>
|
|
||||||
<generalMenu style="width:80%" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
|
||||||
</div>
|
|
||||||
<div class="complete">
|
|
||||||
<div class="gallery_btn" @click="complete">Complete</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,computed,watch,nextTick,onBeforeUnmount,toRefs, reactive, onMounted, inject} from 'vue'
|
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
// import workspace from './model/workspace.vue'
|
|
||||||
import router from '@/router';
|
|
||||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
|
||||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
||||||
import { Https } from '@/tool/https';
|
|
||||||
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
|
|
||||||
import { id } from 'element-plus/es/locale';
|
|
||||||
import { message } from 'ant-design-vue';
|
|
||||||
import {projectList} from '@/tool/listData'
|
|
||||||
export default defineComponent({
|
|
||||||
components:{
|
|
||||||
habitSetStyle,generalMenu
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
workflowType:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
httpWorkflowType:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
workflowTitle:{
|
|
||||||
type:String,
|
|
||||||
default:''
|
|
||||||
},
|
|
||||||
firstTime:{
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits:['setProject'],
|
|
||||||
setup(props,{emit}) {
|
|
||||||
const { t } = useI18n();
|
|
||||||
const store = useStore();
|
|
||||||
const data = reactive({
|
|
||||||
selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
||||||
selectObject:{} as any,
|
|
||||||
femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
|
|
||||||
malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
|
|
||||||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
|
||||||
show:{
|
|
||||||
title:true,
|
|
||||||
gender:false,
|
|
||||||
style:false,
|
|
||||||
age:false,
|
|
||||||
systemDesigner:false,
|
|
||||||
position:false,
|
|
||||||
},
|
|
||||||
systemDesigner:{
|
|
||||||
system:0,
|
|
||||||
designer:0,
|
|
||||||
},
|
|
||||||
setIsShowMark:inject('setIsShowMark') as any,
|
|
||||||
})
|
|
||||||
watch(()=>data.selectObject_,(newVal)=>{
|
|
||||||
data.selectObject = JSON.parse(JSON.stringify(newVal))
|
|
||||||
})
|
|
||||||
const dataDom = reactive({
|
|
||||||
habitSetStyle:null as any,
|
|
||||||
})
|
|
||||||
const setStyle = ()=>{
|
|
||||||
dataDom.habitSetStyle.init(data.selectObject);
|
|
||||||
}
|
|
||||||
const setWorkspaceStyle = (value:any)=>{
|
|
||||||
data.selectObject.styleName = value.name
|
|
||||||
data.selectObject.style = value.value
|
|
||||||
data.selectObject.styleId = value.id
|
|
||||||
// store.commit('setProbject',data)
|
|
||||||
}
|
|
||||||
const setprintModel = (value:any)=>{
|
|
||||||
data.selectObject.position = value
|
|
||||||
}
|
|
||||||
const formatter = (value: number)=>{
|
|
||||||
data.systemDesigner.system = 100 - value
|
|
||||||
data.systemDesigner.designer = value
|
|
||||||
let num = Math.abs((value-50)*2)
|
|
||||||
return `${num}%`;
|
|
||||||
}
|
|
||||||
const complete = ()=>{
|
|
||||||
if(!data.selectObject.name){
|
|
||||||
message.info(t('PrintboardUpload.jsContent7'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let value = {
|
|
||||||
name:data.selectObject.name,
|
|
||||||
process:props.httpWorkflowType,
|
|
||||||
styleId:data.show.style?data.selectObject.styleId:null,
|
|
||||||
id:data.selectObject.id,
|
|
||||||
workspace:{
|
|
||||||
sex:data.selectObject.sex,
|
|
||||||
// sex:data.show.gender?data.selectObject.sex:null,
|
|
||||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
|
||||||
position:data.show.position?data.selectObject.position.value:'Overall',
|
|
||||||
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
|
||||||
// position:data.selectObject,
|
|
||||||
} as any,
|
|
||||||
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
|
|
||||||
if(rv){
|
|
||||||
data.selectObject.id = rv.id
|
|
||||||
let model:any = {}
|
|
||||||
let position = []
|
|
||||||
if(data.selectObject.sex == "Female"){
|
|
||||||
// if(rv.workspaceVO.sex == "Female"){
|
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinFemaleId,
|
|
||||||
type:rv.workspaceVO.mannequinFemaleType,
|
|
||||||
url:rv.workspaceVO.femalePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.FemalePosition
|
|
||||||
}else{
|
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinMaleId,
|
|
||||||
type:rv.workspaceVO.mannequinMaleType,
|
|
||||||
url:rv.workspaceVO.malePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.MalePosition
|
|
||||||
}
|
|
||||||
// model.url = rv.workspaceVO.malePresignedUrl
|
|
||||||
data.selectObject.model = model
|
|
||||||
data.selectObject.positionList = position
|
|
||||||
store.commit('setProbject',data.selectObject)
|
|
||||||
emit('setProject','set')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const openSetData = ()=>{
|
|
||||||
|
|
||||||
}
|
|
||||||
const setBack = ()=>{
|
|
||||||
let data = {
|
|
||||||
type:'',
|
|
||||||
httpType:'',//项目类型
|
|
||||||
}
|
|
||||||
store.commit('setProbject',data)
|
|
||||||
store.commit('setProjectList',[])
|
|
||||||
}
|
|
||||||
onMounted(()=>{
|
|
||||||
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
|
||||||
data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
|
|
||||||
data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
|
||||||
data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
|
|
||||||
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
|
||||||
data.show.position = (props.workflowType == 'singleProductDesign')
|
|
||||||
|
|
||||||
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
|
|
||||||
data.setIsShowMark(true)
|
|
||||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
|
||||||
(rv) => {
|
|
||||||
data.setIsShowMark(false)
|
|
||||||
rv.forEach((item:any) => {
|
|
||||||
let name = item.value
|
|
||||||
item.value = item.name
|
|
||||||
item.name = name
|
|
||||||
});
|
|
||||||
data.selectObject.style = rv[0].value
|
|
||||||
data.selectObject.styleName = rv[0].name
|
|
||||||
data.selectObject.styleId = rv[0].id
|
|
||||||
store.commit('setMannequinStyle',rv)
|
|
||||||
}
|
|
||||||
).catch(res=>{
|
|
||||||
data.setIsShowMark(false)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
|
||||||
if(newVal == 'Male'){
|
|
||||||
data.selectObject.positionList = data.malePosition
|
|
||||||
}else{
|
|
||||||
data.selectObject.positionList = data.femalePosition
|
|
||||||
}
|
|
||||||
data.selectObject.position = data.selectObject.positionList[0]
|
|
||||||
})
|
|
||||||
return{
|
|
||||||
projectList,
|
|
||||||
...toRefs(dataDom),
|
|
||||||
...toRefs(data),
|
|
||||||
setStyle,
|
|
||||||
setWorkspaceStyle,
|
|
||||||
setprintModel,
|
|
||||||
formatter,
|
|
||||||
complete,
|
|
||||||
openSetData,
|
|
||||||
setBack,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.workspace{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
> .workspaceBox{
|
|
||||||
width: 55rem;
|
|
||||||
padding: 0 5rem;
|
|
||||||
> .marginBottom{
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
> .title{
|
|
||||||
font-size: 2.7rem;
|
|
||||||
> span{
|
|
||||||
color: #999999;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .projectName{
|
|
||||||
> .text{
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
> .input{
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
// padding: 2rem 2.7rem;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
border-radius: 1.6rem;
|
|
||||||
border: 2px solid #D0D0D0;
|
|
||||||
display: flex;
|
|
||||||
> input{
|
|
||||||
flex: 1;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
> i{
|
|
||||||
display: flex;
|
|
||||||
color: #999999;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .gender{
|
|
||||||
display: flex;
|
|
||||||
> .text{
|
|
||||||
width: 8rem;
|
|
||||||
}
|
|
||||||
> .radio{
|
|
||||||
display: flex;
|
|
||||||
margin-left: 4.5rem;
|
|
||||||
> label{
|
|
||||||
display: flex;
|
|
||||||
margin-right: 4rem;
|
|
||||||
>input{
|
|
||||||
margin-right: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .style{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
> .systemDesigner{
|
|
||||||
> .text{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .position{
|
|
||||||
:deep(.generalMenu_printModel){
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
> div,> ul{
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 1.6rem;
|
|
||||||
border: 2px solid #D0D0D0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .complete{
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
> div{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -277,7 +277,7 @@ export default defineComponent({
|
|||||||
let bor = false
|
let bor = false
|
||||||
if(this.newPicName && this.selectCode == 'History'){//多选修改名字
|
if(this.newPicName && this.selectCode == 'History'){//多选修改名字
|
||||||
|
|
||||||
await Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
await Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
bor = true
|
bor = true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -268,7 +268,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
data.classificationName = val.classificationName
|
data.classificationName = val.classificationName
|
||||||
|
|
||||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
this.getClass()
|
this.getClass()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
scriptSrc:'https://accounts.google.com/gsi/client',
|
scriptSrc:'https://accounts.google.com/gsi/client',
|
||||||
script:null
|
script:null
|
||||||
})
|
})
|
||||||
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
|
let GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
|
||||||
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
|
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
|
||||||
// 使用谷歌登录的api
|
// 使用谷歌登录的api
|
||||||
const createGmailLogin = async ()=>{
|
const createGmailLogin = async ()=>{
|
||||||
|
|||||||
362
src/component/home/batchGeneration/index.vue
Normal file
362
src/component/home/batchGeneration/index.vue
Normal file
@@ -0,0 +1,362 @@
|
|||||||
|
<template>
|
||||||
|
<div class="uploading">
|
||||||
|
<div class="title">
|
||||||
|
<div class="list">
|
||||||
|
<div
|
||||||
|
class="titleItem active"
|
||||||
|
>
|
||||||
|
<span class="detailText">All</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ selectObject.id }}123
|
||||||
|
<div class="searchObject generalModel_state">
|
||||||
|
<div class="generalModel_state_item smail">
|
||||||
|
<span>Project :</span>
|
||||||
|
<a-select
|
||||||
|
v-model:value="changeEvent"
|
||||||
|
show-search
|
||||||
|
allowClear
|
||||||
|
style="width: 150px"
|
||||||
|
placeholder="Please select"
|
||||||
|
:options="objectList"
|
||||||
|
@change="handleChange"
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="createCloud" v-show="selectObject.id">
|
||||||
|
<div class="gallery_btn" @click="createClound">Create</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="contentList">
|
||||||
|
<div class="title">
|
||||||
|
<div class="titleItem" v-for="item in cloudTiltleList" :key="item.value">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<tr v-for="(row, index) in contentList" :key="index">
|
||||||
|
<td v-for="header in cloudTiltleList" :key="header.value">
|
||||||
|
<span v-show="header.value != 'operation'">
|
||||||
|
{{header?.fun?header.fun(row[header.value]) : row[header.value]}}
|
||||||
|
</span>
|
||||||
|
<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="detailIamge(row)">
|
||||||
|
Review
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</div>
|
||||||
|
<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
|
||||||
|
</div>
|
||||||
|
<createCloud ref="createCloud" :cloudList="generateList[workflowType]" @getContentList="submitGetContentList"></createCloud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import createCloud from "./createCloud.vue";
|
||||||
|
import { da } from 'element-plus/es/locale';
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
createCloud,
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
workflowType:{
|
||||||
|
type:String,
|
||||||
|
default:'' as any,
|
||||||
|
required:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits:['retrieve'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
const data = reactive({
|
||||||
|
pageType:'list',
|
||||||
|
pageSize:10,
|
||||||
|
currentPage:1,
|
||||||
|
total:0,
|
||||||
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
|
generateList:{
|
||||||
|
seriesDesign:[
|
||||||
|
{
|
||||||
|
label:'Design',
|
||||||
|
value:'design',
|
||||||
|
consumption:0,
|
||||||
|
},{
|
||||||
|
label:'To Product Image',
|
||||||
|
value:'toProductImage',
|
||||||
|
consumption:5,
|
||||||
|
},{
|
||||||
|
label:'Relight',
|
||||||
|
value:'relight',
|
||||||
|
consumption:5,
|
||||||
|
},{
|
||||||
|
label:'Transfer Pose',
|
||||||
|
value:'poseTransfer',
|
||||||
|
consumption:10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
singleProductDesign:[
|
||||||
|
{
|
||||||
|
label:'Design',
|
||||||
|
value:'design',
|
||||||
|
consumption:0,
|
||||||
|
},{
|
||||||
|
label:'To Product Image',
|
||||||
|
value:'toProductImage',
|
||||||
|
consumption:5,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// printDesign:[
|
||||||
|
// {
|
||||||
|
// label:'1',
|
||||||
|
// value:100,
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
productDrawingDesign:[
|
||||||
|
{
|
||||||
|
label:'To Product Image',
|
||||||
|
value:'toProductImage',
|
||||||
|
consumption:5,
|
||||||
|
},{
|
||||||
|
label:'Relight',
|
||||||
|
value:'relight',
|
||||||
|
consumption:5,
|
||||||
|
},{
|
||||||
|
label:'Transfer Pose',
|
||||||
|
value:'poseTransfer',
|
||||||
|
consumption:10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// printingDesign3D:[
|
||||||
|
// {
|
||||||
|
// label:'1',
|
||||||
|
// value:100,
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
|
// sketchDesign:[]
|
||||||
|
},
|
||||||
|
cloudTiltleList:[
|
||||||
|
{
|
||||||
|
name:'Task type',
|
||||||
|
value:'buildType',
|
||||||
|
fun:(value:any)=>{
|
||||||
|
let str = ''
|
||||||
|
if(value == 'design')str = 'Design'
|
||||||
|
if(value == 'toProductImage')str = 'To Product Image'
|
||||||
|
if(value == 'relight')str = 'Relight'
|
||||||
|
if(value == 'poseTransfer')str = 'Transfer Pose'
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'Quantity generated',
|
||||||
|
value:'nums',
|
||||||
|
},{
|
||||||
|
name:'Creation time',
|
||||||
|
value:'updateTime',
|
||||||
|
fun:(value:any)=>{
|
||||||
|
if(!value)return
|
||||||
|
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'Start time',
|
||||||
|
value:'updateTime',
|
||||||
|
fun:(value:any)=>{
|
||||||
|
//没开始内容为 -
|
||||||
|
if(!value)return
|
||||||
|
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'End time',
|
||||||
|
value:'updateTime',
|
||||||
|
fun:(value:any)=>{
|
||||||
|
if(!value)return
|
||||||
|
return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0]
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'Status',
|
||||||
|
value:'process',
|
||||||
|
fun:(value:any)=>{
|
||||||
|
if(value == '100.00%'){
|
||||||
|
return 'Completed'
|
||||||
|
}else{
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},{
|
||||||
|
name:'Operation',
|
||||||
|
value:'operation',
|
||||||
|
},
|
||||||
|
] as any,
|
||||||
|
contentList:[
|
||||||
|
] as any,
|
||||||
|
isGetContentList:false as any,
|
||||||
|
})
|
||||||
|
const dataDom = reactive({
|
||||||
|
createCloud,
|
||||||
|
})
|
||||||
|
const createClound = ()=>{
|
||||||
|
data.isGetContentList = false
|
||||||
|
dataDom.createCloud.init()
|
||||||
|
}
|
||||||
|
const detailIamge = (item:any)=>{
|
||||||
|
//去除里面的T2025-04-17T13:45:43
|
||||||
|
if(item.process == '100.00%' || item.status == 1){
|
||||||
|
let value = {
|
||||||
|
taskId:item.taskId,
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
buildType:item.buildType,
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
|
||||||
|
console.log(rv)
|
||||||
|
if(rv.design && rv.design.length > 0){
|
||||||
|
store.commit('addDesignCollectionList',rv.design)
|
||||||
|
emit('retrieve','design')
|
||||||
|
}else if(rv.toProductImage && rv.toProductImage.length > 0){
|
||||||
|
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
|
||||||
|
emit('retrieve','toProduct')
|
||||||
|
}else if(rv.relight && rv.relight.length > 0){
|
||||||
|
store.commit('setCloudList',{str:'relight',list:rv.relight})
|
||||||
|
emit('retrieve','relight')
|
||||||
|
}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
|
||||||
|
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
|
||||||
|
emit('retrieve','poseTransfer')
|
||||||
|
}
|
||||||
|
data.isGetContentList = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getContentList = ()=>{
|
||||||
|
if(data.isGetContentList){
|
||||||
|
let value = {
|
||||||
|
page:data.currentPage,
|
||||||
|
size:data.pageSize,
|
||||||
|
projectId: data.selectObject.id,
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
|
||||||
|
data.contentList = rv.content
|
||||||
|
data.total = rv.total
|
||||||
|
let arr = rv.content
|
||||||
|
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
|
||||||
|
if(!result)data.isGetContentList = false
|
||||||
|
setTimeout(()=>{
|
||||||
|
getContentList()
|
||||||
|
},1500)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const submitGetContentList = ()=>{
|
||||||
|
data.isGetContentList = true
|
||||||
|
getContentList()
|
||||||
|
}
|
||||||
|
onBeforeUnmount(()=>{
|
||||||
|
data.isGetContentList = false
|
||||||
|
})
|
||||||
|
onMounted(()=>{
|
||||||
|
data.isGetContentList = true
|
||||||
|
getContentList()
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(dataDom),
|
||||||
|
...toRefs(data),
|
||||||
|
createClound,
|
||||||
|
detailIamge,
|
||||||
|
getContentList,
|
||||||
|
submitGetContentList,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.uploading{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 3rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> .title{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
> .list{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
> .titleItem:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
> .titleItem{
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 6.5rem;
|
||||||
|
}
|
||||||
|
> .titleItem::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: #000;
|
||||||
|
height: calc(.4rem*1.2);
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: -.5rem;
|
||||||
|
width: 0px;
|
||||||
|
transition: 0.3s all;
|
||||||
|
}
|
||||||
|
> .active {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
> .active::before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .createCloud{
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
> .searchObject{
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .contentList{
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> .content tr , > .title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 1.2rem;
|
||||||
|
}
|
||||||
|
> .title{
|
||||||
|
background: #F7F7F7;
|
||||||
|
> .titleItem{
|
||||||
|
line-height: 4.6rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: #666666;
|
||||||
|
width: calc(100% / 4);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
> tr{
|
||||||
|
> td{
|
||||||
|
text-align: center;
|
||||||
|
width: calc(100% / 4);
|
||||||
|
line-height: 4.6rem;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -54,9 +54,9 @@
|
|||||||
<i class="fi fi-rs-paperclip-vertical">
|
<i class="fi fi-rs-paperclip-vertical">
|
||||||
<input type="file" @change="handleFileUpload($event)">
|
<input type="file" @change="handleFileUpload($event)">
|
||||||
</i>
|
</i>
|
||||||
|
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sendBox">
|
<div class="sendBox">
|
||||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
|
||||||
<div class="maxNum">{{ chatContent?.length }}/10000</div>
|
<div class="maxNum">{{ chatContent?.length }}/10000</div>
|
||||||
<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
|
<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
|
||||||
<i class="fi fi-ss-paper-plane-top"></i>
|
<i class="fi fi-ss-paper-plane-top"></i>
|
||||||
@@ -525,6 +525,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .enableThinking{
|
||||||
|
width: 10rem;
|
||||||
|
padding: .2rem .4rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: .4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 1rem;
|
||||||
|
&.active{
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
i{
|
i{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@@ -547,21 +562,7 @@ export default defineComponent({
|
|||||||
> .sendBox{
|
> .sendBox{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> .enableThinking{
|
|
||||||
width: 10rem;
|
|
||||||
padding: .2rem .4rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border-radius: .4rem;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 1rem;
|
|
||||||
&.active{
|
|
||||||
background: #000;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .maxNum{
|
> .maxNum{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-right: .8rem;
|
margin-right: .8rem;
|
||||||
|
|||||||
@@ -32,6 +32,7 @@
|
|||||||
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
|
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
|
||||||
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
|
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
|
||||||
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
|
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
|
||||||
|
<mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
<div class="mark_loading" v-show="isShowMark">
|
||||||
@@ -50,10 +51,11 @@ import MoodboardUpload from './collection/MoodboardUpload.vue';
|
|||||||
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
||||||
import ColorboardUpload from './collection/ColorboardUpload.vue';
|
import ColorboardUpload from './collection/ColorboardUpload.vue';
|
||||||
import SketchboardUpload from './collection/SketchboardUpload.vue';
|
import SketchboardUpload from './collection/SketchboardUpload.vue';
|
||||||
|
import mannequin from './mannequin/index.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,
|
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
|
||||||
},
|
},
|
||||||
props:{
|
props:{
|
||||||
},
|
},
|
||||||
@@ -64,6 +66,7 @@ export default defineComponent({
|
|||||||
habitSetStyle:false,
|
habitSetStyle:false,
|
||||||
isShowMark:false,
|
isShowMark:false,
|
||||||
openType:'',
|
openType:'',
|
||||||
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
})
|
})
|
||||||
let driver__:any = computed(()=>{
|
let driver__:any = computed(()=>{
|
||||||
return store.state.Guide.guide
|
return store.state.Guide.guide
|
||||||
@@ -74,6 +77,7 @@ export default defineComponent({
|
|||||||
printBoard:null as any,
|
printBoard:null as any,
|
||||||
colorBoard:null as any,
|
colorBoard:null as any,
|
||||||
sketchBoard:null as any,
|
sketchBoard:null as any,
|
||||||
|
mannequin:null as any,
|
||||||
}) as any
|
}) as any
|
||||||
const init = (value:any)=>{
|
const init = (value:any)=>{
|
||||||
data.habitSetStyle = true
|
data.habitSetStyle = true
|
||||||
@@ -85,8 +89,21 @@ export default defineComponent({
|
|||||||
let cleardata = ()=>{
|
let cleardata = ()=>{
|
||||||
data.habitSetStyle = false
|
data.habitSetStyle = false
|
||||||
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
||||||
|
saveProject(data.openType)
|
||||||
|
}
|
||||||
|
const saveProject = (str:any)=>{
|
||||||
|
if(str == 'design')return
|
||||||
|
let value:any = {
|
||||||
|
projectId:data.selectObject.id,
|
||||||
|
}
|
||||||
|
store.dispatch('getProjectData',str).then((data)=>{
|
||||||
|
if(!data[str])return
|
||||||
|
value[str] = data[str]
|
||||||
|
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
||||||
|
if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return{
|
return{
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
@@ -107,6 +124,7 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
.collectionBox{
|
.collectionBox{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -887,7 +887,16 @@ export default defineComponent({
|
|||||||
moodboardPosition,
|
moodboardPosition,
|
||||||
} = this.store.state.UploadFilesModule.allBoardData;
|
} = this.store.state.UploadFilesModule.allBoardData;
|
||||||
this.randomNum()
|
this.randomNum()
|
||||||
let workspace = this.store.state.Workspace.probjects
|
let modelList = [] as any;
|
||||||
|
let workspace:any = this.store.state.Workspace.probjects
|
||||||
|
workspace.model.forEach((item:any)=>{
|
||||||
|
let obj = {
|
||||||
|
id:item.id,
|
||||||
|
type:item.type,
|
||||||
|
collectionElementId:item.collectionElementId
|
||||||
|
}
|
||||||
|
modelList.push(obj)
|
||||||
|
})
|
||||||
let data: any = {
|
let data: any = {
|
||||||
colorBoards: this.getColorBoard(colorBoards),
|
colorBoards: this.getColorBoard(colorBoards),
|
||||||
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||||||
@@ -898,9 +907,10 @@ export default defineComponent({
|
|||||||
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
|
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
|
||||||
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
|
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
|
||||||
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
|
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
|
||||||
// templateId: 3377,
|
templateId: '',
|
||||||
templateId: workspace.model.id,
|
// templateId: workspace.model.id,
|
||||||
modelType:workspace.model.type,
|
mannequins: modelList,
|
||||||
|
modelType:'',
|
||||||
modelSex:workspace?.sex,
|
modelSex:workspace?.sex,
|
||||||
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
|
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
|||||||
@@ -1,11 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="placementModal" v-if="placementShow">
|
<div ref="placementModal" v-if="placementShow">
|
||||||
<a-modal class="generalModel "
|
<a-modal class="generalModel "
|
||||||
:class="{fullScreen:!isPop}"
|
|
||||||
v-model:visible="placementShow"
|
v-model:visible="placementShow"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
:width="isPop?'150rem':'100%'"
|
width="75%"
|
||||||
:height="isPop?'90rem':'100%'"
|
|
||||||
:get-container="() => $refs.placementModal"
|
:get-container="() => $refs.placementModal"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:mask="mannEditMask"
|
:mask="mannEditMask"
|
||||||
@@ -1153,12 +1151,12 @@ export default defineComponent({
|
|||||||
padding: 4rem 5rem;
|
padding: 4rem 5rem;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
.generalModel_btn {
|
.generalModel_btn {
|
||||||
.generalModel_closeIcon{
|
// .generalModel_closeIcon{
|
||||||
transform: translate(-100%, 100%);
|
// transform: translate(-100%, 100%);
|
||||||
svg{
|
// svg{
|
||||||
color: #000;
|
// color: #000;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1413,8 +1411,9 @@ export default defineComponent({
|
|||||||
position: relative;
|
position: relative;
|
||||||
// height: 57.6rem;
|
// height: 57.6rem;
|
||||||
// width: 40.8rem;
|
// width: 40.8rem;
|
||||||
height: 68rem;
|
// height: 68rem;
|
||||||
width: 47rem;
|
height: calc(100% - 6rem);
|
||||||
|
aspect-ratio: 1 / 1.446;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
.img_content_block{
|
.img_content_block{
|
||||||
@@ -26,6 +26,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="selectModel">
|
||||||
|
Current Model :
|
||||||
|
<div class="item" v-for="item ,index in selectObject.model" @click="deleteSelectModel(index)">
|
||||||
|
<img :src="item.url" alt="">
|
||||||
|
<span class="icon iconfont icon-shanchu"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
||||||
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
|
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
|
||||||
@@ -33,7 +40,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="model" v-mousewheel>
|
<div class="model" v-mousewheel>
|
||||||
<div class="item" v-for="item,index in modelList" :key="item.id" :class="[item.id == selectObject.model.id?'active':'',!systemUser?'library':'']" @click="setSelectKey(item)">
|
<div class="item" v-for="item,index in modelList" :key="item.id" :class="[!!selectObject.model.find(objectItem => objectItem.id === item.id)?'active':'',!systemUser?'library':'']" @click="setSelectKey(item)">
|
||||||
<img :src="item.presignedUrl" alt="">
|
<img :src="item.presignedUrl" alt="">
|
||||||
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
|
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
|
||||||
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
|
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
|
||||||
@@ -56,8 +63,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
|
|
||||||
<edit ref="edit" :ageGroup="selectObject.ageGroup" @submit="getModel"></edit>
|
<edit ref="edit" :ageGroup="selectObject.ageGroup" @submit="getModel"></edit>
|
||||||
|
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -66,7 +73,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
import habitSetStyle from "@/component/modules/habitSetStyle.vue";
|
||||||
import edit from './edit.vue';
|
import edit from './edit.vue';
|
||||||
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||||
import { Item } from 'ant-design-vue/lib/menu';
|
import { Item } from 'ant-design-vue/lib/menu';
|
||||||
@@ -91,11 +98,11 @@ export default defineComponent({
|
|||||||
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
||||||
if(newValue != oldValue){
|
if(newValue != oldValue){
|
||||||
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
||||||
data.mannequinStyleList.unshift({
|
// data.mannequinStyleList.unshift({
|
||||||
name:'All',
|
// name:'All',
|
||||||
value:'',
|
// value:'',
|
||||||
id:'',
|
// id:'',
|
||||||
})
|
// })
|
||||||
}
|
}
|
||||||
},{immediate:true})
|
},{immediate:true})
|
||||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||||
@@ -130,14 +137,39 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const setSelectKey = (item:any)=>{
|
const setSelectKey = (item:any)=>{
|
||||||
let value = {
|
let list = store.state.Workspace.probjects.model
|
||||||
model:{
|
let index = -1
|
||||||
id:item.id,
|
list.forEach((val:any,listIndex:any)=>{
|
||||||
url:item.presignedUrl,
|
if(val.id == item.id){
|
||||||
type:data.systemUser?'System':'Library',
|
index = listIndex
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if(index != -1){
|
||||||
|
if(list.length > 1){
|
||||||
|
list.splice(index,1)
|
||||||
|
}else{
|
||||||
|
message.info(t('LibraryPage.jsContent13'))//至少选择一个
|
||||||
|
}
|
||||||
|
}else if(index == -1){
|
||||||
|
if(list.length <= 3){
|
||||||
|
let model = {
|
||||||
|
id:item.id,
|
||||||
|
url:item.presignedUrl,
|
||||||
|
type:data.systemUser?'System':'Library',
|
||||||
|
}
|
||||||
|
list.push(model)
|
||||||
|
}else{
|
||||||
|
message.info(t('LibraryPage.jsContent13'))//最多选择四个
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
store.commit('setProbject',value)
|
}
|
||||||
|
const deleteSelectModel = (index:number)=>{
|
||||||
|
let list = store.state.Workspace.probjects.model
|
||||||
|
if(list.length > 1){
|
||||||
|
list.splice(index,1)
|
||||||
|
}else{
|
||||||
|
message.info(t('LibraryPage.jsContent13'))//最多选择四个
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const setSystemUser = ()=>{
|
const setSystemUser = ()=>{
|
||||||
data.systemUser = !data.systemUser
|
data.systemUser = !data.systemUser
|
||||||
@@ -190,6 +222,11 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
const deleteSinglePic = (item:any,index:number)=>{
|
const deleteSinglePic = (item:any,index:number)=>{
|
||||||
|
let list = store.state.Workspace.probjects.model
|
||||||
|
if(!!list.find((objectItem:any) => objectItem.id === item.id)){
|
||||||
|
message.info(t('LibraryPage.jsContent12'));
|
||||||
|
return
|
||||||
|
}
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: t('LibraryPage.jsContent1'),
|
title: t('LibraryPage.jsContent1'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
@@ -244,6 +281,7 @@ export default defineComponent({
|
|||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
setSelectKey,
|
setSelectKey,
|
||||||
|
deleteSelectModel,
|
||||||
setSystemUser,
|
setSystemUser,
|
||||||
setStyle,
|
setStyle,
|
||||||
setWorkspaceStyle,
|
setWorkspaceStyle,
|
||||||
@@ -296,11 +334,44 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 4rem 0 3rem;
|
margin: 4rem 0 3rem;
|
||||||
> .left,> .right{
|
> .left,> .right,> .selectModel{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
> .selectModel{
|
||||||
|
> .item{
|
||||||
|
height: 6rem;
|
||||||
|
width: 6rem;
|
||||||
|
margin: 0 .2rem;
|
||||||
|
position: relative;
|
||||||
|
>img{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
> span{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
> span{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
> .right{
|
> .right{
|
||||||
> .switch{
|
> .switch{
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
@@ -315,13 +386,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .model{
|
> .model{
|
||||||
height: 70rem;
|
// height: 70rem;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 130rem;
|
max-width: 130rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
overflow-y: auto;
|
overflow-y: hidden;
|
||||||
max-height: calc(100% - 20rem);
|
// max-height: calc(100% - 20rem);
|
||||||
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
> .item{
|
> .item{
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
@@ -384,7 +456,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .uploadBox{
|
> .uploadBox{
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
right: 0;
|
right: -1px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -133,6 +133,10 @@ export default defineComponent({
|
|||||||
styleId:rv.workspaceVO.styleId,
|
styleId:rv.workspaceVO.styleId,
|
||||||
styleName:rv.workspaceVO.styleName,
|
styleName:rv.workspaceVO.styleName,
|
||||||
sex:rv.workspaceVO.sex,
|
sex:rv.workspaceVO.sex,
|
||||||
|
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
|
||||||
|
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
|
||||||
|
brandPercentage:rv.workspaceVO.brandPercentage,
|
||||||
|
userBrandDna:rv.workspaceVO.userBrandDna,
|
||||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
||||||
position:{
|
position:{
|
||||||
label:rv.workspaceVO.positionEnum.value,
|
label:rv.workspaceVO.positionEnum.value,
|
||||||
@@ -145,26 +149,15 @@ export default defineComponent({
|
|||||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
||||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
||||||
},
|
},
|
||||||
model:{}
|
model:[]
|
||||||
}
|
}
|
||||||
let model:any = {}
|
|
||||||
let position = []
|
let position = []
|
||||||
if(storeData.sex == "Female"){
|
if(storeData.sex == "Female"){
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinFemaleId,
|
|
||||||
type:rv.workspaceVO.mannequinFemaleType,
|
|
||||||
url:rv.workspaceVO.femalePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.FemalePosition
|
position = store.state.UserHabit.FemalePosition
|
||||||
}else{
|
}else{
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinMaleId,
|
|
||||||
type:rv.workspaceVO.mannequinMaleType,
|
|
||||||
url:rv.workspaceVO.malePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.MalePosition
|
position = store.state.UserHabit.MalePosition
|
||||||
}
|
}
|
||||||
storeData.model = model
|
// storeData.model = model
|
||||||
data.selectObject.positionList = position
|
data.selectObject.positionList = position
|
||||||
storeData.positionList = position
|
storeData.positionList = position
|
||||||
store.commit('setProbject',storeData)
|
store.commit('setProbject',storeData)
|
||||||
@@ -178,7 +171,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const setChatData = ()=>{
|
const setChatData = ()=>{
|
||||||
if(!data.chatData)return
|
if(!data.chatData)return
|
||||||
console.log(dataDom.chatDom?.enableThinking,data.chatData)
|
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
dataDom.chatDom.enableThinking = data.chatData.enableThinking
|
dataDom.chatDom.enableThinking = data.chatData.enableThinking
|
||||||
dataDom.chatDom.filList = data.chatData.filList
|
dataDom.chatDom.filList = data.chatData.filList
|
||||||
@@ -208,6 +200,18 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||||
historyChooseData(rv)//设置历史数据
|
historyChooseData(rv)//设置历史数据
|
||||||
|
if(rv.mannequin.length>0){
|
||||||
|
let arr = [] as any
|
||||||
|
rv.mannequin.forEach((item:any)=>{
|
||||||
|
arr.push({
|
||||||
|
url:item.url,
|
||||||
|
id:item.mannequinRelationId,
|
||||||
|
type:item.mannequinRelationType,
|
||||||
|
collectionElementId:item.collectionId
|
||||||
|
})
|
||||||
|
})
|
||||||
|
store.commit('setProbject',{model:arr})
|
||||||
|
}
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||||
// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
|
// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
|
||||||
let canvasData = ['canvas']
|
let canvasData = ['canvas']
|
||||||
|
|||||||
@@ -30,9 +30,9 @@
|
|||||||
<i class="fi fi-rs-paperclip-vertical">
|
<i class="fi fi-rs-paperclip-vertical">
|
||||||
<input type="file" @change="handleFileUpload($event)">
|
<input type="file" @change="handleFileUpload($event)">
|
||||||
</i>
|
</i>
|
||||||
|
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sendBox">
|
<div class="sendBox">
|
||||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
|
||||||
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
||||||
<div class="send" @click="sendChat">
|
<div class="send" @click="sendChat">
|
||||||
<i class="fi fi-ss-paper-plane-top"></i>
|
<i class="fi fi-ss-paper-plane-top"></i>
|
||||||
@@ -246,22 +246,31 @@ export default defineComponent({
|
|||||||
position: relative;
|
position: relative;
|
||||||
> .contentBox{
|
> .contentBox{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 7.8rem);
|
height: calc(100% - 3.9rem);
|
||||||
|
// height: calc(100% - 7.8rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
> .content{
|
> .content{
|
||||||
// background: red;
|
// background: red;
|
||||||
width: 88rem;
|
width: 88rem;
|
||||||
// height: 100%;
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
> .title{
|
> .title{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
> .workspaceBox{
|
> .workspaceBox{
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 2.4rem;
|
||||||
|
padding: 1.2rem;
|
||||||
|
border: 1px solid #0000001a;
|
||||||
:deep(.workspace){
|
:deep(.workspace){
|
||||||
border: 1px solid #0000001a;
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .selectFlow{
|
> .selectFlow{
|
||||||
@@ -379,6 +388,21 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .enableThinking{
|
||||||
|
width: 10rem;
|
||||||
|
padding: .2rem .4rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: .4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active{
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
i{
|
i{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
@@ -401,21 +425,7 @@ export default defineComponent({
|
|||||||
> .sendBox{
|
> .sendBox{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> .enableThinking{
|
|
||||||
width: 10rem;
|
|
||||||
padding: .2rem .4rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border-radius: .4rem;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 1rem;
|
|
||||||
&.active{
|
|
||||||
background: #000;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .maxNum{
|
> .maxNum{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-right: .8rem;
|
margin-right: .8rem;
|
||||||
|
|||||||
@@ -97,6 +97,10 @@ export default defineComponent({
|
|||||||
styleId:rv.workspaceVO.styleId,
|
styleId:rv.workspaceVO.styleId,
|
||||||
styleName:rv.workspaceVO.styleName,
|
styleName:rv.workspaceVO.styleName,
|
||||||
sex:rv.workspaceVO.sex,
|
sex:rv.workspaceVO.sex,
|
||||||
|
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
|
||||||
|
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
|
||||||
|
brandPercentage:rv.workspaceVO.brandPercentage,
|
||||||
|
userBrandDna:rv.workspaceVO.userBrandDna,
|
||||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
||||||
position:{
|
position:{
|
||||||
label:rv.workspaceVO.positionEnum.value,
|
label:rv.workspaceVO.positionEnum.value,
|
||||||
@@ -109,26 +113,15 @@ export default defineComponent({
|
|||||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
||||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
||||||
},
|
},
|
||||||
model:{}
|
model:[]
|
||||||
}
|
}
|
||||||
let model:any = {}
|
|
||||||
let position = []
|
let position = []
|
||||||
if(storeData.sex == "Female"){
|
if(storeData.sex == "Female"){
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinFemaleId,
|
|
||||||
type:rv.workspaceVO.mannequinFemaleType,
|
|
||||||
url:rv.workspaceVO.femalePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.FemalePosition
|
position = store.state.UserHabit.FemalePosition
|
||||||
}else{
|
}else{
|
||||||
model = {
|
|
||||||
id:rv.workspaceVO.mannequinMaleId,
|
|
||||||
type:rv.workspaceVO.mannequinMaleType,
|
|
||||||
url:rv.workspaceVO.malePresignedUrl,
|
|
||||||
}
|
|
||||||
position = store.state.UserHabit.MalePosition
|
position = store.state.UserHabit.MalePosition
|
||||||
}
|
}
|
||||||
storeData.model = model
|
// storeData.model = model
|
||||||
storeData.positionList = position
|
storeData.positionList = position
|
||||||
dataDom.workspace.init(storeData)
|
dataDom.workspace.init(storeData)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,6 +38,28 @@
|
|||||||
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="style marginBottom brand">
|
||||||
|
<div class="text">Bran DNA</div>
|
||||||
|
<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
|
||||||
|
<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
|
||||||
|
<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="systemDesigner marginBottom" v-if="selectObject.userBrandDna">
|
||||||
|
<a-slider class="system_silder"
|
||||||
|
v-model:value="selectObject.brandPercentage"
|
||||||
|
:tip-formatter="formatterBrandDNA"
|
||||||
|
:tooltipVisible="false"
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
<div class="text">
|
||||||
|
<div class="left">
|
||||||
|
Bran DNA<span>({{systemBrandDNA.system}}%)</span>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
System<span>({{systemBrandDNA.brandDNA}}%)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||||||
<a-slider class="system_silder"
|
<a-slider class="system_silder"
|
||||||
v-model:value="selectObject.systemDesignerPercentage"
|
v-model:value="selectObject.systemDesignerPercentage"
|
||||||
@@ -66,6 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
||||||
|
<setBrandDNA ref="brandDNA" @setWorkspaceBrandDNA="setWorkspaceBrandDNA"></setBrandDNA>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -75,7 +98,8 @@ import { useStore } from "vuex";
|
|||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
// import workspace from './model/workspace.vue'
|
// import workspace from './model/workspace.vue'
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
import habitSetStyle from "@/component/modules/habitSetStyle.vue";
|
||||||
|
import setBrandDNA from "@/component/modules/setBrandDNA.vue";
|
||||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||||
import { Https } from '@/tool/https';
|
import { Https } from '@/tool/https';
|
||||||
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
|
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
|
||||||
@@ -84,7 +108,7 @@ import { message } from 'ant-design-vue';
|
|||||||
import {projectList} from '@/tool/listData'
|
import {projectList} from '@/tool/listData'
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
habitSetStyle,generalMenu
|
habitSetStyle,generalMenu,setBrandDNA
|
||||||
},
|
},
|
||||||
props:{
|
props:{
|
||||||
workflowType:{
|
workflowType:{
|
||||||
@@ -126,6 +150,10 @@ export default defineComponent({
|
|||||||
system:0,
|
system:0,
|
||||||
designer:0,
|
designer:0,
|
||||||
},
|
},
|
||||||
|
systemBrandDNA:{
|
||||||
|
system:0,
|
||||||
|
brandDNA:0,
|
||||||
|
},
|
||||||
setIsShowMark:inject('setIsShowMark') as any,
|
setIsShowMark:inject('setIsShowMark') as any,
|
||||||
})
|
})
|
||||||
// watch(()=>data.selectObject_,(newVal)=>{
|
// watch(()=>data.selectObject_,(newVal)=>{
|
||||||
@@ -136,16 +164,25 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const dataDom = reactive({
|
const dataDom = reactive({
|
||||||
habitSetStyle:null as any,
|
habitSetStyle:null as any,
|
||||||
|
brandDNA:null as any,
|
||||||
})
|
})
|
||||||
const setStyle = ()=>{
|
const setStyle = ()=>{
|
||||||
dataDom.habitSetStyle.init(data.selectObject);
|
dataDom.habitSetStyle.init(data.selectObject);
|
||||||
}
|
}
|
||||||
|
const setBrandDNA = ()=>{
|
||||||
|
dataDom.brandDNA.init(data.selectObject);
|
||||||
|
}
|
||||||
const setWorkspaceStyle = (value:any)=>{
|
const setWorkspaceStyle = (value:any)=>{
|
||||||
data.selectObject.styleName = value.name
|
data.selectObject.styleName = value.name
|
||||||
data.selectObject.style = value.value
|
data.selectObject.style = value.value
|
||||||
data.selectObject.styleId = value.id
|
data.selectObject.styleId = value.id
|
||||||
// store.commit('setProbject',data)
|
// store.commit('setProbject',data)
|
||||||
}
|
}
|
||||||
|
const setWorkspaceBrandDNA = (value:any)=>{
|
||||||
|
data.selectObject.userBrandDnaName = value.name
|
||||||
|
data.selectObject.userBrandDna = value.id
|
||||||
|
data.selectObject.userBrandDnaImg = value.img
|
||||||
|
}
|
||||||
const setprintModel = (value:any)=>{
|
const setprintModel = (value:any)=>{
|
||||||
data.selectObject.position = value
|
data.selectObject.position = value
|
||||||
}
|
}
|
||||||
@@ -155,6 +192,12 @@ export default defineComponent({
|
|||||||
let num = Math.abs((value-50)*2)
|
let num = Math.abs((value-50)*2)
|
||||||
return `${num}%`;
|
return `${num}%`;
|
||||||
}
|
}
|
||||||
|
const formatterBrandDNA = (value: number)=>{
|
||||||
|
data.systemBrandDNA.system = 100 - value
|
||||||
|
data.systemBrandDNA.brandDNA = value
|
||||||
|
let num = Math.abs((value-50)*2)
|
||||||
|
return `${num}%`;
|
||||||
|
}
|
||||||
const complete = ()=>{
|
const complete = ()=>{
|
||||||
if(!data.selectObject.name){
|
if(!data.selectObject.name){
|
||||||
message.info(t('PrintboardUpload.jsContent7'))
|
message.info(t('PrintboardUpload.jsContent7'))
|
||||||
@@ -171,11 +214,13 @@ export default defineComponent({
|
|||||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
||||||
position:data.show.position?data.selectObject.position.value:'Overall',
|
position:data.show.position?data.selectObject.position.value:'Overall',
|
||||||
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
||||||
|
userBrandDna:data.selectObject.userBrandDna,
|
||||||
|
brandPercentage:data.selectObject.brandPercentage,
|
||||||
// position:data.selectObject,
|
// position:data.selectObject,
|
||||||
} as any,
|
} as any,
|
||||||
|
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
|
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
|
||||||
if(rv){
|
if(rv){
|
||||||
data.selectObject.id = rv.id
|
data.selectObject.id = rv.id
|
||||||
let model:any = {}
|
let model:any = {}
|
||||||
@@ -208,32 +253,13 @@ export default defineComponent({
|
|||||||
|
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
store.commit('createProbject')
|
||||||
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
|
||||||
// data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
|
data.selectObject.style = store.state.UserHabit.mannequinStyle[0].value
|
||||||
// data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
data.selectObject.styleName = store.state.UserHabit.mannequinStyle[0].name
|
||||||
// data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
|
data.selectObject.styleId = store.state.UserHabit.mannequinStyle[0].id
|
||||||
// data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
})
|
||||||
// data.show.position = (props.workflowType == 'singleProductDesign')
|
onBeforeUnmount(()=>{
|
||||||
|
|
||||||
if(!data.mannequinStyle){
|
|
||||||
data.setIsShowMark(true)
|
|
||||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
|
||||||
(rv) => {
|
|
||||||
data.setIsShowMark(false)
|
|
||||||
rv.forEach((item:any) => {
|
|
||||||
let name = item.value
|
|
||||||
item.value = item.name
|
|
||||||
item.name = name
|
|
||||||
});
|
|
||||||
data.selectObject.style = rv[0].value
|
|
||||||
data.selectObject.styleName = rv[0].name
|
|
||||||
data.selectObject.styleId = rv[0].id
|
|
||||||
store.commit('setMannequinStyle',rv)
|
|
||||||
}
|
|
||||||
).catch(res=>{
|
|
||||||
data.setIsShowMark(false)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||||
if(newVal == 'Male'){
|
if(newVal == 'Male'){
|
||||||
@@ -249,9 +275,12 @@ export default defineComponent({
|
|||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
init,
|
init,
|
||||||
setStyle,
|
setStyle,
|
||||||
|
setBrandDNA,
|
||||||
setWorkspaceStyle,
|
setWorkspaceStyle,
|
||||||
|
setWorkspaceBrandDNA,
|
||||||
setprintModel,
|
setprintModel,
|
||||||
formatter,
|
formatter,
|
||||||
|
formatterBrandDNA,
|
||||||
complete,
|
complete,
|
||||||
openSetData,
|
openSetData,
|
||||||
}
|
}
|
||||||
@@ -275,7 +304,6 @@ export default defineComponent({
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
padding: 1.2rem;
|
padding: 1.2rem;
|
||||||
border-radius: 2.4rem;
|
|
||||||
> .workspaceBox{
|
> .workspaceBox{
|
||||||
width: 55rem;
|
width: 55rem;
|
||||||
padding: 0 5rem;
|
padding: 0 5rem;
|
||||||
@@ -289,6 +317,15 @@ export default defineComponent({
|
|||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
// width: 44%;
|
// width: 44%;
|
||||||
}
|
}
|
||||||
|
> .brand{
|
||||||
|
> .text{
|
||||||
|
> img{
|
||||||
|
width: 10rem;
|
||||||
|
height: 6rem;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
> .title{
|
> .title{
|
||||||
font-size: 2.7rem;
|
font-size: 2.7rem;
|
||||||
> span{
|
> span{
|
||||||
@@ -342,6 +379,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .style{
|
> .style{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
437
src/component/home/tools/cloudUploading/createCloud.vue
Normal file
437
src/component/home/tools/cloudUploading/createCloud.vue
Normal file
@@ -0,0 +1,437 @@
|
|||||||
|
<template>
|
||||||
|
<div class="createCloud" ref="createCloud"></div>
|
||||||
|
<a-modal
|
||||||
|
class="createCloud_modal generalModel"
|
||||||
|
v-model:visible="operationsModal"
|
||||||
|
:footer="null"
|
||||||
|
:get-container="() => $refs.createCloud"
|
||||||
|
width="50%"
|
||||||
|
:height="'77rem'"
|
||||||
|
:maskClosable="false"
|
||||||
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
:mask="true"
|
||||||
|
wrapClassName="#app"
|
||||||
|
:keyboard="false"
|
||||||
|
>
|
||||||
|
<div class="generalModel_btn">
|
||||||
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||||
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
|
||||||
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal_title_text">
|
||||||
|
<div>Create Cloud Generation Tasks</div>
|
||||||
|
</div>
|
||||||
|
<div class="allUserPoeration_center admin_page">
|
||||||
|
<div class="admin_state_item">
|
||||||
|
<span>Task type <span>*</span></span>
|
||||||
|
<a-select
|
||||||
|
v-model:value="buildType"
|
||||||
|
allowClear
|
||||||
|
style="width: 200px"
|
||||||
|
placeholder="Please select"
|
||||||
|
:options="cloudList"
|
||||||
|
@change="changeBuildType"
|
||||||
|
></a-select>
|
||||||
|
</div>
|
||||||
|
<div class="admin_state_item" v-show="buildType">
|
||||||
|
<span>Quantity <span>*</span></span>
|
||||||
|
<input
|
||||||
|
v-model="numberOfImages"
|
||||||
|
placeholder="Please enter number"
|
||||||
|
type="text"
|
||||||
|
style="width: 200px"
|
||||||
|
@input="changeNumberOfImages"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- toProductimg -->
|
||||||
|
<div v-show="buildType == 'toProductImage'" class="admin_state_item ">
|
||||||
|
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||||
|
<div class="sliderAndImput" style="width: 200px">
|
||||||
|
<a-slider class="system_silder"
|
||||||
|
v-model:value="similarity"
|
||||||
|
:tooltipVisible="false"
|
||||||
|
:step="5"
|
||||||
|
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
<input type="number" readonly v-model="similarity">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="buildType == 'relight'" class="admin_state_item ">
|
||||||
|
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||||
|
<a-select style="width: 200px" v-model:value="relightDirection" :options="relightDirectionList"></a-select>
|
||||||
|
</div>
|
||||||
|
<div v-show="buildType == 'relight'" class="admin_state_item ">
|
||||||
|
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||||
|
<div class="sliderAndImput" style="width: 200px">
|
||||||
|
<a-slider class="system_silder"
|
||||||
|
v-model:value="brightenValue"
|
||||||
|
:tooltipVisible="false"
|
||||||
|
|
||||||
|
:max="3"
|
||||||
|
:min="1"
|
||||||
|
:step="0.1"
|
||||||
|
>
|
||||||
|
</a-slider>
|
||||||
|
<input type="number" readonly v-model="brightenValue">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="buildType == 'toProductImage' || buildType == 'relight'" class="admin_state_item">
|
||||||
|
<span>Keyword</span>
|
||||||
|
<input
|
||||||
|
v-model="generateText"
|
||||||
|
:placeholder="$t('Generate.inputContent1')"
|
||||||
|
type="text"
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
|
||||||
|
<div v-for="item in exhibitionImgList" class="item">
|
||||||
|
<img :src="item.designOutfitUrl||item.url" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="admin_state_item" style="width: 100%;">
|
||||||
|
<span style="margin: 0;">Generation time:19min</span>
|
||||||
|
</div> -->
|
||||||
|
<div v-show="buildType" class="admin_state_item" style="width: 100%;">
|
||||||
|
<span style="margin: 0;">Cost credit:{{credits * numberOfImages}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="allUserPoeration_btn admin_page">
|
||||||
|
<!-- <div class="admin_search_item" @click="cancelDsign">
|
||||||
|
Close
|
||||||
|
</div> -->
|
||||||
|
<div class="admin_search_item" @click="setOk">
|
||||||
|
OK
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { defineComponent, computed, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { Modal, message } from "ant-design-vue";
|
||||||
|
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||||
|
import { formatTime,isEmail } from "@/tool/util";
|
||||||
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import {getMinioUrl} from '@/tool/util'
|
||||||
|
const md5 = require("md5");
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
cloudList:{
|
||||||
|
type:Array,
|
||||||
|
default:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emits: ['getContentList'],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
let operations = reactive({
|
||||||
|
operationsModal:false,
|
||||||
|
loadingShow:false,
|
||||||
|
})
|
||||||
|
let operationsData = reactive({
|
||||||
|
buildType:'',
|
||||||
|
numberOfImages:'',
|
||||||
|
credits:0,
|
||||||
|
exhibitionImgList:[],//选择的图片
|
||||||
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
|
//toProduct
|
||||||
|
generateText:'',//输入的内容
|
||||||
|
similarity:30,
|
||||||
|
brightenValue:1,//亮度
|
||||||
|
relightDirection:'Right Light',//打光方向
|
||||||
|
relightDirectionList:[
|
||||||
|
{
|
||||||
|
value:'Right Light',
|
||||||
|
label:useI18n().t('ProductImg.RightLight')
|
||||||
|
},{
|
||||||
|
value:'Left Light',
|
||||||
|
label:useI18n().t('ProductImg.LeftLight')
|
||||||
|
},{
|
||||||
|
value:'Top Light',
|
||||||
|
label:useI18n().t('ProductImg.TopLight')
|
||||||
|
},{
|
||||||
|
value:'Bottom Light',
|
||||||
|
label:useI18n().t('ProductImg.BottomLight')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
let init = ()=>{
|
||||||
|
operations.operationsModal = true
|
||||||
|
|
||||||
|
}
|
||||||
|
const changeBuildType = ()=>{
|
||||||
|
if(operationsData.buildType == 'design'){
|
||||||
|
operationsData.exhibitionImgList = []
|
||||||
|
}else if(operationsData.buildType == 'toProductImage'){
|
||||||
|
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.design.likeData
|
||||||
|
}else if(operationsData.buildType == 'relight'){
|
||||||
|
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
|
||||||
|
}else if(operationsData.buildType == 'poseTransfer'){
|
||||||
|
operationsData.exhibitionImgList = store.state.UploadFilesModule.modularData.toProduct
|
||||||
|
}
|
||||||
|
props.cloudList.forEach((item)=>{
|
||||||
|
if(item.value == operationsData.buildType){
|
||||||
|
operationsData.credits = item.consumption
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let getPorductImg = ()=>{
|
||||||
|
let modularData = store.state.UploadFilesModule.modularData
|
||||||
|
let list = []
|
||||||
|
if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
|
||||||
|
let productOrRelight = []
|
||||||
|
if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
|
||||||
|
if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct
|
||||||
|
|
||||||
|
productOrRelight.forEach((item)=>{
|
||||||
|
if(!item.id)return
|
||||||
|
let obj = {
|
||||||
|
"createTime": "",
|
||||||
|
"elementId": 0,
|
||||||
|
"elementType": "",
|
||||||
|
"id": 0,
|
||||||
|
"isLike": 0,
|
||||||
|
"taskId": "",
|
||||||
|
"toProductImageRecordId": 0,
|
||||||
|
"url": "",
|
||||||
|
}
|
||||||
|
obj.elementId = item.designOutfitId
|
||||||
|
obj.elementType = 'DesignOutfit'
|
||||||
|
if(operationsData.buildType == 'relight'){
|
||||||
|
obj.elementId = item.id
|
||||||
|
obj.elementType = 'ToProductImage'
|
||||||
|
}
|
||||||
|
list.push(obj)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
const getImageStrength = () => {
|
||||||
|
let imageStrength = operationsData.similarity == 100? 95 :operationsData.similarity
|
||||||
|
return imageStrength;
|
||||||
|
};
|
||||||
|
const getPoseTransformData = ()=>{
|
||||||
|
let list = []
|
||||||
|
let toProduct = store.state.UploadFilesModule.modularData.toProduct
|
||||||
|
toProduct.forEach((item)=>{
|
||||||
|
let obj = {
|
||||||
|
poseId:1,
|
||||||
|
productImage:getMinioUrl(item.url)
|
||||||
|
}
|
||||||
|
list.push(obj)
|
||||||
|
})
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
let setAddData = ()=>{
|
||||||
|
return {
|
||||||
|
"buildType": operationsData.buildType,
|
||||||
|
nums: operationsData.numberOfImages,
|
||||||
|
projectId: operationsData.selectObject.id,
|
||||||
|
//productimg
|
||||||
|
toProductImage:{
|
||||||
|
prompt:operationsData.generateText,//输入的内容
|
||||||
|
toProductImageVOList:getPorductImg(),//选择的图片
|
||||||
|
projectId: operationsData.selectObject.id,
|
||||||
|
direction:operationsData.relightDirection,//打光方向
|
||||||
|
brightenValue:operationsData.brightenValue,
|
||||||
|
imageStrength:(100 - getImageStrength())/100,
|
||||||
|
},
|
||||||
|
//poseTransform
|
||||||
|
poseTransform:getPoseTransformData(),
|
||||||
|
private: operationsData.selectObject.id,
|
||||||
|
ToProductImageDTO: operationsData.selectObject.id,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let cancelDsign = ()=>{
|
||||||
|
operationsData.buildType=''
|
||||||
|
operationsData.numberOfImages=''
|
||||||
|
operations.operationsModal = false
|
||||||
|
}
|
||||||
|
let setOk = ()=>{
|
||||||
|
let data
|
||||||
|
data = setAddData()
|
||||||
|
if(operationsData.buildType == 'toProductImage'){
|
||||||
|
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
|
||||||
|
}else if(operationsData.buildType == 'relight'){
|
||||||
|
if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
|
||||||
|
}else if(operationsData.buildType == 'poseTransfer'){
|
||||||
|
if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
|
||||||
|
}
|
||||||
|
if(!data.buildType || !data.nums)return message.warning('Please check the input box marked with *')
|
||||||
|
operations.loadingShow = true
|
||||||
|
Https.axiosPost(Https.httpUrls.designCloud, data).then(
|
||||||
|
(rv) => {
|
||||||
|
if (rv) {
|
||||||
|
operations.loadingShow = false
|
||||||
|
cancelDsign()
|
||||||
|
emit('getContentList')
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
operations.loadingShow = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const changeNumberOfImages = ()=>{
|
||||||
|
if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
|
||||||
|
if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
|
||||||
|
operationsData.numberOfImages = operationsData.exhibitionImgList.length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...toRefs(operations),
|
||||||
|
...toRefs(operationsData),
|
||||||
|
cancelDsign,
|
||||||
|
init,
|
||||||
|
focus,
|
||||||
|
blur,
|
||||||
|
setOk,
|
||||||
|
changeBuildType,
|
||||||
|
changeNumberOfImages,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
directives:{
|
||||||
|
mousewheel:{
|
||||||
|
mounted (el) {
|
||||||
|
el.addEventListener('mouseenter', (e)=> {
|
||||||
|
if(el.scrollWidth > el.clientWidth){
|
||||||
|
el.parentElement.style.overflowY = 'hidden';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标移出事件
|
||||||
|
el.addEventListener('mouseleave', ()=> {
|
||||||
|
el.parentElement.style.overflowY = 'auto';
|
||||||
|
});
|
||||||
|
el.addEventListener('wheel',(e)=>{
|
||||||
|
let num = 0
|
||||||
|
if(e.deltaY > 0){
|
||||||
|
num = 25
|
||||||
|
}else{
|
||||||
|
num = -25
|
||||||
|
}
|
||||||
|
el.scrollBy(num, 0);
|
||||||
|
},{ passive: true })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
:deep(.ant-modal-mask){
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
:deep(.createCloud_modal){
|
||||||
|
|
||||||
|
.ant-modal-body{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.createCloud_modal {
|
||||||
|
.closeIcon {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.allUserPoeration_btn{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: auto;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 1rem 0;
|
||||||
|
.admin_search_item{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.allUserPoeration_center{
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
padding: 0 2rem;
|
||||||
|
> .selectImgList{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
height: 20rem;
|
||||||
|
margin: 2rem 0;
|
||||||
|
> .item{
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 1rem;
|
||||||
|
&:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
> img{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
}
|
||||||
|
> .admin_state_item{
|
||||||
|
width: auto;
|
||||||
|
// width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
> span{
|
||||||
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
:deep(> .ant-select > .ant-select-selector){
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
}
|
||||||
|
> input{
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
}
|
||||||
|
>.sliderAndImput{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
:deep(> .ant-slider){
|
||||||
|
// border-radius: 1.6rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
> input{
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
width: 4rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
293
src/component/modules/setBrandDNA.vue
Normal file
293
src/component/modules/setBrandDNA.vue
Normal file
@@ -0,0 +1,293 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
class="setBrandDNA_modal generalModel"
|
||||||
|
v-model:visible="setBrandDNA"
|
||||||
|
:footer="null"
|
||||||
|
width="50%"
|
||||||
|
:maskClosable="false"
|
||||||
|
:centered="true"
|
||||||
|
:closable="false"
|
||||||
|
:mask="true"
|
||||||
|
:keyboard="false"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
:zIndex="1000"
|
||||||
|
>
|
||||||
|
<div class="generalModel_btn">
|
||||||
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||||
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||||
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setBrandDNA_content">
|
||||||
|
<div class="modal_title_text">
|
||||||
|
<div>{{ $t('Habit.Style') }}</div>
|
||||||
|
<div class="modal_title_text_intro"></div>
|
||||||
|
</div>
|
||||||
|
<div class="setBrandDNA_content_bottom">
|
||||||
|
<div class="content_bottom_item" v-for="item in styleList">
|
||||||
|
<div class="content_bottom_item_border" :class="{active:item.id == selectStyle.id}" @click="setItemSelect(item)">
|
||||||
|
{{ item.brandName}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="!isNoData" class="material_content_list_loding">
|
||||||
|
<span class="page_loading" v-show="!isShowLoading"></span>
|
||||||
|
<span v-show="isShowLoading">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
|
||||||
|
</div>
|
||||||
|
<div class="setBrandDNA_ok">
|
||||||
|
<div class="started_btn" @click="setClear()">
|
||||||
|
{{ $t('Habit.Clear') }}
|
||||||
|
</div>
|
||||||
|
<div class="started_btn" @click="setOk()">
|
||||||
|
OK
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,watch,createVNode, h, ref ,toRefs,onMounted,reactive,triggerRef, nextTick} from "vue";
|
||||||
|
import { message,Modal } from "ant-design-vue";
|
||||||
|
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
|
||||||
|
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
// import domTurnImg from '@/tool/domTurnImg'
|
||||||
|
import { downloadIamge } from "@/tool/util";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
export default defineComponent({
|
||||||
|
emits:['setWorkspaceBrandDNA'],
|
||||||
|
props:{
|
||||||
|
},
|
||||||
|
setup(props,{emit}) {
|
||||||
|
let setBrandDNA: any = ref(false);//弹窗
|
||||||
|
let setBrandDNAMask:any = ref(false)//弹窗遮罩
|
||||||
|
let oldDataId = ''
|
||||||
|
let setBrandDNAData:any = reactive({
|
||||||
|
styleList:[],
|
||||||
|
selectStyle:{
|
||||||
|
name:'',
|
||||||
|
id:'',
|
||||||
|
},
|
||||||
|
isNoData:false,
|
||||||
|
isShowLoading:false,
|
||||||
|
isNull:false,
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
observer:null,
|
||||||
|
})
|
||||||
|
const {t} = useI18n()
|
||||||
|
let getStyleList = ()=>{
|
||||||
|
let data = {
|
||||||
|
page:setBrandDNAData.page,
|
||||||
|
size:setBrandDNAData.size,
|
||||||
|
}
|
||||||
|
setBrandDNAData.isShowLoading = true
|
||||||
|
Https.axiosPost( Https.httpUrls.brandDNAPage, data).then(
|
||||||
|
(rv) => {
|
||||||
|
if(data.page == 1 && rv.content.length == 0){
|
||||||
|
setBrandDNAData.isNull = true
|
||||||
|
}else{
|
||||||
|
setBrandDNAData.isNull = false
|
||||||
|
}
|
||||||
|
if (rv.content.length > 0) {
|
||||||
|
setBrandDNAData.isNull = false
|
||||||
|
setBrandDNAData.styleList.push(...rv.content)
|
||||||
|
} else {
|
||||||
|
setBrandDNAData.isNoData = true
|
||||||
|
}
|
||||||
|
setBrandDNAData.isShowLoading = false
|
||||||
|
}
|
||||||
|
).catch(res=>{
|
||||||
|
setBrandDNAData.isShowMark = false
|
||||||
|
if(data.page == 1){
|
||||||
|
setBrandDNAData.isNull = true
|
||||||
|
}
|
||||||
|
setBrandDNAData.isNoData = true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let setPorfolioDom = ()=>{
|
||||||
|
setBrandDNAData.observer = new IntersectionObserver(
|
||||||
|
(entries, observer) => {
|
||||||
|
// 如果不是相交,则直接返回
|
||||||
|
if (!entries[0].intersectionRatio) return;
|
||||||
|
getStyleList()
|
||||||
|
console.log(123)
|
||||||
|
setBrandDNAData.page += 1
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
let init = (data:any)=>{
|
||||||
|
setBrandDNA.value = true
|
||||||
|
oldDataId = data.userBrandDna
|
||||||
|
setBrandDNAData.selectStyle.id = data.userBrandDna
|
||||||
|
nextTick(()=>{
|
||||||
|
let imgParent:any = document.querySelector('.setBrandDNA_modal .material_content_list_loding .page_loading')
|
||||||
|
setBrandDNAData.observer.observe(imgParent)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let setCover = (item:any)=>{
|
||||||
|
setBrandDNAData.subPublishDate.coverId = item.designOutfitId
|
||||||
|
setBrandDNAData.selectDate.url = item.url
|
||||||
|
|
||||||
|
}
|
||||||
|
let cleardata = ()=>{
|
||||||
|
setBrandDNA.value = false
|
||||||
|
setBrandDNAData.observer.disconnect();
|
||||||
|
}
|
||||||
|
let cancelDsign = ()=>{
|
||||||
|
cleardata()
|
||||||
|
}
|
||||||
|
let setOk= ()=>{
|
||||||
|
let data = {
|
||||||
|
id:setBrandDNAData.selectStyle.id,
|
||||||
|
name:setBrandDNAData.selectStyle.name,
|
||||||
|
img:setBrandDNAData.selectStyle.img,
|
||||||
|
isRevampModel:false,
|
||||||
|
}
|
||||||
|
if(oldDataId == data.id){
|
||||||
|
cleardata()
|
||||||
|
}else{
|
||||||
|
emit('setWorkspaceBrandDNA',data)
|
||||||
|
cleardata()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let setClear = ()=>{
|
||||||
|
setBrandDNAData.selectStyle.id = ''
|
||||||
|
setBrandDNAData.selectStyle.name = ''
|
||||||
|
setBrandDNAData.selectStyle.img = ''
|
||||||
|
}
|
||||||
|
let setItemSelect = (item:any)=>{
|
||||||
|
setBrandDNAData.selectStyle.id = item.id
|
||||||
|
setBrandDNAData.selectStyle.name = item.brandName
|
||||||
|
setBrandDNAData.selectStyle.img = item.minioUrl
|
||||||
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
setBrandDNAData.isShowLoading = false
|
||||||
|
setBrandDNAData.isNoData = false
|
||||||
|
setPorfolioDom()
|
||||||
|
})
|
||||||
|
return {
|
||||||
|
setBrandDNA,
|
||||||
|
setBrandDNAMask,
|
||||||
|
...toRefs(setBrandDNAData),
|
||||||
|
init,
|
||||||
|
setCover,
|
||||||
|
cancelDsign,
|
||||||
|
setItemSelect,
|
||||||
|
setOk,
|
||||||
|
setClear,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// moodTemplateId: "", //模板id
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
directives:{
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.setBrandDNA_modal {
|
||||||
|
&.generalModel{
|
||||||
|
.ant-modal-body {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setBrandDNA_content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.setBrandDNA_content_bottom{
|
||||||
|
--border-color: #c4c4c4;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: flex-start;
|
||||||
|
> .material_content_list_loding{
|
||||||
|
text-align: center;
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
.page_loading{
|
||||||
|
display: block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
height: calc(10rem*1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_bottom_item{
|
||||||
|
width: calc((100% / 4) - (.8 * 1rem));
|
||||||
|
// width: calc(100% / 4);
|
||||||
|
// padding: 0 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
height: 10rem;
|
||||||
|
background: #f3f3f3;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
.content_bottom_item_border {
|
||||||
|
position: absolute;
|
||||||
|
inset: .2rem;
|
||||||
|
background: #f3f3f3;
|
||||||
|
border-radius: 2rem;
|
||||||
|
color: #595959;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_bottom_item:nth-child(4n){
|
||||||
|
margin-right: 0rem;
|
||||||
|
}
|
||||||
|
.content_bottom_item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% + .2rem);
|
||||||
|
height: calc(100% + .2rem);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border-radius: 2rem;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
|
||||||
|
}
|
||||||
|
.content_bottom_item .active{
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.setBrandDNA_ok{
|
||||||
|
width: 60%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
>div{
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -27,13 +27,10 @@ import { Https } from "@/tool/https";
|
|||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import MoodboardUpload from '@/component/HomePage/index/model/collection/MoodboardUpload.vue';
|
import toProduct from '@/component/home/tools/toProduct/index.vue';
|
||||||
import PrintboardUpload from '@/component/HomePage/index/model/collection/PrintboardUpload.vue';
|
import poseTransfer from '@/component/home/tools/poseTransfer/index.vue';
|
||||||
import ColorboardUpload from '@/component/HomePage/index/model/collection/ColorboardUpload.vue';
|
import deReconstruction from '@/component/home/tools/deReconstruction/index.vue';
|
||||||
import toProduct from '@/component/HomePage/index/model/toProduct/index.vue';
|
import patternMaking3D from '@/component/home/tools/patternMaking3D/index.vue';
|
||||||
import poseTransfer from '@/component/HomePage/index/model/poseTransfer/index.vue';
|
|
||||||
import deReconstruction from '@/component/HomePage/index/model/deReconstruction/index.vue';
|
|
||||||
import patternMaking3D from '@/component/HomePage/index/model/patternMaking3D/index.vue';
|
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
import canvasUpload from "@/component/Canvas/index.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
|||||||
@@ -257,6 +257,8 @@ export default {
|
|||||||
jsContent9:'选择一张图片~',
|
jsContent9:'选择一张图片~',
|
||||||
jsContent10:'是否另存为当前模特?',
|
jsContent10:'是否另存为当前模特?',
|
||||||
jsContent11:'你确定删除当前品牌DNA吗?',
|
jsContent11:'你确定删除当前品牌DNA吗?',
|
||||||
|
jsContent12:'请先取消选中后就再次点击删除',
|
||||||
|
jsContent13:'您必须选择至少一个模特,且最多不超过四个',
|
||||||
},
|
},
|
||||||
HistoryPage:{
|
HistoryPage:{
|
||||||
History:'历史',
|
History:'历史',
|
||||||
|
|||||||
@@ -257,6 +257,8 @@ export default {
|
|||||||
jsContent9:'Please select a picture',
|
jsContent9:'Please select a picture',
|
||||||
jsContent10:'Save as New or Overwrite Current Mannequin?',
|
jsContent10:'Save as New or Overwrite Current Mannequin?',
|
||||||
jsContent11:'Are you sure about deleting the current brand DNA?',
|
jsContent11:'Are you sure about deleting the current brand DNA?',
|
||||||
|
jsContent12:'Please deselect first, then try deleting again.',
|
||||||
|
jsContent13:'You must select at least one mannequin and no more than four.',
|
||||||
},
|
},
|
||||||
HistoryPage:{
|
HistoryPage:{
|
||||||
History:'History',
|
History:'History',
|
||||||
|
|||||||
@@ -93,6 +93,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name:'events',
|
name:'events',
|
||||||
meta:{enter:'all',},
|
meta:{enter:'all',},
|
||||||
component: _import_custom('HomeView/Events.vue'),
|
component: _import_custom('HomeView/Events.vue'),
|
||||||
|
},{
|
||||||
|
path:'cloud',
|
||||||
|
name:'cloud',
|
||||||
|
meta:{enter:'all',},
|
||||||
|
component: _import_custom('HomeView/cloudGeneration.vue'),
|
||||||
},{
|
},{
|
||||||
path:'eventsDetail',
|
path:'eventsDetail',
|
||||||
name:'eventsDetail',
|
name:'eventsDetail',
|
||||||
|
|||||||
@@ -114,6 +114,8 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
|||||||
state.selectDetail.newDetail[str] = data
|
state.selectDetail.newDetail[str] = data
|
||||||
}else if(str == 'element'){
|
}else if(str == 'element'){
|
||||||
state.selectDetail.newDetail[str] = data
|
state.selectDetail.newDetail[str] = data
|
||||||
|
}else if(str == 'models'){
|
||||||
|
state.selectDetail.newDetail[str] = data
|
||||||
}else{
|
}else{
|
||||||
if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
|
if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
|
||||||
const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
|
const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
|
||||||
|
|||||||
@@ -404,7 +404,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
getProjectData({ state,commit },str){
|
getProjectData({ state,commit },str){
|
||||||
return new Promise((resolve,reject) => {
|
return new Promise((resolve,reject) => {
|
||||||
let data:any = {}
|
let data:any = {}
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','mannequin']
|
||||||
if(allBoardData.indexOf(str) != -1){
|
if(allBoardData.indexOf(str) != -1){
|
||||||
if(str == 'colorBoard'){
|
if(str == 'colorBoard'){
|
||||||
let boardData = state.colorBoards || []
|
let boardData = state.colorBoards || []
|
||||||
@@ -456,6 +456,18 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
return data;
|
return data;
|
||||||
});
|
});
|
||||||
data[str] = sketchBoards
|
data[str] = sketchBoards
|
||||||
|
}else if(str == 'mannequin'){
|
||||||
|
let list:any = []
|
||||||
|
let workspaceState:any = workspace.state
|
||||||
|
workspaceState.probjects.model.forEach((item:any)=>{
|
||||||
|
let obj = {
|
||||||
|
id:item.id,
|
||||||
|
type:item.type,
|
||||||
|
collectionElementId:item.collectionElementId
|
||||||
|
}
|
||||||
|
list.push(obj)
|
||||||
|
})
|
||||||
|
data[str] = list
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
data[str] = state.modularData[str]
|
data[str] = state.modularData[str]
|
||||||
|
|||||||
@@ -260,7 +260,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
*/
|
*/
|
||||||
state.userDetail.affiliate = data.affiliate
|
state.userDetail.affiliate = data.affiliate
|
||||||
state.userDetail.systemUser = data.systemUser
|
state.userDetail.systemUser = data.systemUser
|
||||||
state.userDetail.systemUser = 3
|
// state.userDetail.systemUser = 3
|
||||||
// 身份列表1:可以使用aida系统,2:可以使用affiliate页面,3:系统管理员用户
|
// 身份列表1:可以使用aida系统,2:可以使用affiliate页面,3:系统管理员用户
|
||||||
state.userDetail.systemList = []
|
state.userDetail.systemList = []
|
||||||
if(data.systemUser != 0)state.userDetail.systemList.push(1)
|
if(data.systemUser != 0)state.userDetail.systemList.push(1)
|
||||||
@@ -380,6 +380,25 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const getmannequinStyle = ()=>{
|
||||||
|
return new Promise((resolve,reject) => {
|
||||||
|
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
||||||
|
(rv) => {
|
||||||
|
rv.forEach((item:any) => {
|
||||||
|
let name = item.value
|
||||||
|
item.value = item.name
|
||||||
|
item.name = name
|
||||||
|
});
|
||||||
|
rv.unshift({name:'All',value:'',id:''})
|
||||||
|
store.commit('setMannequinStyle',rv)
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
).catch(res=>{
|
||||||
|
reject('')
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
context.commit('setWorkspaceAllPosition',workspaceAllPosition)
|
context.commit('setWorkspaceAllPosition',workspaceAllPosition)
|
||||||
let getUserDetail = ()=>{
|
let getUserDetail = ()=>{
|
||||||
return new Promise((resolve,reject) => {
|
return new Promise((resolve,reject) => {
|
||||||
@@ -394,7 +413,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
return await Promise.all([...getList.map(item => axiosGet(item)),getUserDetail()])
|
return await Promise.all([...getList.map(item => axiosGet(item)),getUserDetail(),getmannequinStyle()])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,6 +28,10 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
ageGroup:'Adult',//年龄组
|
ageGroup:'Adult',//年龄组
|
||||||
positionList:[],//衣服位置
|
positionList:[],//衣服位置
|
||||||
position:{},//衣服位置
|
position:{},//衣服位置
|
||||||
|
brandPercentage:30,//品牌分成
|
||||||
|
userBrandDna:'',//用户品牌
|
||||||
|
userBrandDnaImg:'',//用户品牌图片
|
||||||
|
userBrandDnaName:'',//用户品牌名字
|
||||||
publishData:{
|
publishData:{
|
||||||
id:'',
|
id:'',
|
||||||
portfolioDes:'',
|
portfolioDes:'',
|
||||||
@@ -35,11 +39,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
tagsDTO:[],
|
tagsDTO:[],
|
||||||
},//发布的作品数据
|
},//发布的作品数据
|
||||||
systemDesignerPercentage:30,//设计师分成
|
systemDesignerPercentage:30,//设计师分成
|
||||||
model:{
|
model:[],//模特
|
||||||
id:null,
|
|
||||||
url:'',
|
|
||||||
type:'',
|
|
||||||
},//模特
|
|
||||||
},
|
},
|
||||||
projectList:[],//项目列表参数
|
projectList:[],//项目列表参数
|
||||||
},
|
},
|
||||||
@@ -83,6 +83,9 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
ageGroup:'Adult',//年龄组
|
ageGroup:'Adult',//年龄组
|
||||||
positionList:[],
|
positionList:[],
|
||||||
position:{},//衣服位置
|
position:{},//衣服位置
|
||||||
|
userBrandDna:'',//用户品牌
|
||||||
|
userBrandDnaImg:'',//用户品牌图片
|
||||||
|
userBrandDnaName:'',//用户品牌名字
|
||||||
publishData:{
|
publishData:{
|
||||||
id:'',
|
id:'',
|
||||||
portfolioDes:'',
|
portfolioDes:'',
|
||||||
@@ -90,11 +93,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
tagsDTO:[],
|
tagsDTO:[],
|
||||||
},//发布的作品数据
|
},//发布的作品数据
|
||||||
systemDesignerPercentage:30,
|
systemDesignerPercentage:30,
|
||||||
model:{
|
model:[],//模特
|
||||||
id:-1,
|
|
||||||
url:'',
|
|
||||||
type:'',
|
|
||||||
},//模特
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -213,7 +213,7 @@ export const Https = {
|
|||||||
queryUserGroup:`/api/history/queryUserGroup`, //History用户分页分组列表
|
queryUserGroup:`/api/history/queryUserGroup`, //History用户分页分组列表
|
||||||
deleteUserGroup:`/api/history/deleteUserGroup`, //History删除用户分组
|
deleteUserGroup:`/api/history/deleteUserGroup`, //History删除用户分组
|
||||||
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
||||||
saveOrUpdate:`/api/project/saveOrUpdate`, //History修改用户分组名
|
projectSaveOrUpdate:`/api/project/saveOrUpdate`, //History修改用户分组名
|
||||||
historyChoose:`/api/history/choose`, //History choose
|
historyChoose:`/api/history/choose`, //History choose
|
||||||
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
||||||
designSingleWithGradient:`/api/design/detail/designSingleWithGradient`,//查询需要更新mask列表
|
designSingleWithGradient:`/api/design/detail/designSingleWithGradient`,//查询需要更新mask列表
|
||||||
@@ -225,7 +225,7 @@ export const Https = {
|
|||||||
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // Library文件上传
|
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // Library文件上传
|
||||||
|
|
||||||
queryClassification:`/api/classification/queryClassification`,//标签类别查询
|
queryClassification:`/api/classification/queryClassification`,//标签类别查询
|
||||||
saveOrUpdate:`/api/classification/saveOrUpdate`,//标签类别新增修改
|
classificationSaveOrUpdate:`/api/classification/saveOrUpdate`,//标签类别新增修改
|
||||||
classificationDelete:`/api/classification/delete`,//标签类别新增修改
|
classificationDelete:`/api/classification/delete`,//标签类别新增修改
|
||||||
relationLibrary:`/api/classification/relationLibrary`,//标签类别新增修改
|
relationLibrary:`/api/classification/relationLibrary`,//标签类别新增修改
|
||||||
getRelClassificationIdList:`/api/classification/getRelClassificationIdList`,//标签类别新增修改
|
getRelClassificationIdList:`/api/classification/getRelClassificationIdList`,//标签类别新增修改
|
||||||
|
|||||||
@@ -21,8 +21,8 @@
|
|||||||
<i class="fi fi-br-angle-small-down"></i>
|
<i class="fi fi-br-angle-small-down"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detailBox">
|
<div class="detailBox" v-show="openType">
|
||||||
<div class="detail" v-if="item.value != 'history'" v-show="openType == item.value">
|
<div class="detail" v-if="item.value != 'history' && item.value != 'cloud'" v-show="openType == item.value">
|
||||||
<div class="detailItem" v-for="childItem in item.list" @click="setRouter(item,childItem)" :class="{active:openTypeChild == childItem.value}">
|
<div class="detailItem" v-for="childItem in item.list" @click="setRouter(item,childItem)" :class="{active:openTypeChild == childItem.value}">
|
||||||
<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
|
<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@@ -30,23 +30,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail" v-else>
|
<div class="detail" v-else-if="item.value == 'history'">
|
||||||
<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
|
<div class="detailItem history" v-for="childItem,index in item.list" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
|
||||||
<div class="text" style="width: 100%;">
|
<div class="text" style="width: 100%;">
|
||||||
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
|
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
|
||||||
<textarea v-model="historyTextarea" v-show="childItem.editName"></textarea>
|
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="type">{{ childItem.process }}</div>
|
<div class="type">{{ childItem.process.replace('_', ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
|
||||||
|
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event)"></i>
|
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event)"></i>
|
||||||
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
||||||
<div class="operation" v-show="selectHistoryIndex == index">
|
<div class="operation" v-show="historyData.selectHistoryIndex == index">
|
||||||
<!-- <div class="item" @click.stop="editName(childItem)">
|
<div class="item" @click.stop="editName(childItem)">
|
||||||
<i class="fi fi-rr-edit"></i>
|
<i class="fi fi-rr-edit"></i>
|
||||||
<span>Rename</span>
|
<span>Rename</span>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="item" @click.stop="setting(childItem)">
|
<div class="item" @click.stop="setting(childItem)">
|
||||||
<i class="fi fi-rr-edit"></i>
|
<i class="fi fi-rr-settings-sliders"></i>
|
||||||
<span>Setting</span>
|
<span>Setting</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" @click.stop="deleteItem(childItem)">
|
<div class="item" @click.stop="deleteItem(childItem)">
|
||||||
@@ -56,20 +57,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!isNoData" class="material_content_list_loding">
|
<div v-show="!historyData.isNoData" class="material_content_list_loding">
|
||||||
<span class="page_loading" v-show="!isShowLoading"></span>
|
<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
|
||||||
<span v-show="isShowLoading">
|
<span v-show="historyData.isShowLoading">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<img v-show="isNoData && isNull" src="@/assets/images/homePage/null_img.png">
|
<img v-show="historyData.isNoData && historyData.isNull" src="@/assets/images/homePage/null_img.png">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="navListBottom">
|
<div class="navListBottom">
|
||||||
<div class="tools marginT2 list language" :class="{active:isLanguage}">
|
<div class="tools marginT2 list" :class="{active:$route.name == 'cloud'}" @click="()=>$router.push('/home/cloud')">
|
||||||
|
<div class="titleBox" style="margin-bottom: 0;">
|
||||||
|
<div class="left">
|
||||||
|
<i class="fi fi-rr-cloud-upload-alt"></i>
|
||||||
|
<span>Batch Generation</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tools list language" :class="{active:isLanguage}">
|
||||||
<div class="titleBox" @click="()=>isLanguage = !isLanguage">
|
<div class="titleBox" @click="()=>isLanguage = !isLanguage">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<i class="fi fi-br-globe"></i>
|
<i class="fi fi-br-globe"></i>
|
||||||
@@ -81,17 +89,14 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="detailBox">
|
<div class="detailBox">
|
||||||
<div class="detail" v-show="isLanguage">
|
<div class="detail" v-show="isLanguage">
|
||||||
<div class="detailItem">
|
<div class="detailItem" v-for="item in language" :class="{active:locale == item.value}" @click="setLocale(item.value)">
|
||||||
<span>AI Image Generator</span>
|
<svg v-show="locale == item.value" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="dark-icon sidebar-lang-icon" width="20" height="20"><path stroke="#52525b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.167" d="M11.667 3.5 5.25 9.917 2.334 7"></path></svg>
|
||||||
</div>
|
<span>{{ item.name }}</span>
|
||||||
<div class="detailItem active">
|
|
||||||
<svg data-v-2396c87a="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="dark-icon sidebar-lang-icon" width="20" height="20"><path stroke="#52525b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.167" d="M11.667 3.5 5.25 9.917 2.334 7"></path></svg>
|
|
||||||
<span>AI Image Generator</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
<div class="homeMain_right_content">
|
<div class="homeMain_right_content">
|
||||||
<div
|
<div
|
||||||
class="button_second credits hideChecked"
|
class="button_second credits hideChecked"
|
||||||
@@ -158,7 +163,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="homeMain_select">
|
<div class="homeMain_select">
|
||||||
<div class="select_item_box" @click.stop="isLanguage = !isLanguage">
|
<!-- <div class="select_item_box" @click.stop="isLanguage = !isLanguage">
|
||||||
<div class="select_item">
|
<div class="select_item">
|
||||||
<span class="icon iconfont icon-yuyan"></span>
|
<span class="icon iconfont icon-yuyan"></span>
|
||||||
<span class="select_item_des">{{$t('Header.language')}}</span>
|
<span class="select_item_des">{{$t('Header.language')}}</span>
|
||||||
@@ -169,7 +174,7 @@
|
|||||||
<span class="select_item_des">{{ item.name }}</span>
|
<span class="select_item_des">{{ item.name }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="select_item" @click="orderForm()">
|
<div class="select_item" @click="orderForm()">
|
||||||
|
|
||||||
<i class="fi fi-rs-notebook"></i>
|
<i class="fi fi-rs-notebook"></i>
|
||||||
@@ -273,18 +278,20 @@ export default defineComponent({
|
|||||||
isLanguage:false,
|
isLanguage:false,
|
||||||
openTypeList:openTypeList(t),
|
openTypeList:openTypeList(t),
|
||||||
projectSetting:null,
|
projectSetting:null,
|
||||||
|
historyData:{
|
||||||
|
isNoData:false,
|
||||||
|
isShowLoading:false,
|
||||||
|
isNull:false,
|
||||||
|
searchCollectionName:'',
|
||||||
|
historyTextarea:'',
|
||||||
|
historyList:[],
|
||||||
|
selectHistoryIndex:-1,
|
||||||
|
page:1,
|
||||||
|
size:10,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
const historyData = reactive({
|
const historyData = reactive({
|
||||||
isNoData:false,
|
|
||||||
isShowLoading:false,
|
|
||||||
isNull:false,
|
|
||||||
searchCollectionName:'',
|
|
||||||
historyTextarea:'',
|
|
||||||
historyList:[],
|
|
||||||
selectHistoryIndex:-1,
|
|
||||||
page:1,
|
|
||||||
size:10,
|
|
||||||
})
|
})
|
||||||
watch(() => route.query,
|
watch(() => route.query,
|
||||||
(query, oldQuery) => {
|
(query, oldQuery) => {
|
||||||
@@ -437,15 +444,16 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
let setPorfolioDom = ()=>{
|
let setPorfolioDom = ()=>{
|
||||||
historyData.isShowLoading = false
|
homeMainData.historyData.isShowLoading = false
|
||||||
historyData.isNoData = false
|
homeMainData.historyData.isNoData = false
|
||||||
let imgParent = document.querySelector('.homeMain_max .detailBox .material_content_list_loding .page_loading')
|
let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
|
||||||
|
console.log(imgParent)
|
||||||
new IntersectionObserver(
|
new IntersectionObserver(
|
||||||
(entries, observer) => {
|
(entries, observer) => {
|
||||||
// 如果不是相交,则直接返回
|
// 如果不是相交,则直接返回
|
||||||
if (!entries[0].intersectionRatio) return;
|
if (!entries[0].intersectionRatio) return;
|
||||||
getHistory()
|
getHistory()
|
||||||
historyData.page += 1
|
homeMainData.historyData.page += 1
|
||||||
},
|
},
|
||||||
).observe(imgParent);
|
).observe(imgParent);
|
||||||
}
|
}
|
||||||
@@ -459,19 +467,19 @@ export default defineComponent({
|
|||||||
// router.push(`/home?history=${childItem.id}`)
|
// router.push(`/home?history=${childItem.id}`)
|
||||||
}
|
}
|
||||||
const settingGetHistory = ()=>{
|
const settingGetHistory = ()=>{
|
||||||
historyData.page = 1
|
homeMainData.historyData.page = 1
|
||||||
homeMainData.openTypeList.history.list = []
|
homeMainData.openTypeList.history.list = []
|
||||||
historyData.isShowLoading = false
|
homeMainData.historyData.isShowLoading = false
|
||||||
historyData.isNoData = false
|
homeMainData.historyData.isNoData = false
|
||||||
}
|
}
|
||||||
const getHistory = ()=>{
|
const getHistory = ()=>{
|
||||||
if(historyData.isShowLoading && !historyData.isNoData)return
|
if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
|
||||||
historyData.isShowLoading = true
|
homeMainData.historyData.isShowLoading = true
|
||||||
let data = {
|
let data = {
|
||||||
classificationIdList:[],
|
classificationIdList:[],
|
||||||
page:historyData.page,
|
page:homeMainData.historyData.page,
|
||||||
size:historyData.size,
|
size:homeMainData.historyData.size,
|
||||||
collectionName:historyData.searchCollectionName,
|
collectionName:homeMainData.historyData.searchCollectionName,
|
||||||
// startDate:startDate,
|
// startDate:startDate,
|
||||||
// endDate:endDate,
|
// endDate:endDate,
|
||||||
// intersection:1,
|
// intersection:1,
|
||||||
@@ -480,33 +488,33 @@ export default defineComponent({
|
|||||||
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if(data.page == 1 && rv.content.length == 0){
|
if(data.page == 1 && rv.content.length == 0){
|
||||||
historyData.isNull = true
|
homeMainData.historyData.isNull = true
|
||||||
}else{
|
}else{
|
||||||
historyData.isNull = false
|
homeMainData.historyData.isNull = false
|
||||||
}
|
}
|
||||||
if (rv.content.length > 0) {
|
if (rv.content.length > 0) {
|
||||||
historyData.isNull = false
|
homeMainData.historyData.isNull = false
|
||||||
homeMainData.openTypeList.history.list.push(...rv.content)
|
homeMainData.openTypeList.history.list.push(...rv.content)
|
||||||
} else {
|
} else {
|
||||||
historyData.isNoData = true
|
homeMainData.historyData.isNoData = true
|
||||||
}
|
}
|
||||||
historyData.isShowLoading = false
|
homeMainData.historyData.isShowLoading = false
|
||||||
}
|
}
|
||||||
).catch(res=>{
|
).catch(res=>{
|
||||||
historyData.isShowMark = false
|
homeMainData.historyData.isShowMark = false
|
||||||
if(data.page == 1){
|
if(data.page == 1){
|
||||||
historyData.isNull = true
|
homeMainData.historyData.isNull = true
|
||||||
}
|
}
|
||||||
historyData.isNoData = true
|
homeMainData.historyData.isNoData = true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const editHistory = (item,index,el)=>{
|
const editHistory = (item,index,el)=>{
|
||||||
if(historyData.selectHistoryIndex == -1){
|
if(homeMainData.historyData.selectHistoryIndex == -1){
|
||||||
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
||||||
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
||||||
let parentHeight = el.target.parentNode.parentNode.parentNode.offsetHeight
|
let parentHeight = el.target.parentNode.parentNode.parentNode.offsetHeight
|
||||||
let operation = el.target.parentNode.querySelector('.operation')
|
let operation = el.target.parentNode.querySelector('.operation')
|
||||||
historyData.selectHistoryIndex = index
|
homeMainData.historyData.selectHistoryIndex = index
|
||||||
//判断弹窗是加载按钮上面还是下面
|
//判断弹窗是加载按钮上面还是下面
|
||||||
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
||||||
operation.classList.add('active')
|
operation.classList.add('active')
|
||||||
@@ -514,26 +522,26 @@ export default defineComponent({
|
|||||||
operation.classList.remove('active')
|
operation.classList.remove('active')
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
historyData.selectHistoryIndex = -1
|
homeMainData.historyData.selectHistoryIndex = -1
|
||||||
}
|
}
|
||||||
let operationCli = ()=>{
|
let operationCli = ()=>{
|
||||||
historyData.selectHistoryIndex = -1
|
homeMainData.historyData.selectHistoryIndex = -1
|
||||||
document.removeEventListener("click", operationCli);
|
document.removeEventListener("click", operationCli);
|
||||||
}
|
}
|
||||||
document.addEventListener("click",operationCli,);
|
document.addEventListener("click",operationCli,);
|
||||||
}
|
}
|
||||||
const editName = (item)=>{
|
const editName = (item)=>{
|
||||||
historyData.selectHistoryIndex = -1
|
homeMainData.historyData.selectHistoryIndex = -1
|
||||||
homeMainData.openTypeList.history.list.forEach((item)=>{
|
homeMainData.openTypeList.history.list.forEach((item)=>{
|
||||||
item.editName = false
|
item.editName = false
|
||||||
})
|
})
|
||||||
item.editName = true
|
item.editName = true
|
||||||
historyData.historyTextarea = item.name
|
homeMainData.historyData.historyTextarea = item.name
|
||||||
}
|
}
|
||||||
const deleteItem = (item)=>{
|
const deleteItem = (item)=>{
|
||||||
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:{projectId:item.id}}).then(
|
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:{projectId:item.id}}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
historyData.selectHistoryIndex = -1
|
homeMainData.historyData.selectHistoryIndex = -1
|
||||||
settingGetHistory()
|
settingGetHistory()
|
||||||
if(homeMainData.openTypeChild == item.id){
|
if(homeMainData.openTypeChild == item.id){
|
||||||
router.push('/home')
|
router.push('/home')
|
||||||
@@ -546,17 +554,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const accomplishHistory = (item)=>{
|
const accomplishHistory = (item)=>{
|
||||||
let data = {
|
let data = {
|
||||||
libraryIds:[],
|
name:homeMainData.historyData.historyTextarea,//library名字
|
||||||
libraryName:historyData.historyTextarea,//library名字
|
id :item.id,//history id
|
||||||
userGroupName:historyData.historyTextarea,//history名字
|
|
||||||
userGroupId :item.id,//history id
|
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
item.name = historyData.historyTextarea
|
item.name = homeMainData.historyData.historyTextarea
|
||||||
item.editName = false
|
item.editName = false
|
||||||
historyData.historyTextarea = ''
|
homeMainData.historyData.historyTextarea = ''
|
||||||
}
|
}
|
||||||
).catch((res)=>{
|
).catch((res)=>{
|
||||||
});
|
});
|
||||||
@@ -750,25 +755,10 @@ export default defineComponent({
|
|||||||
let data = {
|
let data = {
|
||||||
userId: this.userDetail.userId,
|
userId: this.userDetail.userId,
|
||||||
};
|
};
|
||||||
if(this.userDetail.systemUser == 3){
|
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||||
await Https.axiosGet(Https.httpUrls.trialUserLogout,).then((rv) => {
|
// WriteCookie("token");
|
||||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
});
|
||||||
if(this.userDetail.systemUser == 7){
|
this.$router.replace("/");
|
||||||
this.$router.replace("/schoolLogin");
|
|
||||||
}else if(this.userDetail.systemUser == 5){
|
|
||||||
this.$router.replace("/enterpriseLogin");
|
|
||||||
}else{
|
|
||||||
this.$router.replace("/");
|
|
||||||
}
|
|
||||||
// WriteCookie("token");
|
|
||||||
});
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
|
||||||
// WriteCookie("token");
|
|
||||||
});
|
|
||||||
this.$router.replace("/");
|
|
||||||
}
|
|
||||||
this.store.commit('createDetail')
|
this.store.commit('createDetail')
|
||||||
this.store.commit('createProbject')
|
this.store.commit('createProbject')
|
||||||
|
|
||||||
@@ -954,6 +944,10 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
> .time{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
> i{
|
> i{
|
||||||
margin-right: .8rem;
|
margin-right: .8rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -986,7 +980,6 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
margin-bottom: .8rem;
|
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@@ -1107,6 +1100,7 @@ export default defineComponent({
|
|||||||
> .titleBox{
|
> .titleBox{
|
||||||
padding: .8rem;
|
padding: .8rem;
|
||||||
background: #00000000;
|
background: #00000000;
|
||||||
|
height: 5rem;
|
||||||
> .left{
|
> .left{
|
||||||
> i{
|
> i{
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="homeView">
|
<div class="homeView">
|
||||||
<homeIndex @setTask="()=>$emit('setTask')"></homeIndex>
|
<!-- <homeIndex @setTask="()=>$emit('setTask')"></homeIndex> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -15,7 +15,7 @@ import generalCanvas from "@/component/modules/generalCanvas.vue";
|
|||||||
import affiche from "@/component/HomePage/affiche.vue";
|
import affiche from "@/component/HomePage/affiche.vue";
|
||||||
import DesignDetail from "@/component/Detail/DesignDetail.vue";
|
import DesignDetail from "@/component/Detail/DesignDetail.vue";
|
||||||
import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
|
import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
|
||||||
import homeIndex from "@/component/HomePage/index/index.vue";
|
// import homeIndex from "@/component/HomePage/index/index.vue";
|
||||||
import html2canvas from "html2canvas";
|
import html2canvas from "html2canvas";
|
||||||
import { message,Modal } from "ant-design-vue";
|
import { message,Modal } from "ant-design-vue";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
@@ -33,7 +33,7 @@ const FileSaver = require("file-saver");
|
|||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "homePage",
|
name: "homePage",
|
||||||
components: {
|
components: {
|
||||||
homeIndex,
|
// homeIndex,
|
||||||
NewCollectionReview,
|
NewCollectionReview,
|
||||||
DesignDetail,
|
DesignDetail,
|
||||||
ExportNewCoolection,
|
ExportNewCoolection,
|
||||||
|
|||||||
43
src/views/HomeView/cloudGeneration.vue
Normal file
43
src/views/HomeView/cloudGeneration.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cloud">
|
||||||
|
<batchGeneration></batchGeneration>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { Https } from "@/tool/https";
|
||||||
|
import { useStore } from "vuex";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import batchGeneration from '@/component/home/batchGeneration/index.vue'
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
batchGeneration,
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
},
|
||||||
|
emits:[],
|
||||||
|
setup(props,{emit}) {
|
||||||
|
const store = useStore();
|
||||||
|
const data = reactive({
|
||||||
|
})
|
||||||
|
const dataDom = reactive({
|
||||||
|
})
|
||||||
|
return{
|
||||||
|
...toRefs(dataDom),
|
||||||
|
...toRefs(data),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.cloud{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,562 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="history_page">
|
|
||||||
<div class="page_content">
|
|
||||||
<div class="page_content_body">
|
|
||||||
<!-- <HeaderComponent></HeaderComponent> -->
|
|
||||||
<div class="history_page_body">
|
|
||||||
<div class="history_table_search">
|
|
||||||
|
|
||||||
<!-- <div class="content_search_block">
|
|
||||||
<input class="search_input" :placeholder="$t('HistoryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
|
||||||
<div class="search_icon_block" @click="searchHistoryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
|
||||||
</div> -->
|
|
||||||
<div class="content_search_block generalModel_state">
|
|
||||||
<div class="generalModel_state_item">
|
|
||||||
<a-range-picker class="range_picker" v-model:value="rangePickerValue" :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]" valueFormat="YYYY-MM-DD">
|
|
||||||
<template #suffixIcon>
|
|
||||||
<span class="icon iconfont range_picker_icon icon-rili"></span>
|
|
||||||
</template>
|
|
||||||
</a-range-picker>
|
|
||||||
</div>
|
|
||||||
<div class="generalModel_state_item">
|
|
||||||
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchCollectionName" @keydown.enter="searchHistoryList()">
|
|
||||||
</div>
|
|
||||||
<div class="generalModel_state_item">
|
|
||||||
<el-cascader
|
|
||||||
:options="options"
|
|
||||||
filterable
|
|
||||||
v-model="value.labelValue"
|
|
||||||
:collapse-tags="true"
|
|
||||||
:show-all-levels="false"
|
|
||||||
:clearable="true"
|
|
||||||
:placeholder="$t('LibraryPage.Select')"
|
|
||||||
:max-collapse-tags=3
|
|
||||||
:props="props"
|
|
||||||
:collapse-tags-tooltip="true"
|
|
||||||
ref="cascader"
|
|
||||||
popper-class="libraryPageCascader"
|
|
||||||
@visible-change="dropdownVisibleChange"
|
|
||||||
>
|
|
||||||
<template #empty>
|
|
||||||
<div>
|
|
||||||
{{$t('LibraryPage.Select')}}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-cascader>
|
|
||||||
</div>
|
|
||||||
<div class="intersection">
|
|
||||||
<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
|
|
||||||
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
|
|
||||||
<div class="gallery_btn" style="padding: 2rem; line-height: 1;" @click="searchHistoryList('')"><span class="icon iconfont icon-sousuo"></span></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="history_table_content" ref="historyTable">
|
|
||||||
<a-table :columns="columns" :data-source="collectionList" :scroll="{ y: historyTableHeight }" @change="changePage"
|
|
||||||
:pagination="{
|
|
||||||
showSizeChanger:true,
|
|
||||||
current: currentPage,
|
|
||||||
pageSize:pageSize,
|
|
||||||
total: total,
|
|
||||||
showQuickJumper:true,
|
|
||||||
bordered:false
|
|
||||||
}">
|
|
||||||
<template #bodyCell="{ column, text, record ,index}">
|
|
||||||
<div class="operate_list" v-if="column?.Operations">
|
|
||||||
<div class="operate_item" @click="turnToDetail(record)">{{ $t('HistoryPage.Detail') }}</div>
|
|
||||||
<div class="operate_item" @click="renameCollection(record,index)">{{ $t('LibraryPage.Rename') }}</div>
|
|
||||||
<div class="operate_item" @click="retrieveHome(record)">{{ $t('HistoryPage.Retrieve') }}</div>
|
|
||||||
<div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<HistoryDetail ref="historyDetail" :groupDetails="groupDetails" :collectionName="collectionName"></HistoryDetail>
|
|
||||||
<setLabel ref="setLabel"></setLabel>
|
|
||||||
<!-- <RobotAssist></RobotAssist> -->
|
|
||||||
<searchLabel ref="searchLabel"></searchLabel>
|
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
|
||||||
<a-spin size="large" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent,ref,createVNode,computed,nextTick,provide} from 'vue'
|
|
||||||
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
|
||||||
import { Https } from "@/tool/https";
|
|
||||||
import { formatTime } from "@/tool/util"
|
|
||||||
import { Modal,message } from 'ant-design-vue';
|
|
||||||
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { ElCascader } from 'element-plus'
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import setLabel from '@/component/LibraryPage/setLabel.vue';
|
|
||||||
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
|
|
||||||
import { useStore } from "vuex";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
// HeaderComponent,
|
|
||||||
HistoryDetail,
|
|
||||||
// RobotAssist,
|
|
||||||
setLabel,
|
|
||||||
ElCascader,
|
|
||||||
searchLabel,
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
const store = useStore();
|
|
||||||
let rangePickerValue:any = ref([])
|
|
||||||
let renameData:any = ref({}) //修改名字选中的数据
|
|
||||||
let isShowMark:any = ref(false)
|
|
||||||
const columns:any = computed(()=>{
|
|
||||||
return [
|
|
||||||
{ title: useI18n().t('HistoryPage.CollectionsName'), align:'center', ellipsis: true, width: 150, dataIndex: 'name', key: 'collectionName' },
|
|
||||||
{ title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 150, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
|
||||||
let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
|
||||||
return time
|
|
||||||
}},
|
|
||||||
// {
|
|
||||||
// title: useI18n().t('HistoryPage.source'),
|
|
||||||
// align:'center', ellipsis: true, width: 150,
|
|
||||||
// dataIndex: 'original', key: 'original',
|
|
||||||
// customRender:(record:any)=>{
|
|
||||||
// let str = ''
|
|
||||||
// if(record.text == 1){
|
|
||||||
// str = useI18n().t('newScaleImage.Original')
|
|
||||||
// }else{
|
|
||||||
// str = `@${record.record.originalAccountName}/${record.record.originalPortfolioName}`
|
|
||||||
// }
|
|
||||||
// // let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
|
||||||
// return str
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{ title: useI18n().t('HistoryPage.SketchCounts'), align:'center', ellipsis: true, width: 120, dataIndex: 'process', key: 'process' },
|
|
||||||
{
|
|
||||||
title: useI18n().t('HistoryPage.Operations'),
|
|
||||||
key: 'operation',
|
|
||||||
align:'center',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 100,
|
|
||||||
// slots:{customRender:'action'}
|
|
||||||
Operations:true,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
});
|
|
||||||
let collectionList:any = ref([])
|
|
||||||
let {t} = useI18n()
|
|
||||||
const options:any = ref([
|
|
||||||
]);
|
|
||||||
let value = ref({
|
|
||||||
labelValue:[],
|
|
||||||
editLabelValue:[],
|
|
||||||
})
|
|
||||||
let props = {
|
|
||||||
multiple: true,
|
|
||||||
checkStrictly: true,
|
|
||||||
emitPath:true,
|
|
||||||
children:'childList',
|
|
||||||
value:'id',
|
|
||||||
label:'classificationName',
|
|
||||||
}
|
|
||||||
let intersection = ref(1)
|
|
||||||
let selectCode = ref('History')
|
|
||||||
let type:any = {
|
|
||||||
selectCode:selectCode,
|
|
||||||
designType:''
|
|
||||||
}
|
|
||||||
provide('type',type)
|
|
||||||
return {
|
|
||||||
store,
|
|
||||||
rangePickerValue,
|
|
||||||
columns,
|
|
||||||
collectionList,
|
|
||||||
renameData,
|
|
||||||
t,
|
|
||||||
options,
|
|
||||||
value,
|
|
||||||
props,
|
|
||||||
intersection,
|
|
||||||
selectCode,
|
|
||||||
isShowMark,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
currentPage:1,
|
|
||||||
pageSize:10,
|
|
||||||
total:0,
|
|
||||||
historyTableHeight:0,
|
|
||||||
newCollectionName:'',
|
|
||||||
groupDetails:{},//每个collection的详情
|
|
||||||
collectionName:'',//选中的名字
|
|
||||||
searchCollectionName:'',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
let historyTable:any = this.$refs.historyTable
|
|
||||||
this.historyTableHeight = historyTable.clientHeight - 130
|
|
||||||
this.getHistoryList()
|
|
||||||
this.getClass()
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
getClass(){
|
|
||||||
let data = {
|
|
||||||
"classificationIdList": [],
|
|
||||||
"classificationName": "",
|
|
||||||
"createTime": "",
|
|
||||||
"deleteConfirm": '',
|
|
||||||
"id": '',
|
|
||||||
"libraryId": '',
|
|
||||||
"parentId": '',
|
|
||||||
"type": this.selectCode,
|
|
||||||
"updateTime": "",
|
|
||||||
"userId": ''
|
|
||||||
}
|
|
||||||
|
|
||||||
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
|
||||||
(rv: any) => {
|
|
||||||
this.options = rv
|
|
||||||
rv.forEach((rvItem:any,rvIndex:number) => {
|
|
||||||
this.options[rvIndex].value = rvItem.id
|
|
||||||
this.options[rvIndex].label = rvItem.classificationName
|
|
||||||
rvItem.childList.forEach((childItem:any,index:number) => {
|
|
||||||
this.options[rvIndex].childList[index].value = childItem.id
|
|
||||||
this.options[rvIndex].childList[index].label = childItem.classificationName
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
).catch((res)=>{
|
|
||||||
});
|
|
||||||
},
|
|
||||||
turnToDetail(record:any){
|
|
||||||
this.groupDetails = record.groupDetails
|
|
||||||
let historyDetail:any = this.$refs.historyDetail
|
|
||||||
this.collectionName = record.name
|
|
||||||
historyDetail.changeDetailShow()
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
//改变页码
|
|
||||||
changePage(e:any){
|
|
||||||
this.currentPage = e.current
|
|
||||||
this.pageSize = e.pageSize
|
|
||||||
this.getHistoryList()
|
|
||||||
},
|
|
||||||
|
|
||||||
//查询列表
|
|
||||||
searchHistoryList(){
|
|
||||||
this.currentPage = 1
|
|
||||||
this.getHistoryList()
|
|
||||||
},
|
|
||||||
|
|
||||||
getHistoryList(){
|
|
||||||
this.isShowMark = true
|
|
||||||
let startDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[0]).getTime(): ''
|
|
||||||
let endDate:any = this.rangePickerValue ? new Date(this.rangePickerValue[1]).getTime(): ''
|
|
||||||
|
|
||||||
let labelArr:any = []
|
|
||||||
this.value.labelValue.forEach((item:any)=>{
|
|
||||||
labelArr.push(item[item.length-1])
|
|
||||||
})
|
|
||||||
let data = {
|
|
||||||
classificationIdList:labelArr,
|
|
||||||
page:this.currentPage,
|
|
||||||
size:this.pageSize,
|
|
||||||
collectionName:this.searchCollectionName,
|
|
||||||
startDate:startDate,
|
|
||||||
endDate:endDate,
|
|
||||||
intersection:this.intersection,
|
|
||||||
}
|
|
||||||
|
|
||||||
Https.axiosPost( Https.httpUrls.historyProject, data).then(
|
|
||||||
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
|
||||||
(rv: any) => {
|
|
||||||
if(this.currentPage > 1 && rv.content.length == 0){
|
|
||||||
this.currentPage = 1
|
|
||||||
this.getHistoryList()
|
|
||||||
}else{
|
|
||||||
this.collectionList = rv.content
|
|
||||||
this.total = rv.total
|
|
||||||
}
|
|
||||||
this.isShowMark = false
|
|
||||||
}
|
|
||||||
).catch(res=>{
|
|
||||||
this.isShowMark = false
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
//删除分组
|
|
||||||
deleteGroup(record:any,index:number){
|
|
||||||
console.log(record)
|
|
||||||
let deleteGroupFun = (id:any,index:number) =>{
|
|
||||||
let data = {
|
|
||||||
projectId:id
|
|
||||||
}
|
|
||||||
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:data}).then(
|
|
||||||
(rv: any) => {
|
|
||||||
message.success(this.t('HistoryPage.jsContent1'))
|
|
||||||
this.collectionList.splice(index,1)
|
|
||||||
// let userGroupId: any = computed(() => {
|
|
||||||
// return
|
|
||||||
// });
|
|
||||||
if(record.id == this.store.state.HomeStoreModule.userGroupId){
|
|
||||||
// this.store.commit('deleteUserGroupId')
|
|
||||||
this.store.commit("setLikeDesignCollectionList", []);
|
|
||||||
this.store.commit('createProbject')
|
|
||||||
|
|
||||||
this.store.commit("clearAllData");
|
|
||||||
this.store.commit("clearAllCollection");
|
|
||||||
this.store.commit("setAllBoardDataChoose",{});
|
|
||||||
this.store.commit("clearShowSketchboard",{});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Modal.confirm({
|
|
||||||
title: this.t('HistoryPage.jsContent2'),
|
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
|
||||||
okText: 'Yes',
|
|
||||||
cancelText: 'No',
|
|
||||||
centered:true,
|
|
||||||
mask:false,
|
|
||||||
onOk() {
|
|
||||||
deleteGroupFun(record.id,index)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
//修改名字
|
|
||||||
renameCollection(record:any,index:number){
|
|
||||||
let searchLabel:any = this.$refs.searchLabel
|
|
||||||
searchLabel.init(record,index)
|
|
||||||
},
|
|
||||||
|
|
||||||
retrieveHome(record:any){
|
|
||||||
let num = true
|
|
||||||
if(record.original == 0){
|
|
||||||
num = false
|
|
||||||
}
|
|
||||||
this.store.commit('createProbject')
|
|
||||||
this.$router.push({name:'homePage',params: {id:record.id,type:'History'}})
|
|
||||||
this.store.commit('setChooseIsDesign',num)
|
|
||||||
|
|
||||||
},
|
|
||||||
removeLabel(){
|
|
||||||
let setLabel:any = this.$refs.setLabel
|
|
||||||
let cascader:any = this.$refs.cascader
|
|
||||||
cascader.togglePopperVisible()
|
|
||||||
let event = new Event('click', {"bubbles":true, "cancelable":true});
|
|
||||||
document.dispatchEvent(event);
|
|
||||||
setLabel.init('add',this.options)
|
|
||||||
},
|
|
||||||
dropdownVisibleChange(){
|
|
||||||
let element:any = this.$refs.cascader
|
|
||||||
nextTick().then(()=>{
|
|
||||||
let cascader = document.getElementsByClassName('libraryPageCascader')[0]
|
|
||||||
let cascaderChild = cascader
|
|
||||||
let element:any = this.$refs.cascader
|
|
||||||
if(cascader.children.length > 3 ){
|
|
||||||
}else{
|
|
||||||
let button1:any = document.createElement("span")
|
|
||||||
button1.classList.add('started_btn','cascader_btn1')
|
|
||||||
let button2:any = document.createElement("span")
|
|
||||||
button2.classList.add('started_btn','cascader_btn2')
|
|
||||||
let divMax:any = document.createElement("div")
|
|
||||||
divMax.classList.add('cascader_btn_max')
|
|
||||||
button1.textContent = 'Edit'
|
|
||||||
// button2.textContent = '删除'
|
|
||||||
button1.addEventListener('click',this.removeLabel,false)
|
|
||||||
divMax.appendChild(button1)
|
|
||||||
// divMax.appendChild(button2)
|
|
||||||
cascaderChild?.insertAdjacentElement("afterbegin", divMax);
|
|
||||||
|
|
||||||
// cascader.addEventListener('click',this.cascaderClick)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
|
|
||||||
if(el){
|
|
||||||
el.innerHTML = this.t('LibraryPage.NoLabel')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
.history_page {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 6rem;
|
|
||||||
overflow: hidden;
|
|
||||||
// min-width: 1440px;
|
|
||||||
position: relative;
|
|
||||||
.page_content {
|
|
||||||
position: relative;
|
|
||||||
.el-cascader .el-input .icon-arrow-down{
|
|
||||||
font-size: 2.4rem;
|
|
||||||
}
|
|
||||||
.page_content_body {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.history_page_body{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 3rem 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.history_header{
|
|
||||||
font-size: 1.8rem;
|
|
||||||
height: 6.3rem;
|
|
||||||
line-height: 6.3rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_table_search{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
|
|
||||||
.ant-picker:hover, .ant-picker-focused{
|
|
||||||
border-color: #d5d8df;
|
|
||||||
}
|
|
||||||
.content_search_block{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 140rem;
|
|
||||||
|
|
||||||
.search_icon_block{
|
|
||||||
width: 5.2rem;
|
|
||||||
height: 2.8rem;
|
|
||||||
line-height: 2.8rem;
|
|
||||||
text-align: center;
|
|
||||||
background: #343579;
|
|
||||||
background-color: #39215b;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 2rem;
|
|
||||||
margin-left: 3rem;
|
|
||||||
.icon-sousuo{
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.intersection{
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 3rem;
|
|
||||||
>div{
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.history_table_content{
|
|
||||||
margin-top: 2.6rem;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 13.7rem);
|
|
||||||
background: rgba(255, 255, 255, 0.6);
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
|
|
||||||
.ant-table{
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-body{
|
|
||||||
overflow-y: auto !important;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
overflow: -moz-scrollbars-none;
|
|
||||||
|
|
||||||
&::-webkit-scrollbar { width: 0 !important }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th{
|
|
||||||
background: #FFFFFF;
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr:hover{
|
|
||||||
background: #ededed;
|
|
||||||
}
|
|
||||||
.ant-table-tbody > tr > td{
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.ant-table-pagination-right{
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-pagination-right{
|
|
||||||
padding-right: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.operate_list{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 1rem;
|
|
||||||
|
|
||||||
.operate_item{
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: Roboto;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #007EE5;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.rename_modal_component{
|
|
||||||
|
|
||||||
.collection_rename_content{
|
|
||||||
padding:2rem 9.2rem 3rem;
|
|
||||||
|
|
||||||
|
|
||||||
.rename_form_content{
|
|
||||||
|
|
||||||
.rename_form_input{
|
|
||||||
width: 100%;
|
|
||||||
height: 4.6rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
border: 0.1rem solid #B4BED7;
|
|
||||||
padding-left: 2.1rem;
|
|
||||||
line-height: 4.6rem;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color:#A5B0C2,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rename_submit_button{
|
|
||||||
height: 4.8rem;
|
|
||||||
line-height: 4.8rem;
|
|
||||||
background: #343579;
|
|
||||||
font-size: 2.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 16rem;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 4.5rem auto 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -481,7 +481,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>{{ ageGroup }}
|
</div>
|
||||||
<mannequinEdit ref="ModelPlacement" :ageGroup="ageGroup" :isPop="true" @submit="getLibraryList"></mannequinEdit>
|
<mannequinEdit ref="ModelPlacement" :ageGroup="ageGroup" :isPop="true" @submit="getLibraryList"></mannequinEdit>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -524,7 +524,7 @@ import { remove } from "jszip";
|
|||||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||||
import mannequinEdit from "@/component/HomePage/index/model/mannequin/edit.vue";
|
import mannequinEdit from "@/component/home/design/mannequin/edit.vue";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
setLabel,
|
setLabel,
|
||||||
@@ -1966,6 +1966,8 @@ export default defineComponent({
|
|||||||
// width: calc(100% - 23.5rem);
|
// width: calc(100% - 23.5rem);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
.header_operate_item{
|
.header_operate_item{
|
||||||
margin-right: 5rem;
|
margin-right: 5rem;
|
||||||
color: #C2C2C2;
|
color: #C2C2C2;
|
||||||
@@ -2048,7 +2050,9 @@ export default defineComponent({
|
|||||||
|
|
||||||
.libray_right_content{
|
.libray_right_content{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:calc(100% - 12rem);
|
// height:calc(100% - 12rem);
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
padding: 0.1rem 0 0 0.3rem;
|
padding: 0.1rem 0 0 0.3rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
&.myBrand{
|
&.myBrand{
|
||||||
@@ -2165,6 +2169,7 @@ export default defineComponent({
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-content: flex-start;
|
align-content: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
&.content_body_table::-webkit-scrollbar {
|
&.content_body_table::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -2343,7 +2348,7 @@ export default defineComponent({
|
|||||||
.table_pagination{
|
.table_pagination{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// height: 5.2rem;
|
// height: 5.2rem;
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user