调整部分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.1.3:5567'
|
||||
|
||||
ss
|
||||
# VUE_APP_BASE_URL = 'http://192.168.31.34:5567'
|
||||
|
||||
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 {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item.smail .ant-select-selection-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item > input {
|
||||
height: 6rem !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 {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item .el-cascader {
|
||||
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{
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.ant-select-selection-placeholder{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
>input{
|
||||
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-selection-item{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// display: flex;
|
||||
display: inline-block;
|
||||
// align-items: center;
|
||||
//文字超出隐藏
|
||||
overflow: hidden;
|
||||
line-height: 2.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
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}"]`);
|
||||
if(!window.isAddGmail){
|
||||
if(!existingScript){
|
||||
|
||||
@@ -82,11 +82,9 @@ export default defineComponent({
|
||||
operationsModal:false,
|
||||
operationsEdit:false,
|
||||
loadingShow:false,
|
||||
title:''
|
||||
})
|
||||
let operationsData = reactive({
|
||||
title:'',
|
||||
name:'',
|
||||
type:'Enterprise',
|
||||
systemUser:'Enterprise',
|
||||
})
|
||||
let state = ref([
|
||||
{
|
||||
@@ -104,38 +102,37 @@ export default defineComponent({
|
||||
operations.title = funStr
|
||||
if(funStr == 'Add') operations.operationsEdit = false
|
||||
if(funStr == 'Edit'){
|
||||
operationsData.name=data.name
|
||||
operationsData.type=data.type
|
||||
operations.systemUser=data.type
|
||||
operations.name=data.name
|
||||
}
|
||||
|
||||
}
|
||||
let setAddData = ()=>{
|
||||
return {
|
||||
"name": operationsData.name,
|
||||
"type": operationsData.type,
|
||||
"type": operations.systemUser,
|
||||
name:operations.name,
|
||||
}
|
||||
}
|
||||
let setEditData = ()=>{
|
||||
return {
|
||||
"name": operationsData.country,
|
||||
"type": operationsData.credits,
|
||||
"type": operations.systemUser,
|
||||
name:operations.name,
|
||||
}
|
||||
}
|
||||
let cancelDsign = ()=>{
|
||||
operationsData.name=''
|
||||
operationsData.type='Enterprise'
|
||||
operations.value='Enterprise'
|
||||
operations.operationsModal = false
|
||||
operations.operationsEdit = false
|
||||
}
|
||||
let setOk = ()=>{
|
||||
let data
|
||||
if(operations.title == 'Add'){
|
||||
data = setAddData()
|
||||
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) => {
|
||||
if (rv) {
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
cancelDsign()
|
||||
emit('searchHistoryList')
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -143,7 +140,6 @@ export default defineComponent({
|
||||
}
|
||||
return {
|
||||
...toRefs(operations),
|
||||
...toRefs(operationsData),
|
||||
state,
|
||||
cancelDsign,
|
||||
init,
|
||||
|
||||
@@ -104,39 +104,37 @@ export default defineComponent({
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: "City",
|
||||
title: "Id",
|
||||
align: "center",
|
||||
dataIndex: "city",
|
||||
key: "city",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
width:150,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title: "Country",
|
||||
title: "Name",
|
||||
align: "center",
|
||||
dataIndex: "country",
|
||||
key: "country",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width:150,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
{
|
||||
title: "Create Time",
|
||||
align: "center",
|
||||
dataIndex: "createTime",
|
||||
key: "createTime",
|
||||
width:150,
|
||||
ellipsis:true,
|
||||
ellipsis:true
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
title: "Type",
|
||||
align: "center",
|
||||
dataIndex: "status",
|
||||
key: "status",
|
||||
fixed: "right",
|
||||
dataIndex: "type",
|
||||
key: "type",
|
||||
width:150,
|
||||
Operations: true,
|
||||
ellipsis:true,
|
||||
}
|
||||
},
|
||||
];
|
||||
});
|
||||
//改变页码
|
||||
@@ -158,9 +156,9 @@ export default defineComponent({
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
console.log(rv)
|
||||
// this.dataList = rv
|
||||
filter.dataList = rv.content;
|
||||
filterData.total = rv.total;
|
||||
filter.dataList = rv
|
||||
// filter.dataList = rv.content;
|
||||
// filterData.total = rv.total;
|
||||
filter.tableLoading = false;
|
||||
|
||||
// this.workspaceItem.position = this.singleTypeList[0].label
|
||||
|
||||
@@ -39,6 +39,10 @@
|
||||
<img src="@/assets/images/icon/details_elements.png" alt="">
|
||||
<div class="detailText">Elements</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 class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
|
||||
@@ -293,6 +297,7 @@ export default defineComponent({
|
||||
let workspace = store.state.Workspace.probjects
|
||||
if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
|
||||
let clothes:any = await setClothes([detailData.selectDetail])
|
||||
console.log(detailData.designDetail)
|
||||
let data = {
|
||||
designItemId:detailData.designDetail.designItemId,
|
||||
designSingleItemDTOList:clothes,
|
||||
@@ -537,12 +542,13 @@ export default defineComponent({
|
||||
> .gallery_btn{
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin-top: 2rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .nav_list{
|
||||
margin-top: 2.7rem;
|
||||
height: 38rem;
|
||||
// height: 38rem;
|
||||
width: 9rem;
|
||||
background: #f4f4f4;
|
||||
border-radius: 1.4rem;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<print v-show="currentDetailType == 'print'"></print>
|
||||
<color v-if="currentDetailType == 'color'"></color>
|
||||
<element v-show="currentDetailType == 'element'"></element>
|
||||
<models v-show="currentDetailType == 'models'"></models>
|
||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,11 +19,12 @@ import sketch from './sketch.vue'
|
||||
import print from './print.vue'
|
||||
import color from './colorBox/index.vue'
|
||||
import element from './element.vue'
|
||||
import models from './models.vue'
|
||||
import addDetails from '@/component/Detail/addDetails.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketch,print,color,addDetails,element
|
||||
sketch,print,color,addDetails,element,models
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
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>
|
||||
<div class="libraryList">
|
||||
<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
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@@ -18,7 +18,76 @@
|
||||
></template>
|
||||
</a-select>
|
||||
</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()">
|
||||
</div>
|
||||
<div class="generalModel_state_item" style="width: auto;">
|
||||
@@ -29,8 +98,8 @@
|
||||
<div class="libraryList_box">
|
||||
<div class="content_img_item" v-for="(file) in libraryList" :key="file.id">
|
||||
<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)"/>
|
||||
<sketchCategory :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
<img v-lazy="level1Type != 'Models'?file.url:file.presignedUrl" :key="level1Type != 'Models'?file.url:file.presignedUrl" :alt="file?.name" @click.stop="selectImgItem(file)"/>
|
||||
<sketchCategory v-if="level1Type != 'Models'" :disignTypeList="designTypeList" :generateList="libraryList" :item="file" :isSetSketchCategory="true"></sketchCategory>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="total > libraryList.length" class="material_content_list_loding" v-observe>
|
||||
@@ -84,6 +153,19 @@ export default defineComponent({
|
||||
designType:'',
|
||||
searchPictureName:'',
|
||||
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({
|
||||
total:0,
|
||||
@@ -126,7 +208,44 @@ export default defineComponent({
|
||||
// store.commit('DesignDetailCopy/setNewDetail',data)
|
||||
}
|
||||
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 workspace = store.state.Workspace.probjects
|
||||
// let type = store.state.DesignDetailCopy.currentDetailType
|
||||
@@ -159,14 +278,13 @@ export default defineComponent({
|
||||
).catch((res)=>{
|
||||
detailData.isShowLoading = false
|
||||
});
|
||||
}
|
||||
}
|
||||
const handleChange = ()=>{
|
||||
getDetailListData.currentPage = 1
|
||||
detailData.libraryList = []
|
||||
getLibraryList()
|
||||
}
|
||||
onMounted(()=>{
|
||||
// getLibraryList()
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isUpload"
|
||||
@click.stop="openUpload()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
|
||||
@@ -85,6 +86,11 @@ export default defineComponent({
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
isUpload:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
required:false
|
||||
}
|
||||
},
|
||||
emits:['selectImgItem'],
|
||||
setup(props,{emit}) {
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
||||
<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -20,9 +21,10 @@ import sketchType from './sketchType.vue'
|
||||
import printType from './printType.vue'
|
||||
import editPrintElement from './editPrintElement.vue'
|
||||
import elementType from './elementType.vue'
|
||||
import modelsType from './modelsType.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketchType,printType,elementType,editPrintElement
|
||||
sketchType,printType,elementType,editPrintElement,modelsType
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
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;
|
||||
padding: .7rem ;
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
max-height: 4rem;
|
||||
// max-height: 4rem;
|
||||
> i{
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
padding: 1.5rem;
|
||||
// padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: .6rem;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
> i:hover{
|
||||
background: #000000;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="img_block_item" v-else>
|
||||
<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
|
||||
<div class="title">
|
||||
<div>Moodboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</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>Printboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
|
||||
<div class="img_block_item">
|
||||
<div class="title">
|
||||
<div>Colorboard</div>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
|
||||
@@ -59,6 +59,17 @@
|
||||
</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="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
|
||||
@@ -68,7 +79,7 @@
|
||||
</div>
|
||||
</div> -->
|
||||
<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>
|
||||
<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
|
||||
</div>
|
||||
@@ -103,12 +114,15 @@ export default defineComponent({
|
||||
return store.state.UploadFilesModule.showSketchboard})
|
||||
let allBoardData:any = computed(()=>{
|
||||
return store.state.UploadFilesModule.allBoardData})
|
||||
let probjects:any = computed(()=>{
|
||||
return store.state.Workspace.probjects})
|
||||
const openCollection = (str:any)=>{
|
||||
emit('openCollection',str)
|
||||
}
|
||||
return {
|
||||
store,
|
||||
allBoardData,
|
||||
probjects,
|
||||
sketch,
|
||||
sketchList,
|
||||
openCollection,
|
||||
@@ -269,6 +283,9 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mannquin{
|
||||
|
||||
}
|
||||
|
||||
.sketch_img_item{
|
||||
display: inline-block;
|
||||
@@ -282,6 +299,12 @@ export default defineComponent({
|
||||
height: 6.8rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.mannquin_img_item{
|
||||
width: 6.8rem;
|
||||
height: 15rem;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.color_item{
|
||||
display: inline-block;
|
||||
@@ -291,7 +314,7 @@ export default defineComponent({
|
||||
margin-right: 4%;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 21%;
|
||||
&:nth-child(4n){
|
||||
&:nth-child(5n){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -346,7 +369,7 @@ export default defineComponent({
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
>div{
|
||||
> .lager_img_item{
|
||||
width: 30%;
|
||||
margin-left: 2rem;
|
||||
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
|
||||
if(this.newPicName && this.selectCode == 'History'){//多选修改名字
|
||||
|
||||
await Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
||||
await Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
|
||||
(rv: any) => {
|
||||
bor = true
|
||||
}
|
||||
|
||||
@@ -268,7 +268,7 @@ export default defineComponent({
|
||||
}
|
||||
data.classificationName = val.classificationName
|
||||
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
||||
Https.axiosPost(Https.httpUrls.classificationSaveOrUpdate, data).then(
|
||||
(rv: any) => {
|
||||
this.getClass()
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
scriptSrc:'https://accounts.google.com/gsi/client',
|
||||
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'
|
||||
// 使用谷歌登录的api
|
||||
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">
|
||||
<input type="file" @change="handleFileUpload($event)">
|
||||
</i>
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||
</div>
|
||||
<div class="sendBox">
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||
<div class="maxNum">{{ chatContent?.length }}/10000</div>
|
||||
<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
|
||||
<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{
|
||||
font-size: 2rem;
|
||||
@@ -547,21 +562,7 @@ export default defineComponent({
|
||||
> .sendBox{
|
||||
display: flex;
|
||||
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{
|
||||
font-size: 1.2rem;
|
||||
margin-right: .8rem;
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
|
||||
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
|
||||
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
|
||||
<mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
@@ -50,10 +51,11 @@ import MoodboardUpload from './collection/MoodboardUpload.vue';
|
||||
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
||||
import ColorboardUpload from './collection/ColorboardUpload.vue';
|
||||
import SketchboardUpload from './collection/SketchboardUpload.vue';
|
||||
import mannequin from './mannequin/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,
|
||||
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
|
||||
},
|
||||
props:{
|
||||
},
|
||||
@@ -64,6 +66,7 @@ export default defineComponent({
|
||||
habitSetStyle:false,
|
||||
isShowMark:false,
|
||||
openType:'',
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
})
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
@@ -74,6 +77,7 @@ export default defineComponent({
|
||||
printBoard:null as any,
|
||||
colorBoard:null as any,
|
||||
sketchBoard:null as any,
|
||||
mannequin:null as any,
|
||||
}) as any
|
||||
const init = (value:any)=>{
|
||||
data.habitSetStyle = true
|
||||
@@ -85,8 +89,21 @@ export default defineComponent({
|
||||
let cleardata = ()=>{
|
||||
data.habitSetStyle = false
|
||||
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{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
@@ -107,6 +124,7 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.collectionBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -887,7 +887,16 @@ export default defineComponent({
|
||||
moodboardPosition,
|
||||
} = this.store.state.UploadFilesModule.allBoardData;
|
||||
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 = {
|
||||
colorBoards: this.getColorBoard(colorBoards),
|
||||
// marketingSketchs: this.getBoardId(marketingSketchFiles),
|
||||
@@ -898,9 +907,10 @@ export default defineComponent({
|
||||
switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
|
||||
singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
|
||||
systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
|
||||
// templateId: 3377,
|
||||
templateId: workspace.model.id,
|
||||
modelType:workspace.model.type,
|
||||
templateId: '',
|
||||
// templateId: workspace.model.id,
|
||||
mannequins: modelList,
|
||||
modelType:'',
|
||||
modelSex:workspace?.sex,
|
||||
moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div ref="placementModal" v-if="placementShow">
|
||||
<a-modal class="generalModel "
|
||||
:class="{fullScreen:!isPop}"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
:width="isPop?'150rem':'100%'"
|
||||
:height="isPop?'90rem':'100%'"
|
||||
width="75%"
|
||||
:get-container="() => $refs.placementModal"
|
||||
:maskClosable="false"
|
||||
:mask="mannEditMask"
|
||||
@@ -1153,12 +1151,12 @@ export default defineComponent({
|
||||
padding: 4rem 5rem;
|
||||
margin-bottom: 0;
|
||||
.generalModel_btn {
|
||||
.generalModel_closeIcon{
|
||||
transform: translate(-100%, 100%);
|
||||
svg{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
// .generalModel_closeIcon{
|
||||
// transform: translate(-100%, 100%);
|
||||
// svg{
|
||||
// color: #000;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1413,8 +1411,9 @@ export default defineComponent({
|
||||
position: relative;
|
||||
// height: 57.6rem;
|
||||
// width: 40.8rem;
|
||||
height: 68rem;
|
||||
width: 47rem;
|
||||
// height: 68rem;
|
||||
height: calc(100% - 6rem);
|
||||
aspect-ratio: 1 / 1.446;
|
||||
margin: 0 auto;
|
||||
|
||||
.img_content_block{
|
||||
@@ -26,6 +26,13 @@
|
||||
</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="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
||||
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
|
||||
@@ -33,7 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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="">
|
||||
<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>
|
||||
@@ -56,8 +63,8 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
|
||||
<edit ref="edit" :ageGroup="selectObject.ageGroup" @submit="getModel"></edit>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -66,7 +73,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
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 { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||
import { Item } from 'ant-design-vue/lib/menu';
|
||||
@@ -91,11 +98,11 @@ export default defineComponent({
|
||||
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
||||
if(newValue != oldValue){
|
||||
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
||||
data.mannequinStyleList.unshift({
|
||||
name:'All',
|
||||
value:'',
|
||||
id:'',
|
||||
})
|
||||
// data.mannequinStyleList.unshift({
|
||||
// name:'All',
|
||||
// value:'',
|
||||
// id:'',
|
||||
// })
|
||||
}
|
||||
},{immediate:true})
|
||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||
@@ -130,14 +137,39 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
const setSelectKey = (item:any)=>{
|
||||
let value = {
|
||||
model:{
|
||||
id:item.id,
|
||||
url:item.presignedUrl,
|
||||
type:data.systemUser?'System':'Library',
|
||||
let list = store.state.Workspace.probjects.model
|
||||
let index = -1
|
||||
list.forEach((val:any,listIndex:any)=>{
|
||||
if(val.id == item.id){
|
||||
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 = ()=>{
|
||||
data.systemUser = !data.systemUser
|
||||
@@ -190,6 +222,11 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
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({
|
||||
title: t('LibraryPage.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
@@ -244,6 +281,7 @@ export default defineComponent({
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setSelectKey,
|
||||
deleteSelectModel,
|
||||
setSystemUser,
|
||||
setStyle,
|
||||
setWorkspaceStyle,
|
||||
@@ -296,11 +334,44 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 4rem 0 3rem;
|
||||
> .left,> .right{
|
||||
> .left,> .right,> .selectModel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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{
|
||||
> .switch{
|
||||
margin: 0 2rem;
|
||||
@@ -315,13 +386,14 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .model{
|
||||
height: 70rem;
|
||||
// height: 70rem;
|
||||
width: auto;
|
||||
max-width: 130rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 20rem);
|
||||
overflow-y: hidden;
|
||||
// max-height: calc(100% - 20rem);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .item{
|
||||
width: 25rem;
|
||||
@@ -384,7 +456,7 @@ export default defineComponent({
|
||||
}
|
||||
> .uploadBox{
|
||||
padding: 0 2rem;
|
||||
right: 0;
|
||||
right: -1px;
|
||||
position: sticky;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
@@ -133,6 +133,10 @@ export default defineComponent({
|
||||
styleId:rv.workspaceVO.styleId,
|
||||
styleName:rv.workspaceVO.styleName,
|
||||
sex:rv.workspaceVO.sex,
|
||||
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
|
||||
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
|
||||
brandPercentage:rv.workspaceVO.brandPercentage,
|
||||
userBrandDna:rv.workspaceVO.userBrandDna,
|
||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
||||
position:{
|
||||
label:rv.workspaceVO.positionEnum.value,
|
||||
@@ -145,26 +149,15 @@ export default defineComponent({
|
||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
||||
},
|
||||
model:{}
|
||||
model:[]
|
||||
}
|
||||
let model:any = {}
|
||||
let position = []
|
||||
if(storeData.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
|
||||
// storeData.model = model
|
||||
data.selectObject.positionList = position
|
||||
storeData.positionList = position
|
||||
store.commit('setProbject',storeData)
|
||||
@@ -178,7 +171,6 @@ export default defineComponent({
|
||||
}
|
||||
const setChatData = ()=>{
|
||||
if(!data.chatData)return
|
||||
console.log(dataDom.chatDom?.enableThinking,data.chatData)
|
||||
nextTick(()=>{
|
||||
dataDom.chatDom.enableThinking = data.chatData.enableThinking
|
||||
dataDom.chatDom.filList = data.chatData.filList
|
||||
@@ -208,6 +200,18 @@ export default defineComponent({
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (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','toProduct','relight','poseTransfer','mannequin']
|
||||
let canvasData = ['canvas']
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
<i class="fi fi-rs-paperclip-vertical">
|
||||
<input type="file" @change="handleFileUpload($event)">
|
||||
</i>
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||
</div>
|
||||
<div class="sendBox">
|
||||
<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
|
||||
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
||||
<div class="send" @click="sendChat">
|
||||
<i class="fi fi-ss-paper-plane-top"></i>
|
||||
@@ -246,22 +246,31 @@ export default defineComponent({
|
||||
position: relative;
|
||||
> .contentBox{
|
||||
width: 100%;
|
||||
height: calc(100% - 7.8rem);
|
||||
height: calc(100% - 3.9rem);
|
||||
// height: calc(100% - 7.8rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .content{
|
||||
// background: red;
|
||||
width: 88rem;
|
||||
// height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
> .workspaceBox{
|
||||
flex: 1;
|
||||
border-radius: 2.4rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid #0000001a;
|
||||
:deep(.workspace){
|
||||
border: 1px solid #0000001a;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .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{
|
||||
font-size: 2rem;
|
||||
@@ -401,21 +425,7 @@ export default defineComponent({
|
||||
> .sendBox{
|
||||
display: flex;
|
||||
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{
|
||||
font-size: 1.2rem;
|
||||
margin-right: .8rem;
|
||||
|
||||
@@ -97,6 +97,10 @@ export default defineComponent({
|
||||
styleId:rv.workspaceVO.styleId,
|
||||
styleName:rv.workspaceVO.styleName,
|
||||
sex:rv.workspaceVO.sex,
|
||||
userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
|
||||
userBrandDnaName:rv.workspaceVO.userBrandDnaName,
|
||||
brandPercentage:rv.workspaceVO.brandPercentage,
|
||||
userBrandDna:rv.workspaceVO.userBrandDna,
|
||||
systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
|
||||
position:{
|
||||
label:rv.workspaceVO.positionEnum.value,
|
||||
@@ -109,26 +113,15 @@ export default defineComponent({
|
||||
portfolioName:rv.portfolioDTO.portfolioName?rv.portfolioDTO.portfolioName:'',
|
||||
tagsDTO:rv.portfolioDTO.tagsDTO?rv.portfolioDTO.tagsDTO:[],
|
||||
},
|
||||
model:{}
|
||||
model:[]
|
||||
}
|
||||
let model:any = {}
|
||||
let position = []
|
||||
if(storeData.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
|
||||
// storeData.model = model
|
||||
storeData.positionList = position
|
||||
dataDom.workspace.init(storeData)
|
||||
}
|
||||
|
||||
@@ -38,6 +38,28 @@
|
||||
<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="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">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="selectObject.systemDesignerPercentage"
|
||||
@@ -66,6 +88,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
|
||||
<setBrandDNA ref="brandDNA" @setWorkspaceBrandDNA="setWorkspaceBrandDNA"></setBrandDNA>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -75,7 +98,8 @@ 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 habitSetStyle from "@/component/modules/habitSetStyle.vue";
|
||||
import setBrandDNA from "@/component/modules/setBrandDNA.vue";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
||||
import { Https } from '@/tool/https';
|
||||
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'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
habitSetStyle,generalMenu
|
||||
habitSetStyle,generalMenu,setBrandDNA
|
||||
},
|
||||
props:{
|
||||
workflowType:{
|
||||
@@ -126,6 +150,10 @@ export default defineComponent({
|
||||
system:0,
|
||||
designer:0,
|
||||
},
|
||||
systemBrandDNA:{
|
||||
system:0,
|
||||
brandDNA:0,
|
||||
},
|
||||
setIsShowMark:inject('setIsShowMark') as any,
|
||||
})
|
||||
// watch(()=>data.selectObject_,(newVal)=>{
|
||||
@@ -136,16 +164,25 @@ export default defineComponent({
|
||||
}
|
||||
const dataDom = reactive({
|
||||
habitSetStyle:null as any,
|
||||
brandDNA:null as any,
|
||||
})
|
||||
const setStyle = ()=>{
|
||||
dataDom.habitSetStyle.init(data.selectObject);
|
||||
}
|
||||
const setBrandDNA = ()=>{
|
||||
dataDom.brandDNA.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 setWorkspaceBrandDNA = (value:any)=>{
|
||||
data.selectObject.userBrandDnaName = value.name
|
||||
data.selectObject.userBrandDna = value.id
|
||||
data.selectObject.userBrandDnaImg = value.img
|
||||
}
|
||||
const setprintModel = (value:any)=>{
|
||||
data.selectObject.position = value
|
||||
}
|
||||
@@ -155,6 +192,12 @@ export default defineComponent({
|
||||
let num = Math.abs((value-50)*2)
|
||||
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 = ()=>{
|
||||
if(!data.selectObject.name){
|
||||
message.info(t('PrintboardUpload.jsContent7'))
|
||||
@@ -171,11 +214,13 @@ export default defineComponent({
|
||||
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,
|
||||
userBrandDna:data.selectObject.userBrandDna,
|
||||
brandPercentage:data.selectObject.brandPercentage,
|
||||
// position:data.selectObject,
|
||||
} as any,
|
||||
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
|
||||
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
|
||||
if(rv){
|
||||
data.selectObject.id = rv.id
|
||||
let model:any = {}
|
||||
@@ -208,32 +253,13 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
onMounted(()=>{
|
||||
store.commit('createProbject')
|
||||
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){
|
||||
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)
|
||||
});
|
||||
}
|
||||
data.selectObject.style = store.state.UserHabit.mannequinStyle[0].value
|
||||
data.selectObject.styleName = store.state.UserHabit.mannequinStyle[0].name
|
||||
data.selectObject.styleId = store.state.UserHabit.mannequinStyle[0].id
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
})
|
||||
watch(()=>data.selectObject.sex,(newVal)=>{
|
||||
if(newVal == 'Male'){
|
||||
@@ -249,9 +275,12 @@ export default defineComponent({
|
||||
...toRefs(data),
|
||||
init,
|
||||
setStyle,
|
||||
setBrandDNA,
|
||||
setWorkspaceStyle,
|
||||
setWorkspaceBrandDNA,
|
||||
setprintModel,
|
||||
formatter,
|
||||
formatterBrandDNA,
|
||||
complete,
|
||||
openSetData,
|
||||
}
|
||||
@@ -275,7 +304,6 @@ export default defineComponent({
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
padding: 1.2rem;
|
||||
border-radius: 2.4rem;
|
||||
> .workspaceBox{
|
||||
width: 55rem;
|
||||
padding: 0 5rem;
|
||||
@@ -289,6 +317,15 @@ export default defineComponent({
|
||||
margin-bottom: 3rem;
|
||||
// width: 44%;
|
||||
}
|
||||
> .brand{
|
||||
> .text{
|
||||
> img{
|
||||
width: 10rem;
|
||||
height: 6rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .title{
|
||||
font-size: 2.7rem;
|
||||
> span{
|
||||
@@ -342,6 +379,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .style{
|
||||
display: flex;
|
||||
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 { useI18n } from 'vue-i18n'
|
||||
import { useRoute } from 'vue-router';
|
||||
import MoodboardUpload from '@/component/HomePage/index/model/collection/MoodboardUpload.vue';
|
||||
import PrintboardUpload from '@/component/HomePage/index/model/collection/PrintboardUpload.vue';
|
||||
import ColorboardUpload from '@/component/HomePage/index/model/collection/ColorboardUpload.vue';
|
||||
import toProduct from '@/component/HomePage/index/model/toProduct/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 toProduct from '@/component/home/tools/toProduct/index.vue';
|
||||
import poseTransfer from '@/component/home/tools/poseTransfer/index.vue';
|
||||
import deReconstruction from '@/component/home/tools/deReconstruction/index.vue';
|
||||
import patternMaking3D from '@/component/home/tools/patternMaking3D/index.vue';
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
@@ -257,6 +257,8 @@ export default {
|
||||
jsContent9:'选择一张图片~',
|
||||
jsContent10:'是否另存为当前模特?',
|
||||
jsContent11:'你确定删除当前品牌DNA吗?',
|
||||
jsContent12:'请先取消选中后就再次点击删除',
|
||||
jsContent13:'您必须选择至少一个模特,且最多不超过四个',
|
||||
},
|
||||
HistoryPage:{
|
||||
History:'历史',
|
||||
|
||||
@@ -257,6 +257,8 @@ export default {
|
||||
jsContent9:'Please select a picture',
|
||||
jsContent10:'Save as New or Overwrite Current Mannequin?',
|
||||
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:{
|
||||
History:'History',
|
||||
|
||||
@@ -93,6 +93,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name:'events',
|
||||
meta:{enter:'all',},
|
||||
component: _import_custom('HomeView/Events.vue'),
|
||||
},{
|
||||
path:'cloud',
|
||||
name:'cloud',
|
||||
meta:{enter:'all',},
|
||||
component: _import_custom('HomeView/cloudGeneration.vue'),
|
||||
},{
|
||||
path:'eventsDetail',
|
||||
name:'eventsDetail',
|
||||
|
||||
@@ -114,6 +114,8 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
||||
state.selectDetail.newDetail[str] = data
|
||||
}else if(str == 'element'){
|
||||
state.selectDetail.newDetail[str] = data
|
||||
}else if(str == 'models'){
|
||||
state.selectDetail.newDetail[str] = data
|
||||
}else{
|
||||
if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
|
||||
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){
|
||||
return new Promise((resolve,reject) => {
|
||||
let data:any = {}
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','mannequin']
|
||||
if(allBoardData.indexOf(str) != -1){
|
||||
if(str == 'colorBoard'){
|
||||
let boardData = state.colorBoards || []
|
||||
@@ -456,6 +456,18 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
return data;
|
||||
});
|
||||
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{
|
||||
data[str] = state.modularData[str]
|
||||
|
||||
@@ -260,7 +260,7 @@ const userHabit : Module<UserHabit,RootState> = {
|
||||
*/
|
||||
state.userDetail.affiliate = data.affiliate
|
||||
state.userDetail.systemUser = data.systemUser
|
||||
state.userDetail.systemUser = 3
|
||||
// state.userDetail.systemUser = 3
|
||||
// 身份列表1:可以使用aida系统,2:可以使用affiliate页面,3:系统管理员用户
|
||||
state.userDetail.systemList = []
|
||||
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)
|
||||
let getUserDetail = ()=>{
|
||||
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',//年龄组
|
||||
positionList:[],//衣服位置
|
||||
position:{},//衣服位置
|
||||
brandPercentage:30,//品牌分成
|
||||
userBrandDna:'',//用户品牌
|
||||
userBrandDnaImg:'',//用户品牌图片
|
||||
userBrandDnaName:'',//用户品牌名字
|
||||
publishData:{
|
||||
id:'',
|
||||
portfolioDes:'',
|
||||
@@ -35,11 +39,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
tagsDTO:[],
|
||||
},//发布的作品数据
|
||||
systemDesignerPercentage:30,//设计师分成
|
||||
model:{
|
||||
id:null,
|
||||
url:'',
|
||||
type:'',
|
||||
},//模特
|
||||
model:[],//模特
|
||||
},
|
||||
projectList:[],//项目列表参数
|
||||
},
|
||||
@@ -83,6 +83,9 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
ageGroup:'Adult',//年龄组
|
||||
positionList:[],
|
||||
position:{},//衣服位置
|
||||
userBrandDna:'',//用户品牌
|
||||
userBrandDnaImg:'',//用户品牌图片
|
||||
userBrandDnaName:'',//用户品牌名字
|
||||
publishData:{
|
||||
id:'',
|
||||
portfolioDes:'',
|
||||
@@ -90,11 +93,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
tagsDTO:[],
|
||||
},//发布的作品数据
|
||||
systemDesignerPercentage:30,
|
||||
model:{
|
||||
id:-1,
|
||||
url:'',
|
||||
type:'',
|
||||
},//模特
|
||||
model:[],//模特
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -213,7 +213,7 @@ export const Https = {
|
||||
queryUserGroup:`/api/history/queryUserGroup`, //History用户分页分组列表
|
||||
deleteUserGroup:`/api/history/deleteUserGroup`, //History删除用户分组
|
||||
updateUserGroupName:`/api/history/updateUserGroupName`, //History修改用户分组名
|
||||
saveOrUpdate:`/api/project/saveOrUpdate`, //History修改用户分组名
|
||||
projectSaveOrUpdate:`/api/project/saveOrUpdate`, //History修改用户分组名
|
||||
historyChoose:`/api/history/choose`, //History choose
|
||||
getDesignDetail:`/api/design/detail/getDetail`,//查询design详情
|
||||
designSingleWithGradient:`/api/design/detail/designSingleWithGradient`,//查询需要更新mask列表
|
||||
@@ -225,7 +225,7 @@ export const Https = {
|
||||
setSketchLibrary:`/api/library/updateLibraryLevel2Type`, // Library文件上传
|
||||
|
||||
queryClassification:`/api/classification/queryClassification`,//标签类别查询
|
||||
saveOrUpdate:`/api/classification/saveOrUpdate`,//标签类别新增修改
|
||||
classificationSaveOrUpdate:`/api/classification/saveOrUpdate`,//标签类别新增修改
|
||||
classificationDelete:`/api/classification/delete`,//标签类别新增修改
|
||||
relationLibrary:`/api/classification/relationLibrary`,//标签类别新增修改
|
||||
getRelClassificationIdList:`/api/classification/getRelClassificationIdList`,//标签类别新增修改
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
<i class="fi fi-br-angle-small-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailBox">
|
||||
<div class="detail" v-if="item.value != 'history'" v-show="openType == item.value">
|
||||
<div class="detailBox" v-show="openType">
|
||||
<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}">
|
||||
<i v-show="childItem.icon" :class="['fi',childItem.icon]"></i>
|
||||
<div class="text">
|
||||
@@ -30,23 +30,24 @@
|
||||
</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="text" style="width: 100%;">
|
||||
<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 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">
|
||||
<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>
|
||||
<div class="operation" v-show="selectHistoryIndex == index">
|
||||
<!-- <div class="item" @click.stop="editName(childItem)">
|
||||
<div class="operation" v-show="historyData.selectHistoryIndex == index">
|
||||
<div class="item" @click.stop="editName(childItem)">
|
||||
<i class="fi fi-rr-edit"></i>
|
||||
<span>Rename</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="item" @click.stop="deleteItem(childItem)">
|
||||
@@ -56,20 +57,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!isNoData" class="material_content_list_loding">
|
||||
<span class="page_loading" v-show="!isShowLoading"></span>
|
||||
<span v-show="isShowLoading">
|
||||
<div v-show="!historyData.isNoData" class="material_content_list_loding">
|
||||
<span class="historyPage_loading" v-show="!historyData.isShowLoading"></span>
|
||||
<span v-show="historyData.isShowLoading">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</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 class="navListBottom">
|
||||
<div class="tools marginT2 list language" :class="{active:isLanguage}">
|
||||
<div class="navListBottom">
|
||||
<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="left">
|
||||
<i class="fi fi-br-globe"></i>
|
||||
@@ -81,17 +89,14 @@
|
||||
</div>
|
||||
<div class="detailBox">
|
||||
<div class="detail" v-show="isLanguage">
|
||||
<div class="detailItem">
|
||||
<span>AI Image Generator</span>
|
||||
</div>
|
||||
<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 class="detailItem" v-for="item in language" :class="{active:locale == item.value}" @click="setLocale(item.value)">
|
||||
<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>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="homeMain_right_content">
|
||||
<div
|
||||
class="button_second credits hideChecked"
|
||||
@@ -158,7 +163,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<span class="icon iconfont icon-yuyan"></span>
|
||||
<span class="select_item_des">{{$t('Header.language')}}</span>
|
||||
@@ -169,7 +174,7 @@
|
||||
<span class="select_item_des">{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="select_item" @click="orderForm()">
|
||||
|
||||
<i class="fi fi-rs-notebook"></i>
|
||||
@@ -273,18 +278,20 @@ export default defineComponent({
|
||||
isLanguage:false,
|
||||
openTypeList:openTypeList(t),
|
||||
projectSetting:null,
|
||||
|
||||
historyData:{
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
isNull:false,
|
||||
searchCollectionName:'',
|
||||
historyTextarea:'',
|
||||
historyList:[],
|
||||
selectHistoryIndex:-1,
|
||||
page:1,
|
||||
size:10,
|
||||
}
|
||||
})
|
||||
const historyData = reactive({
|
||||
isNoData:false,
|
||||
isShowLoading:false,
|
||||
isNull:false,
|
||||
searchCollectionName:'',
|
||||
historyTextarea:'',
|
||||
historyList:[],
|
||||
selectHistoryIndex:-1,
|
||||
page:1,
|
||||
size:10,
|
||||
|
||||
})
|
||||
watch(() => route.query,
|
||||
(query, oldQuery) => {
|
||||
@@ -437,15 +444,16 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
let setPorfolioDom = ()=>{
|
||||
historyData.isShowLoading = false
|
||||
historyData.isNoData = false
|
||||
let imgParent = document.querySelector('.homeMain_max .detailBox .material_content_list_loding .page_loading')
|
||||
homeMainData.historyData.isShowLoading = false
|
||||
homeMainData.historyData.isNoData = false
|
||||
let imgParent = document.querySelector('.homeMain_max .detail .material_content_list_loding .historyPage_loading')
|
||||
console.log(imgParent)
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交,则直接返回
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
getHistory()
|
||||
historyData.page += 1
|
||||
homeMainData.historyData.page += 1
|
||||
},
|
||||
).observe(imgParent);
|
||||
}
|
||||
@@ -459,19 +467,19 @@ export default defineComponent({
|
||||
// router.push(`/home?history=${childItem.id}`)
|
||||
}
|
||||
const settingGetHistory = ()=>{
|
||||
historyData.page = 1
|
||||
homeMainData.historyData.page = 1
|
||||
homeMainData.openTypeList.history.list = []
|
||||
historyData.isShowLoading = false
|
||||
historyData.isNoData = false
|
||||
homeMainData.historyData.isShowLoading = false
|
||||
homeMainData.historyData.isNoData = false
|
||||
}
|
||||
const getHistory = ()=>{
|
||||
if(historyData.isShowLoading && !historyData.isNoData)return
|
||||
historyData.isShowLoading = true
|
||||
if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
|
||||
homeMainData.historyData.isShowLoading = true
|
||||
let data = {
|
||||
classificationIdList:[],
|
||||
page:historyData.page,
|
||||
size:historyData.size,
|
||||
collectionName:historyData.searchCollectionName,
|
||||
page:homeMainData.historyData.page,
|
||||
size:homeMainData.historyData.size,
|
||||
collectionName:homeMainData.historyData.searchCollectionName,
|
||||
// startDate:startDate,
|
||||
// endDate:endDate,
|
||||
// intersection:1,
|
||||
@@ -480,33 +488,33 @@ export default defineComponent({
|
||||
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
||||
(rv) => {
|
||||
if(data.page == 1 && rv.content.length == 0){
|
||||
historyData.isNull = true
|
||||
homeMainData.historyData.isNull = true
|
||||
}else{
|
||||
historyData.isNull = false
|
||||
homeMainData.historyData.isNull = false
|
||||
}
|
||||
if (rv.content.length > 0) {
|
||||
historyData.isNull = false
|
||||
homeMainData.historyData.isNull = false
|
||||
homeMainData.openTypeList.history.list.push(...rv.content)
|
||||
} else {
|
||||
historyData.isNoData = true
|
||||
homeMainData.historyData.isNoData = true
|
||||
}
|
||||
historyData.isShowLoading = false
|
||||
homeMainData.historyData.isShowLoading = false
|
||||
}
|
||||
).catch(res=>{
|
||||
historyData.isShowMark = false
|
||||
homeMainData.historyData.isShowMark = false
|
||||
if(data.page == 1){
|
||||
historyData.isNull = true
|
||||
homeMainData.historyData.isNull = true
|
||||
}
|
||||
historyData.isNoData = true
|
||||
homeMainData.historyData.isNoData = true
|
||||
});
|
||||
}
|
||||
const editHistory = (item,index,el)=>{
|
||||
if(historyData.selectHistoryIndex == -1){
|
||||
if(homeMainData.historyData.selectHistoryIndex == -1){
|
||||
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
||||
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
||||
let parentHeight = el.target.parentNode.parentNode.parentNode.offsetHeight
|
||||
let operation = el.target.parentNode.querySelector('.operation')
|
||||
historyData.selectHistoryIndex = index
|
||||
homeMainData.historyData.selectHistoryIndex = index
|
||||
//判断弹窗是加载按钮上面还是下面
|
||||
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
||||
operation.classList.add('active')
|
||||
@@ -514,26 +522,26 @@ export default defineComponent({
|
||||
operation.classList.remove('active')
|
||||
}
|
||||
}else{
|
||||
historyData.selectHistoryIndex = -1
|
||||
homeMainData.historyData.selectHistoryIndex = -1
|
||||
}
|
||||
let operationCli = ()=>{
|
||||
historyData.selectHistoryIndex = -1
|
||||
homeMainData.historyData.selectHistoryIndex = -1
|
||||
document.removeEventListener("click", operationCli);
|
||||
}
|
||||
document.addEventListener("click",operationCli,);
|
||||
}
|
||||
const editName = (item)=>{
|
||||
historyData.selectHistoryIndex = -1
|
||||
homeMainData.historyData.selectHistoryIndex = -1
|
||||
homeMainData.openTypeList.history.list.forEach((item)=>{
|
||||
item.editName = false
|
||||
})
|
||||
item.editName = true
|
||||
historyData.historyTextarea = item.name
|
||||
homeMainData.historyData.historyTextarea = item.name
|
||||
}
|
||||
const deleteItem = (item)=>{
|
||||
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:{projectId:item.id}}).then(
|
||||
(rv) => {
|
||||
historyData.selectHistoryIndex = -1
|
||||
homeMainData.historyData.selectHistoryIndex = -1
|
||||
settingGetHistory()
|
||||
if(homeMainData.openTypeChild == item.id){
|
||||
router.push('/home')
|
||||
@@ -546,17 +554,14 @@ export default defineComponent({
|
||||
}
|
||||
const accomplishHistory = (item)=>{
|
||||
let data = {
|
||||
libraryIds:[],
|
||||
libraryName:historyData.historyTextarea,//library名字
|
||||
userGroupName:historyData.historyTextarea,//history名字
|
||||
userGroupId :item.id,//history id
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
name:homeMainData.historyData.historyTextarea,//library名字
|
||||
id :item.id,//history id
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.saveOrUpdate, data).then(
|
||||
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate, data).then(
|
||||
(rv) => {
|
||||
item.name = historyData.historyTextarea
|
||||
item.name = homeMainData.historyData.historyTextarea
|
||||
item.editName = false
|
||||
historyData.historyTextarea = ''
|
||||
homeMainData.historyData.historyTextarea = ''
|
||||
}
|
||||
).catch((res)=>{
|
||||
});
|
||||
@@ -750,25 +755,10 @@ export default defineComponent({
|
||||
let data = {
|
||||
userId: this.userDetail.userId,
|
||||
};
|
||||
if(this.userDetail.systemUser == 3){
|
||||
await Https.axiosGet(Https.httpUrls.trialUserLogout,).then((rv) => {
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||
if(this.userDetail.systemUser == 7){
|
||||
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("/");
|
||||
}
|
||||
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||
// WriteCookie("token");
|
||||
});
|
||||
this.$router.replace("/");
|
||||
this.store.commit('createDetail')
|
||||
this.store.commit('createProbject')
|
||||
|
||||
@@ -954,6 +944,10 @@ export default defineComponent({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
> .time{
|
||||
font-size: 1.2rem;
|
||||
opacity: .5;
|
||||
}
|
||||
> i{
|
||||
margin-right: .8rem;
|
||||
display: flex;
|
||||
@@ -986,7 +980,6 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
line-height: 2rem;
|
||||
margin-bottom: .8rem;
|
||||
font-size: 1.8rem;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1107,6 +1100,7 @@ export default defineComponent({
|
||||
> .titleBox{
|
||||
padding: .8rem;
|
||||
background: #00000000;
|
||||
height: 5rem;
|
||||
> .left{
|
||||
> i{
|
||||
margin-right: 2rem;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="homeView">
|
||||
<homeIndex @setTask="()=>$emit('setTask')"></homeIndex>
|
||||
<!-- <homeIndex @setTask="()=>$emit('setTask')"></homeIndex> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,7 +15,7 @@ import generalCanvas from "@/component/modules/generalCanvas.vue";
|
||||
import affiche from "@/component/HomePage/affiche.vue";
|
||||
import DesignDetail from "@/component/Detail/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 { message,Modal } from "ant-design-vue";
|
||||
import { useStore } from "vuex";
|
||||
@@ -33,7 +33,7 @@ const FileSaver = require("file-saver");
|
||||
export default defineComponent({
|
||||
name: "homePage",
|
||||
components: {
|
||||
homeIndex,
|
||||
// homeIndex,
|
||||
NewCollectionReview,
|
||||
DesignDetail,
|
||||
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>{{ ageGroup }}
|
||||
</div>
|
||||
<mannequinEdit ref="ModelPlacement" :ageGroup="ageGroup" :isPop="true" @submit="getLibraryList"></mannequinEdit>
|
||||
|
||||
</div>
|
||||
@@ -524,7 +524,7 @@ import { remove } from "jszip";
|
||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||
import generalMenu from "@/component/HomePage/generalMenu.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({
|
||||
components: {
|
||||
setLabel,
|
||||
@@ -1966,6 +1966,8 @@ export default defineComponent({
|
||||
// width: calc(100% - 23.5rem);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header_operate_item{
|
||||
margin-right: 5rem;
|
||||
color: #C2C2C2;
|
||||
@@ -2048,7 +2050,9 @@ export default defineComponent({
|
||||
|
||||
.libray_right_content{
|
||||
width:100%;
|
||||
height:calc(100% - 12rem);
|
||||
// height:calc(100% - 12rem);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0.1rem 0 0 0.3rem;
|
||||
box-sizing: border-box;
|
||||
&.myBrand{
|
||||
@@ -2165,6 +2169,7 @@ export default defineComponent({
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
&.content_body_table::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@@ -2343,7 +2348,7 @@ export default defineComponent({
|
||||
.table_pagination{
|
||||
text-align: center;
|
||||
// height: 5.2rem;
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user