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

09-12

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

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

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