1187 lines
32 KiB
Vue
1187 lines
32 KiB
Vue
<template>
|
|
<div class="habit">
|
|
<div v-show="openType.habit" class="habit_mask"></div>
|
|
<div class="habit_button Guide_1_27" @click.stop="setOpenType('habit')" >
|
|
{{ $t('Habit.Workspace') }}
|
|
<i class="fi fi-bs-angle-down"></i>
|
|
</div>
|
|
<div class="habit_content Guide_1_28" :class="[driver__.driver?'showEvents':'']" v-fade="openType.habit">
|
|
<div class="habit_title">
|
|
<h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
|
|
<div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
|
|
</div>
|
|
<div class="habit_type" trigger="['click']" >
|
|
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{workspaceItem.workSpaceName}}
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<div class="habit_model_show habit_workspace_show" v-fade="openType.workspace">
|
|
<ul class="habit_model_list">
|
|
<li v-for="item,index in workspace.workspaceList">
|
|
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.workSpaceName }}</div>
|
|
<input v-show="item.putName" type="text" v-model="workspaceItemName">
|
|
<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
|
|
<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
|
|
<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
|
|
</li>
|
|
<li @click="newWorkspace" class="newWorkspace">
|
|
<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
|
|
<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
|
|
<div v-show="!openType.addWorkspace">+</div>
|
|
</li>
|
|
<div v-show="total > workspace.workspaceList?.length && total != 0" class="material_content_list_loding" v-observe>
|
|
<img src="@/assets/images/homePage/loading.gif" alt="">
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="habit_Overal_Single" :class="[driver__.index == 2?driver__.driver?'Guide_active':'':'']">
|
|
<a-dropdown @click.stop="setOpenType('sex')">
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{ workspaceItem?.sexEnum?.name }}
|
|
<!-- {{ workspaceItem.sex.label }} -->
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<div class="habit_model_show habit_sex_show" v-fade="openType.sex">
|
|
<ul class="habit_model_list">
|
|
<li v-for="item,index in sex">
|
|
<div @click.stop="setSex(item)">{{ item.name }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="habit_Overal_Single habit_style">
|
|
<div class="habit_style_left">
|
|
<div>{{ $t('Habit.Style') }}:</div>
|
|
<span :title="workspaceItem.styleName">{{ workspaceItem.styleName }}</span>
|
|
</div>
|
|
<!-- <div class="button_second">选择</div> -->
|
|
<div class="started_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
|
</div>
|
|
<div class="habit_Overal_Single">
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: !workspaceItem.overallSingle }"
|
|
>
|
|
{{ $t('Habit.Overall') }}
|
|
</div>
|
|
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: workspaceItem.overallSingle }"
|
|
>
|
|
{{ $t('Habit.Single') }}
|
|
</div>
|
|
</div>
|
|
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
|
|
<a-dropdown @click.stop="setOpenType('singleton')">
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{ workspaceItem?.positionEnum?.name }}
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<div class="habit_model_show habit_singleton_show" v-fade="openType.singleton">
|
|
<ul class="habit_model_list">
|
|
<li v-for="item,index in singleTypeList">
|
|
<div @click.stop="setSingle(item)">{{ item.name }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="habit_System_Designer">
|
|
<a-slider id="system_silder"
|
|
v-model:value="workspaceItem.systemDesignerPercentage"
|
|
@afterChange="setSystemDesigner"
|
|
:tip-formatter="formatter"
|
|
:tooltipVisible="false"
|
|
>
|
|
</a-slider>
|
|
<div class="habit_System_Designer_text_max">
|
|
<div class="habit_System_Designer_text">
|
|
|
|
{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
|
|
</div>
|
|
<div class="habit_System_Designer_text">
|
|
|
|
{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="habit_model" :class="[driver__.index == 3?driver__.driver?'Guide_active':'':'']">
|
|
<a-dropdown placement="bottomRight"
|
|
trigger="['click']"
|
|
@click.stop="setOpenType('model')"
|
|
>
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{ $t('Habit.Mannequin') }}
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
</div>
|
|
<div id="modelShow" class="habit_model_show Guide_1_29" :class="[driver__.driver?'showEvents':'']" v-fade="openType.model">
|
|
<div class="habit_btn">
|
|
<div class="model_current">
|
|
<div class="model_text">{{ $t('Habit.Current') }}</div>
|
|
<div class="model_img generalScroll">
|
|
<img :src="workspaceItem.mannequinUrl" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="model_Designer">
|
|
<div class="model_text">
|
|
<div
|
|
class="habit_System_Seleves_text"
|
|
:class="{ active: !systemSeleves }"
|
|
>
|
|
{{ $t('Habit.System') }}
|
|
</div>
|
|
<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
|
|
<div
|
|
class="habit_System_Seleves_text"
|
|
:class="{ active: systemSeleves }"
|
|
>
|
|
{{ $t('Habit.User') }}
|
|
</div>
|
|
</div>
|
|
<div class="model_img generalScroll" v-show="systemSeleves" v-mousewheel>
|
|
<div class="model_img_item">
|
|
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
|
|
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="model_img generalScroll" v-show="!systemSeleves" v-mousewheel>
|
|
<div class="model_img_item">
|
|
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
|
|
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<habitSetStyle ref="habitSetStyle" @setParentData=setParentData @setWorkspaceStyle=setWorkspaceStyle></habitSetStyle>
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { useStore } from "vuex";
|
|
import { defineComponent, createVNode,nextTick, computed,ref,Ref} from "vue";
|
|
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
|
|
import { Https } from "@/tool/https";
|
|
// import type { MenuProps } from "ant-design-vue";
|
|
import { Modal,message,Upload} from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
|
import { position } from "html2canvas/dist/types/css/property-descriptors/position";
|
|
export default defineComponent({
|
|
components: {
|
|
DownOutlined,
|
|
UserOutlined,
|
|
habitSetStyle,
|
|
},
|
|
setup(){
|
|
const store = useStore();
|
|
let workspaceItem:any = ref({
|
|
id:-1,
|
|
id_:1,
|
|
workSpaceName:"工作台1",
|
|
putName:false,
|
|
systemDesignerPercentage:30,
|
|
position:'',
|
|
sex:'',
|
|
overallSingle:false,
|
|
mannequinUrl:'',
|
|
mannequinType:'',
|
|
mannequinId:'',
|
|
})
|
|
let systemDesigner:any = ref({
|
|
system:0,
|
|
designer:0,
|
|
})
|
|
let mannequins:any = ref([{},{}])
|
|
let systemSeleves= ref(false);
|
|
let total= ref(0);
|
|
let openType:any = ref({
|
|
workspace:false,
|
|
singleton:false,
|
|
habit:false,
|
|
model:false,
|
|
addWorkspace:false,
|
|
sex:false,
|
|
slider:false,
|
|
})
|
|
let driver__:any = computed(()=>{
|
|
return store.state.Guide.guide
|
|
})
|
|
let workspace:any = ref({
|
|
|
|
});
|
|
let workspaceItemName = ref('')//设置单独name公共使用
|
|
let singleTypeList:any = ref([
|
|
|
|
])
|
|
let sex = ref([
|
|
])
|
|
let position = ref([
|
|
{
|
|
name:'FemalePosition',
|
|
value:[],
|
|
},{
|
|
name:'MalePosition',
|
|
value:[],
|
|
},
|
|
])
|
|
const {t} = useI18n()
|
|
let styleList = ref([])
|
|
let isShowMark = ref(true)
|
|
return{
|
|
systemSeleves,
|
|
mannequins,
|
|
systemDesigner,
|
|
openType,
|
|
total,
|
|
driver__,
|
|
workspace,
|
|
workspaceItem,
|
|
workspaceItemName,
|
|
singleTypeList,
|
|
sex,
|
|
position,
|
|
t,
|
|
styleList,
|
|
isShowMark
|
|
}
|
|
},
|
|
watch:{
|
|
'openType.habit':{
|
|
handler(newVal:any,oldVal:any){
|
|
// this.store.state.Workspace.workspace
|
|
if(!newVal){
|
|
this.openType.slider = newVal
|
|
if(!this.workspaceItem.overallSingle){
|
|
this.workspaceItem.position = 'Overall'
|
|
}
|
|
let data = this.workspaceItem
|
|
delete data.isLastIndex
|
|
this.putWorkspace(data,this.workspaceItem.id)
|
|
this.openType.model = false
|
|
// this.getDetail(this.workspaceItem.id)
|
|
this.store.commit("setWorkspace", this.workspaceItem);
|
|
}else{
|
|
this.getworkspace('detail')
|
|
}
|
|
}
|
|
},
|
|
|
|
driver__:{
|
|
handler(newVal:any,oldVal:any){
|
|
if(newVal.index>=5){
|
|
this.openType.habit = false
|
|
}
|
|
}
|
|
},
|
|
'workspace.id':{
|
|
handler(newVal:any,oldVal:any){
|
|
// this.workspace.workspaceList.forEach((v:any)=>{
|
|
// if(v.id == this.workspaceItem.id_){
|
|
// this.workspaceItem = v
|
|
// this.workspaceItem.id_ = v.id
|
|
// }
|
|
// if(v.id == oldVal){
|
|
// delete v.isLastIndex
|
|
// this.putWorkspace(v,newVal)
|
|
// this.getDetail(newVal)
|
|
// }
|
|
// })
|
|
this.getDetail(newVal)
|
|
}
|
|
},
|
|
'openType.workspace':{
|
|
handler(newVal:any,oldVal:any){
|
|
this.openType.addWorkspace = false
|
|
this.workspace.workspaceList.forEach((item:any) => {
|
|
item.putName = false
|
|
});
|
|
}
|
|
},
|
|
'workspaceItem.overallSingle':{
|
|
handler(newVal:any,oldVal:any){
|
|
if(this.driver__.driver){
|
|
driverObj__.refresh();
|
|
}
|
|
}
|
|
},
|
|
'openType.sex':{
|
|
handler(newVal:any,oldVal:any){
|
|
if(this.driver__.driver && oldVal){
|
|
driverObj__.moveTo(3);
|
|
}
|
|
}
|
|
},
|
|
|
|
workspaceItem:{
|
|
handler(newVal:any,oldVal:any){
|
|
this.store.commit("setWorkspace", this.workspaceItem);
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
store: useStore(),
|
|
};
|
|
},
|
|
async mounted() {
|
|
// new Promise((resolve) => {
|
|
// this.getPosition(resolve)
|
|
// })
|
|
await this.getPosition()//获取衣服类型
|
|
this.getworkspace('')
|
|
this.getSex()
|
|
},
|
|
directives:{
|
|
fade:{
|
|
mounted (el,binding) {
|
|
el.addEventListener('click',()=>{
|
|
|
|
})
|
|
},
|
|
updated (el,model){
|
|
if(model.value){
|
|
el.style.display="block"
|
|
setTimeout(() => {
|
|
el.classList.add("active")
|
|
let value:any = model.instance
|
|
value.openType.slider = true
|
|
}, 100);
|
|
}else{
|
|
el.classList.remove("active")
|
|
setTimeout(() => {
|
|
el.style.display="none"
|
|
}, 100);
|
|
}
|
|
}
|
|
},
|
|
mousewheel:{
|
|
mounted (el) {
|
|
el.addEventListener('wheel',(e:WheelEvent)=>{
|
|
let num = 0
|
|
if(e.deltaY > 0){
|
|
num = 25
|
|
}else{
|
|
num = -25
|
|
}
|
|
el.scrollBy(num, 0);
|
|
},{ passive: true })
|
|
}
|
|
},
|
|
observe:{
|
|
mounted (el,binding) {
|
|
// console.log(binding.instance);
|
|
const ob = new IntersectionObserver(callback,{
|
|
root:null,
|
|
threshold:[0.1]
|
|
})
|
|
ob.observe(el)
|
|
// this.currentPage = 1
|
|
// this.pageSize = 12
|
|
let this_:any = binding.instance
|
|
function callback(entries:any, observer:any) {
|
|
entries.forEach((entry:any) => {
|
|
if (entry.isIntersecting) {
|
|
this_.getworkspace('di')
|
|
} else {
|
|
}
|
|
});
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
async getSex(){
|
|
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
|
if (rv) {
|
|
rv.forEach((item:any) => {
|
|
let name = item.name
|
|
item.name = item.value
|
|
item.value = name
|
|
});
|
|
this.store.commit("setWorkspaceSex", rv);
|
|
this.sex = rv
|
|
}
|
|
})
|
|
},
|
|
setPosition(str:any){
|
|
let num
|
|
if(this.workspaceItem.sexEnum.value == 'Female'){
|
|
num = 0
|
|
}else{
|
|
num = 1
|
|
}
|
|
this.singleTypeList = this.position[num].value
|
|
this.store.commit("setWorkspacePosition", this.position[num].value);
|
|
|
|
if(str == 'sex'){
|
|
this.workspaceItem.position = this.singleTypeList[0].value
|
|
this.workspaceItem.positionEnum = this.singleTypeList[0]
|
|
}
|
|
},
|
|
async getPosition(){
|
|
await new Promise(async (resolve) => {
|
|
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
|
|
if (rv) {
|
|
rv.forEach((item:any) => {
|
|
let name = item.name
|
|
item.name = item.value
|
|
item.value = name
|
|
});
|
|
this.position[0].value = rv
|
|
}
|
|
})
|
|
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
|
|
if (rv) {
|
|
rv.forEach((item:any) => {
|
|
let name = item.name
|
|
item.name = item.value
|
|
item.value = name
|
|
});
|
|
this.position[1].value = rv
|
|
}
|
|
})
|
|
resolve('')
|
|
})
|
|
this.store.commit("setWorkspaceAllPosition", [...this.position[0].value,...this.position[1].value]);
|
|
// this.getworkspace()
|
|
// this.setPosition('')
|
|
},
|
|
getworkspace(str:any){
|
|
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
|
|
// if (rv) {
|
|
// console.log(rv,'workspace');
|
|
// }
|
|
// })
|
|
let data = {
|
|
page:1,
|
|
size:10,
|
|
}
|
|
// data.page = this.workspace.workspaceList?.[0]?.id != undefined?this.workspace.workspaceList?.length / data.size+1:1
|
|
data.size = this.workspace.workspaceList?.[0]?.id != undefined?this.workspace.workspaceList?.length + data.size+1:10
|
|
|
|
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
|
|
if (rv) {
|
|
// rv.page.content.forEach((v:any) => {
|
|
// v.id_ = v.id
|
|
// if(v.position == "Overall"){
|
|
// v.overallSingle = false
|
|
// }else{
|
|
// v.overallSingle = true
|
|
// }
|
|
// v.putName = false
|
|
// });
|
|
this.workspace.id = rv.id
|
|
if(str == 'detail') this.getDetail(rv.id)
|
|
this.total = rv.page.total
|
|
this.workspace.workspaceList = rv.page.content
|
|
|
|
// this.workspaceItem = v
|
|
|
|
// this.setMannequinsSex()
|
|
// this.setPosition('')
|
|
}
|
|
})
|
|
},
|
|
getDetail(id:any){//
|
|
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
|
|
if (rv) {
|
|
this.isShowMark = false
|
|
if(rv.position == "Overall"){
|
|
rv.overallSingle = false
|
|
}else{
|
|
rv.overallSingle = true
|
|
}
|
|
let positionEnumName = rv.positionEnum.name
|
|
rv.positionEnum.name = rv.positionEnum.value
|
|
rv.positionEnum.value = positionEnumName
|
|
let sexEnumName = rv.sexEnum.name
|
|
rv.sexEnum.name = rv.sexEnum.value
|
|
rv.sexEnum.value = sexEnumName
|
|
rv.putName = false
|
|
this.workspaceItem = rv
|
|
this.setMannequinsSex()
|
|
this.setPosition('')
|
|
// this.getworkspace()
|
|
}
|
|
}).catch((res)=>{
|
|
this.isShowMark = false
|
|
// this.getworkspace()
|
|
});
|
|
},
|
|
getMannequins(isSetmannequins:any){//获取模特
|
|
let styleData = this.workspaceItem.style?this.workspaceItem.style:''
|
|
return new Promise((resolve,reject)=>{
|
|
Https.axiosGet(Https.httpUrls.getMannequins,{params:{sex:this.workspaceItem.sex,style:styleData}}).then(async (rv: any) => {
|
|
if (rv) {
|
|
if(rv[0].type == 'System'){
|
|
let a = rv[0]
|
|
rv[0] = rv[1]
|
|
rv[1] = a
|
|
}
|
|
this.mannequins = rv
|
|
if(this.mannequins?.[0]==null){
|
|
this.systemSeleves = false
|
|
}
|
|
if(isSetmannequins){
|
|
// this.workspaceItem.femalePresignedUrl = this.mannequins?.[1]?.modelList[0].presignedUrl
|
|
// this.workspaceItem.mannequinFemaleType = 'System'
|
|
// this.workspaceItem.mannequinFemaleId = this.mannequins?.[1]?.modelList[0].id
|
|
await this.setMannequins(this.mannequins?.[1]?.modelList[0],'System')
|
|
// this.workspaceItem.mannequinUrl = this.mannequins?.[1]?.modelList[0].presignedUrl
|
|
// this.workspaceItem.mannequinType = 'System'
|
|
// this.workspaceItem.mannequinId = this.mannequins?.[1]?.modelList[0].id
|
|
}
|
|
resolve('')
|
|
}
|
|
})
|
|
})
|
|
},
|
|
putWorkspace(data:any,index:any){//修改workspace
|
|
if(this.workspaceItem.id == -1){
|
|
return
|
|
}
|
|
this.openType.model = false
|
|
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
|
|
if (rv) {
|
|
if(index){
|
|
// this.getDetail(index)
|
|
}else{
|
|
}
|
|
if(index){
|
|
this.getDetail(index)
|
|
}else{
|
|
this.getworkspace('')
|
|
}
|
|
this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName
|
|
this.workspace.workspaceList[index].putName = false
|
|
this.openType.addWorkspace = false
|
|
}
|
|
}).catch((res)=>{
|
|
// this.getworkspace()
|
|
});
|
|
},
|
|
deleteWorkspace(data:any){
|
|
Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
|
|
if (rv) {
|
|
this.getworkspace('')
|
|
}
|
|
})
|
|
},
|
|
//
|
|
setOverallSingle(){
|
|
if(this.workspaceItem.overallSingle){
|
|
this.workspaceItem.position = this.singleTypeList[0].value
|
|
this.workspaceItem.positionEnum = this.singleTypeList[0]
|
|
}else{
|
|
this.workspaceItem.position = 'Overall'
|
|
}
|
|
},
|
|
|
|
cancelDsign(index:any){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: _this.t('Habit.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
wrapClassName:'habit',
|
|
zIndex:999999999,
|
|
centered:true,
|
|
onOk() {
|
|
let data = [{
|
|
id:_this.workspace.workspaceList[index].id,
|
|
}]
|
|
let id = _this.workspace.workspaceList[index].id
|
|
_this.deleteWorkspace(data)
|
|
}
|
|
});
|
|
},
|
|
//修改名字
|
|
putName(index:number,v:string){
|
|
this.workspace.workspaceList.forEach((v:any )=> {
|
|
v.putName = false
|
|
});
|
|
this.openType.addWorkspace = false
|
|
if(v == 'put'){
|
|
this.workspaceItemName = this.workspace.workspaceList[index].workSpaceName
|
|
this.workspace.workspaceList[index].putName = true
|
|
}else if (v == 'delete'){
|
|
this.cancelDsign(index)
|
|
// let data = [{
|
|
// id:this.workspace.workspaceList[index].id,
|
|
// }]
|
|
// let id = this.workspace.workspaceList[index].id
|
|
// this.deleteWorkspace(data)
|
|
}else{
|
|
if(this.workspaceItemName == ''){
|
|
message.info(this.t('Habit.jsContent2'));
|
|
}else{
|
|
if(index == -1){
|
|
|
|
let data = {
|
|
workSpaceName:this.workspaceItemName,
|
|
}
|
|
this.putWorkspace(data,'')
|
|
}else{
|
|
let data:any
|
|
this.workspace.workspaceList.forEach((item:any)=>{
|
|
if(this.workspace.workspaceList[index].id == item.id){
|
|
// item.putName = true
|
|
data = item
|
|
}
|
|
})
|
|
data.workSpaceName = this.workspaceItemName
|
|
this.putWorkspace(data,this.workspaceItem.id)
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
//设置系统设计占比
|
|
setSystemDesigner(num: number) {
|
|
this.workspaceItem.systemDesignerPercentage = num
|
|
},
|
|
formatter(value: number) {
|
|
this.systemDesigner.system = 100 - value
|
|
this.systemDesigner.designer = value
|
|
let num = Math.abs((value-50)*2)
|
|
return `${num}%`;
|
|
},
|
|
|
|
//根据id设置当前参数
|
|
setWorkspace(num:number){
|
|
this.openType.addWorkspace = false
|
|
this.workspace.workspaceList.forEach((v:any) => {
|
|
v.putName = false
|
|
});
|
|
this.putWorkspace(this.workspaceItem,'')
|
|
this.workspace.id = num
|
|
// this.workspaceItem.id_ = num
|
|
this.openType.workspace = false
|
|
},
|
|
//新建参数
|
|
newWorkspace(){
|
|
this.workspaceItemName = ''
|
|
this.openType.addWorkspace = true
|
|
this.workspace.workspaceList.forEach((item:any) => {
|
|
item.putName = false
|
|
});
|
|
},
|
|
setSex(v:any){
|
|
this.workspaceItem.sexEnum = v
|
|
this.openType.sex = false
|
|
this.workspaceItem.sex = v.value
|
|
this.getMannequins(false)
|
|
this.setMannequinsSex()
|
|
this.setPosition('sex')
|
|
|
|
},
|
|
//设置single & overall
|
|
setSingle(v:any){
|
|
this.openType.singleton = false
|
|
this.workspaceItem.position = v.value
|
|
this.workspaceItem.positionEnum = v
|
|
|
|
},
|
|
setMannequins(item:any,str:string){//设置模特
|
|
// this.workspaceItem.mannequinId = item.id
|
|
// this.workspaceItem.mannequinType = str
|
|
// this.workspaceItem.mannequinUrl = item.presignedUrl
|
|
return new Promise((resolve, reject) => {
|
|
let id
|
|
if(this.workspaceItem.sexEnum.value == 'Female'){
|
|
id = this.workspaceItem.mannequinFemaleId
|
|
this.workspaceItem.femalePresignedUrl = item.presignedUrl
|
|
this.workspaceItem.mannequinFemaleType = str
|
|
this.workspaceItem.mannequinFemaleId = item.id
|
|
}else if(this.workspaceItem.sexEnum.value == 'Male'){
|
|
id = this.workspaceItem.mannequinMaleId
|
|
this.workspaceItem.malePresignedUrl = item.presignedUrl
|
|
this.workspaceItem.mannequinMaleType = str
|
|
this.workspaceItem.mannequinMaleId = item.id
|
|
}
|
|
// if(id != item.id){
|
|
if(this.driver__.driver){
|
|
// this.openType.habit = false
|
|
nextTick().then(()=>{
|
|
// driverObj__.moveTo(2);
|
|
driverObj__.moveNext();
|
|
this.openType.model = false
|
|
|
|
// driverObj__.moveNext();
|
|
})
|
|
}
|
|
// }
|
|
this.workspaceItem.mannequinUrl = item.presignedUrl
|
|
this.workspaceItem.mannequinType = str
|
|
this.workspaceItem.mannequinId = item.id
|
|
resolve('')
|
|
})
|
|
|
|
},
|
|
// FEMALE MALE
|
|
setMannequinsSex(){
|
|
if(this.workspaceItem.sexEnum.value == 'Female'){
|
|
this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
|
|
this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
|
|
this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
|
|
}else if(this.workspaceItem.sexEnum.value == 'Male'){
|
|
this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
|
|
this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
|
|
this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId
|
|
}
|
|
},
|
|
setOpenType(v:string){
|
|
if(v == 'habit'){
|
|
this.openType.habit = !this.openType.habit
|
|
if(this.driver__.driver){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveNext();
|
|
// driverObj__.moveTo(29);
|
|
})
|
|
}
|
|
}else if(v == 'workspace'){
|
|
this.openType.singleton = false
|
|
this.openType.sex = false
|
|
// this.workspace.workspaceList.forEach((v:any) => {
|
|
// v.putName = false
|
|
// });
|
|
this.openType.workspace = !this.openType.workspace
|
|
}else if(v == 'model'){
|
|
this.openType.singleton = false
|
|
this.openType.workspace = false
|
|
this.openType.sex = false
|
|
this.openType.model = !this.openType.model
|
|
this.getMannequins(false)
|
|
if(this.driver__.driver && this.openType.model){
|
|
nextTick().then(()=>{
|
|
driverObj__.moveTo(4);
|
|
// driverObj__.moveNext();
|
|
})
|
|
}
|
|
}else if(v == 'singleton'){
|
|
this.openType.singleton = !this.openType.singleton
|
|
this.openType.workspace = false
|
|
this.openType.sex = false
|
|
}else if(v == 'sex'){
|
|
this.openType.sex = !this.openType.sex
|
|
this.openType.workspace = false
|
|
this.openType.singleton = false
|
|
|
|
}
|
|
let mask = document.getElementsByClassName("habit_mask")[0]
|
|
mask.addEventListener("click", this.documentClick,true);
|
|
},
|
|
documentClick(){
|
|
let mask = document.getElementsByClassName("habit_mask")[0]
|
|
mask.removeEventListener("click", this.documentClick);
|
|
this.openType.habit = false
|
|
this.openType.workspace = false
|
|
this.openType.model = false
|
|
this.openType.singleton = false
|
|
this.openType.sex = false
|
|
},
|
|
// //选择模特
|
|
// selectModels() {
|
|
// let modelsModal: any = this.$refs.modelsModal;
|
|
// modelsModal.init();
|
|
// },
|
|
|
|
// //确定选择模特
|
|
// sureSelectModel(event: any) {
|
|
// this.store.commit("setTemplateData", event);
|
|
// },
|
|
async setWorkspaceStyle(data: any){
|
|
|
|
// this.workspaceItem.styleId = data.id
|
|
this.workspaceItem.styleName = data.name
|
|
this.workspaceItem.style = data.value
|
|
this.workspaceItem.styleId = data.id
|
|
if(data.isRevampModel){
|
|
await this.getMannequins(true)
|
|
}
|
|
if(!this.workspaceItem.overallSingle){
|
|
this.workspaceItem.position = 'Overall'
|
|
}
|
|
this.putWorkspace(this.workspaceItem,this.workspaceItem.id)
|
|
},
|
|
setStyle(){
|
|
// this.openType.habit = false
|
|
let habitSetStyle:any = this.$refs.habitSetStyle;
|
|
// habitSetStyle.habitSetStyleMask = true
|
|
// habitSetStyle.styleList = this.styleList
|
|
habitSetStyle.init(this.workspaceItem);
|
|
},
|
|
setParentData(){
|
|
// this.openType.habit = true
|
|
// this.getDetail(this.workspaceItem.id)
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.habit {
|
|
position: relative;
|
|
.habit_button {
|
|
background-color: #fff;
|
|
border: solid 2px #000;
|
|
padding: 0px calc(2rem*1.2);
|
|
box-sizing: initial;
|
|
font-weight: 600;
|
|
height: calc(3.2rem*1.2);
|
|
line-height: calc(3.2rem*1.2);
|
|
padding: calc(.4rem*1.2) calc(1.5rem*1.2);
|
|
font-size: calc(1.2rem*1.2);
|
|
cursor: pointer;
|
|
position: relative;
|
|
.fi-bs-angle-down {
|
|
margin-left: calc(1rem*1.2);
|
|
display: inline-block;
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
.habit_mask{
|
|
position: absolute;
|
|
top: -20px;
|
|
left: auto;
|
|
right: -30px;
|
|
bottom: 0;
|
|
// background: #000;
|
|
opacity: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.habit_content {
|
|
border: solid 2px #000;
|
|
border-radius: calc(1rem*1.2);
|
|
padding: calc(2rem*1.2);
|
|
// zoom: .75;
|
|
font-size: calc(1.6rem*1.2);
|
|
transform-origin: top right;
|
|
position: absolute;
|
|
right: calc(-.3rem*1.2);
|
|
top: 110%;
|
|
background: #fff;
|
|
// width: 25rem*1.2);
|
|
width: calc(30rem*1.2);
|
|
opacity: 0;
|
|
transition: all .3s;
|
|
transform: scale(0.75)translateY(10%);
|
|
display: none;
|
|
overflow: inherit !important;
|
|
&.active{
|
|
opacity: 1;
|
|
transform: scale(0.75)translateY(0%);
|
|
}
|
|
.habit_title {
|
|
h3 {
|
|
font-size: calc(1.6rem*1.2);
|
|
font-weight: 600;
|
|
color: #000;
|
|
margin: 0;
|
|
}
|
|
.habit_intro {
|
|
font-size: calc(1.2rem*1.2);
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.habit_type {
|
|
margin-top: calc(1.5rem*1.2);
|
|
cursor: pointer;
|
|
position: relative;
|
|
.habit_workspace_show{
|
|
width: 100%;
|
|
z-index: 1;
|
|
transform: translateY(10%);
|
|
top: calc(4rem*1.2);
|
|
height: calc(14rem*1.2);
|
|
overflow-x: hidden;
|
|
cursor: auto;
|
|
&.active{
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
}
|
|
.habit_Overal_Single {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: calc(3rem*1.2) 0;
|
|
position: relative;
|
|
&.habit_style{
|
|
justify-content: space-between;
|
|
.habit_style_left{
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
div{
|
|
font-weight: 900;
|
|
margin-right: 2rem;
|
|
}
|
|
span{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
.habit_Overal_Single_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 900;
|
|
}
|
|
|
|
}
|
|
:deep(.ant-switch) {
|
|
margin: 0 calc(1rem*1.2);
|
|
}
|
|
.habit_sex_show{
|
|
width: 100%;
|
|
z-index: 1;
|
|
transform: translateY(10%);
|
|
top: calc(4rem*1.2);
|
|
height: calc(14rem*1.2);
|
|
overflow-x: hidden;
|
|
cursor: auto;
|
|
&.active{
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
}
|
|
.habit_habit_singleton {
|
|
margin-bottom: calc(3rem*1.2);
|
|
position: relative;
|
|
.habit_singleton_show{
|
|
width: 100%;
|
|
z-index: 1;
|
|
transform: translateY(10%);
|
|
top: calc(4rem*1.2);
|
|
height: calc(14rem*1.2);
|
|
overflow-x: hidden;
|
|
cursor: auto;
|
|
&.active{
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
}
|
|
.habit_System_Designer {
|
|
// margin-top: calc(8rem*1.2);
|
|
|
|
|
|
.habit_System_Designer_text_max {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
|
|
.habit_System_Designer_text {
|
|
>span{
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #2d2e76;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.habit_model{
|
|
margin-top: calc(2rem*1.2);
|
|
}
|
|
|
|
.habit_model_show{
|
|
position: absolute;
|
|
background-color: #fff;
|
|
border: solid 2px #000;
|
|
border-radius: calc(1rem*1.2);
|
|
padding: calc(2rem*1.2);
|
|
bottom: calc(-.5rem*1.2);
|
|
transform: translateY(110%);
|
|
right: calc(-.2rem*1.2);
|
|
width: calc(40rem*1.2);
|
|
// width: 35rem*1.2);
|
|
opacity: 0;
|
|
transition: all .3s;
|
|
display: none;
|
|
&.active{
|
|
opacity: 1;
|
|
transform: translateY(100%);
|
|
}
|
|
.habit_btn{
|
|
min-height: calc(26rem*1.2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.model_current{
|
|
margin-right: calc(3rem*1.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.model_text{
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.habit_model_list{
|
|
margin: 0;
|
|
li{
|
|
padding: calc(.5rem*1.2) 0;
|
|
display: flex;
|
|
input{
|
|
border: 0;
|
|
width: 80%;
|
|
background: rgba(0,0,0,0);
|
|
}
|
|
>div{
|
|
cursor: pointer;
|
|
width: 80%;
|
|
white-space: nowrap;
|
|
text-overflow:ellipsis;
|
|
overflow:hidden;
|
|
}
|
|
&.newWorkspace{
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
div{
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
display: inline-block;
|
|
width: calc(2rem*1.2);
|
|
height: calc(2rem*1.2);
|
|
line-height: calc(2rem*1.2);
|
|
text-align: center;
|
|
}
|
|
i{
|
|
flex: 1;
|
|
}
|
|
}
|
|
i{
|
|
cursor: pointer;
|
|
}
|
|
.fi-rr-trash{
|
|
margin-left: calc(1rem*1.2);
|
|
}
|
|
}
|
|
li:hover{
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.material_content_list_loding{
|
|
width: 100%;
|
|
height: calc(4rem*1.2);
|
|
display: flex;
|
|
img{
|
|
width: auto;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
.model_Designer{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.model_text{
|
|
display: flex;
|
|
justify-content: center;
|
|
:deep(.ant-switch) {
|
|
margin: 0 calc(1rem*1.2);
|
|
}
|
|
.habit_System_Seleves_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 900;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.model_img{
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
overflow-x: auto;
|
|
|
|
>div{
|
|
display: flex;
|
|
|
|
}
|
|
div{
|
|
width: auto;
|
|
margin-right: calc(1rem*1.2);
|
|
}
|
|
img{
|
|
width: calc(10rem*1.2);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.habit :deep(.ant-dropdown-button) {
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.habit :deep(.ant-btn) {
|
|
box-shadow: none !important;
|
|
height: 4.2rem;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
box-shadow: none;
|
|
border: none;
|
|
background: #f6f6f6;
|
|
width: 100%;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: calc(1.4rem*1.2);
|
|
> .anticon + span{
|
|
max-width: 80%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.ant-tooltip{
|
|
z-index: 1049 !important;
|
|
}
|
|
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
|
background: #000 !important;
|
|
}
|
|
.habit_mod{
|
|
background-color: #000 !important;
|
|
/* top: 0 !important; */
|
|
/* left: 0 !important; */
|
|
}
|
|
.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
|
|
background: #000 !important;
|
|
}
|
|
</style> |