chat聊天功能
This commit is contained in:
X1627315083
415
src/component/home/newProject/index.vue
Normal file
415
src/component/home/newProject/index.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div class="newProject">
|
||||
<div class="contentBox">
|
||||
<div class="content">
|
||||
<div class="title">How can I help you today?</div>
|
||||
<div class="selectFlow">
|
||||
<div class="select">
|
||||
<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="describe">
|
||||
<p v-for="item in selectFlow.describe">{{ item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatOrSetting">
|
||||
<div class="select">
|
||||
<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">Chat</div>
|
||||
<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">Setting</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatBox" v-show="chatOrSetting == 'chat'">
|
||||
<textarea ref="textarea" @input="inputText($event)" placeholder="Write your message"></textarea>
|
||||
<div class="btn">
|
||||
<div class="uploadBox">
|
||||
<div class="filList">
|
||||
<div class="item" v-for="item,index in filList">
|
||||
<div>{{item.name}}</div>
|
||||
<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fi fi-br-upload">
|
||||
<input type="file" @change="handleFileUpload($event)">
|
||||
</i>
|
||||
</div>
|
||||
<div class="sendBox">
|
||||
<div class="maxNum">{{ chatContent.length }}/10000</div>
|
||||
<div class="send" @click="sendChat">
|
||||
<i class="fi fi-ss-paper-plane-top"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="chatOrSetting != 'chat'">
|
||||
<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
|
||||
</div>
|
||||
<div class="hint" v-show="chatOrSetting == 'chat'">
|
||||
<div class="item" v-for="item in hintList" @click="addChatContent(item)">{{ item }}</div>
|
||||
</div>
|
||||
{{ text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</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 { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {getCookie,clonAllCookie} from '@/tool/cookie'
|
||||
import router from '@/router';
|
||||
import workspace from './workspace.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
flowList:[
|
||||
{
|
||||
title:'Series Design',
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
'12312312',
|
||||
'12312312',
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'Single Design',
|
||||
value:'SINGLE_DESIGN',
|
||||
describe:[
|
||||
'12312312',
|
||||
'12312312',
|
||||
]
|
||||
},
|
||||
],
|
||||
selectFlow:{
|
||||
title:'Series Design',
|
||||
value:'SERIES_DESIGN',
|
||||
describe:[
|
||||
'12312312',
|
||||
'12312312',
|
||||
]
|
||||
},
|
||||
chatContent:'',
|
||||
hintList:[
|
||||
'描述1',
|
||||
'描述3',
|
||||
'描述2',
|
||||
],
|
||||
uploadFile:null as any,
|
||||
loadingShow:false,
|
||||
text:'',
|
||||
filList:[] as any,
|
||||
textarea:null as any,
|
||||
chatOrSetting:'chat',
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const setFlow = (item:any)=>{
|
||||
data.selectFlow = item
|
||||
}
|
||||
|
||||
const inputText = (e:any)=>{
|
||||
if(e.target.value.length <= 1000){
|
||||
data.chatContent = e.target.value
|
||||
}else{
|
||||
e.target.value = data.chatContent
|
||||
}
|
||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
||||
}
|
||||
const addChatContent = (item:any)=>{
|
||||
if((data.textarea.value += item.length) > 10000)return
|
||||
data.chatContent += item
|
||||
data.textarea.value += item
|
||||
}
|
||||
const sendChat = ()=>{
|
||||
if(!data.chatContent)return
|
||||
data.loadingShow = true
|
||||
Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value}}).then((rv)=>{
|
||||
if(rv){
|
||||
data.loadingShow = false
|
||||
router.push(`home?history=${rv}`)
|
||||
}
|
||||
}).catch(()=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
|
||||
// const eventSource = new EventSource(`http://192.168.1.3:5567${Https.httpUrls.chatCreateProject}?prompt=${data.chatContent}&token=${getCookie('token')}`,{
|
||||
// });
|
||||
// eventSource.onmessage = function(event) {
|
||||
|
||||
// data.text+=event.data
|
||||
// console.log('收到数据:', event.data);
|
||||
// };
|
||||
// eventSource.onerror = function(error) {
|
||||
// console.log(EventSource.CLOSED,EventSource)
|
||||
// console.log(eventSource.readyState )
|
||||
// if (eventSource.readyState === EventSource.CLOSED) {
|
||||
// console.log('连接已正常关闭');
|
||||
// } else {
|
||||
// console.error('错误:', error);
|
||||
// // 处理错误重连逻辑
|
||||
// }
|
||||
// eventSource.close()
|
||||
// };
|
||||
}
|
||||
const handleFileUpload = (event:any)=>{
|
||||
if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
|
||||
message.info('The file size cannot exceed 5MB.');
|
||||
return
|
||||
}
|
||||
let type = event.target.files[0].type.startsWith('image/')
|
||||
if(type){
|
||||
if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
|
||||
message.info('You can only upload five pictures.');
|
||||
return
|
||||
}
|
||||
}else{
|
||||
if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
|
||||
message.info('You can only upload one file.');
|
||||
return
|
||||
}
|
||||
}
|
||||
data.loadingShow = true
|
||||
const formData = new FormData();
|
||||
formData.append('file', event.target.files[0]);
|
||||
let config:any = {
|
||||
headers:{'Content-Type':'multipart/form-data','Accept':'*/*' },
|
||||
params:formData,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
|
||||
.then((rv: any) => {
|
||||
rv.name = event.target.files[0].name
|
||||
rv.type = type?'image':'file'
|
||||
data.filList.push(rv)
|
||||
data.loadingShow = false
|
||||
}
|
||||
).catch(rv=>{
|
||||
data.loadingShow = false
|
||||
})
|
||||
}
|
||||
const deleteFile = (item:any,index:number)=>{
|
||||
data.filList.splice(index,1)
|
||||
}
|
||||
const setChatOrSetting = (str:any)=>{
|
||||
data.chatOrSetting = str
|
||||
}
|
||||
const setProject = (item:any)=>{
|
||||
router.push(`home?history=${item.id}`)
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setFlow,
|
||||
inputText,
|
||||
addChatContent,
|
||||
sendChat,
|
||||
handleFileUpload,
|
||||
deleteFile,
|
||||
setChatOrSetting,
|
||||
setProject,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.newProject{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .contentBox{
|
||||
width: 100%;
|
||||
height: calc(100% - 7.8rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .content{
|
||||
// background: red;
|
||||
width: 88rem;
|
||||
// height: 100%;
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
> .selectFlow{
|
||||
margin-top: 4.8rem;
|
||||
width: 100%;
|
||||
border-radius: 2.4rem;
|
||||
border: 1px solid #0000001a;
|
||||
padding: 1.2rem;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 25%;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .describe{
|
||||
margin-top: 1.6rem;
|
||||
margin-left: .8rem;
|
||||
> p{
|
||||
margin: 0;
|
||||
color: #71717a;
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatOrSetting{
|
||||
margin-top: 2.4rem;
|
||||
width: min-content;
|
||||
margin-left: auto;
|
||||
> .select{
|
||||
border: 1px solid #0000001a;
|
||||
border-radius: 2.4rem;
|
||||
display: flex;
|
||||
padding: .2rem;
|
||||
border-radius: 2rem;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
justify-content: space-between;
|
||||
border-radius: 2.2rem;
|
||||
font-size: 1.6rem;
|
||||
padding: .6rem .8rem;
|
||||
min-width: 10rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #efeff1;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chatBox{
|
||||
margin-top: .4rem;
|
||||
border-radius: 2.4rem;
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
> textarea{
|
||||
padding: 1.6rem 2rem 0;
|
||||
background: #f5f5f5;
|
||||
width: 100%;
|
||||
min-height: 7.2rem;
|
||||
border-radius: 2.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2rem;
|
||||
font-size: 1.4rem;
|
||||
resize: none;
|
||||
border: none;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
> .btn{
|
||||
padding: 0 1.2rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .uploadBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .filList{
|
||||
display: flex;
|
||||
> .item{
|
||||
height: 3rem;
|
||||
padding: .5rem 1rem;
|
||||
background: #efeff1;
|
||||
border-radius: .5rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 2rem;
|
||||
display: flex;
|
||||
> div{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 10rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
> span{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
i{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
> input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
&::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .sendBox{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .maxNum{
|
||||
font-size: 1.2rem;
|
||||
margin-right: .8rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .hint{
|
||||
display: flex;
|
||||
margin-top: 2.4rem;
|
||||
> div{
|
||||
background: #efeff1;
|
||||
width: 25rem;
|
||||
height: 4.8rem;
|
||||
margin-right: 1.2rem;
|
||||
border-radius: 1.6rem;
|
||||
cursor: pointer;
|
||||
padding: 1.2rem;
|
||||
&:hover{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:first-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
376
src/component/home/newProject/workspace.vue
Normal file
376
src/component/home/newProject/workspace.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<div class="workspace">
|
||||
<div class="workspaceBox">
|
||||
<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">
|
||||
</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:true,
|
||||
style:true,
|
||||
age:true,
|
||||
systemDesigner:true,
|
||||
position:true,
|
||||
},
|
||||
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',data.selectObject)
|
||||
}
|
||||
})
|
||||
}
|
||||
const openSetData = ()=>{
|
||||
|
||||
}
|
||||
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){
|
||||
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,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.workspace{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
border: 1px solid #0000001a;
|
||||
padding: 1.2rem;
|
||||
border-radius: 2.4rem;
|
||||
> .workspaceBox{
|
||||
width: 55rem;
|
||||
padding: 0 5rem;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-between;
|
||||
// align-content: flex-start;
|
||||
> .marginBottom{
|
||||
margin-bottom: 3rem;
|
||||
// width: 44%;
|
||||
}
|
||||
> .title{
|
||||
font-size: 2.7rem;
|
||||
> span{
|
||||
color: #999999;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
> .projectName{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .text{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .input{
|
||||
// flex: 1;
|
||||
width: 80%;
|
||||
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;
|
||||
align-items: center;
|
||||
> .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{
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
> .position{
|
||||
> .text{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
: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>
|
||||
Reference in New Issue
Block a user