chat聊天功能
This commit is contained in:
X1627315083
394
src/component/home/index.vue
Normal file
394
src/component/home/index.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="show">
|
||||
<router-view v-if="(openType && openType != 'history' && !routeQuery.id) || $route.path != '/home'" @setTask="setTask">
|
||||
</router-view>
|
||||
<div v-else-if="routeQuery.id || openType == 'history'" class="function">
|
||||
<design ref="design"></design>
|
||||
</div>
|
||||
<div v-else class="function">
|
||||
<newPorject ref="newPorject"></newPorject>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<chat ref="chat" @chatChange="chatChange" v-if="openType"></chat>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,provide,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 { useRouter,useRoute } from 'vue-router'
|
||||
import design from "./design/index.vue"
|
||||
import newPorject from "./newProject/index.vue"
|
||||
import chat from "./chat/index.vue"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
design,newPorject,chat
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:['setTask'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const route = useRoute()
|
||||
const data = reactive({
|
||||
openType:'',
|
||||
isShowMark:false,
|
||||
routeQuery:{} as any,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
||||
|
||||
})
|
||||
const setIsShowMark = (boolean:boolean)=>{
|
||||
data.isShowMark = boolean
|
||||
}
|
||||
provide('setIsShowMark',setIsShowMark)
|
||||
const dataDom = reactive({
|
||||
design:null as any,
|
||||
newPorject:null as any,
|
||||
})
|
||||
watch(() => route.query,
|
||||
(query, oldQuery) => {
|
||||
console.log(route)
|
||||
data.routeQuery = query
|
||||
const key = Object.keys(query)?.[0]
|
||||
if(key){
|
||||
data.openType = Object.keys(query)[0]
|
||||
}else{
|
||||
data.openType = ''
|
||||
}
|
||||
nextTick(()=>{
|
||||
if(query.id || query.history){
|
||||
data.isShowMark = true
|
||||
if(query.type == 'Works'){
|
||||
getWorks(query.id || query.history)
|
||||
}else{
|
||||
getHistory(query.id || query.history)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
{ immediate: true } // 立即触发一次以处理初始参数
|
||||
);
|
||||
const createData = ()=>{
|
||||
store.commit("clearAllData");
|
||||
store.commit("clearAllCollection");
|
||||
store.commit("setAllBoardDataChoose",{});
|
||||
store.commit("clearShowSketchboard",{});
|
||||
store.commit("clearAllCollection");
|
||||
}
|
||||
const getWorks = (id:any)=>{
|
||||
let value:any = {
|
||||
"accountId": 0,
|
||||
"collectionId": 0,
|
||||
"coverId": 0,
|
||||
"createDate": "",
|
||||
id,
|
||||
"isDeleted": 0,
|
||||
"portfolioDes": "",
|
||||
"portfolioName": "",
|
||||
"portfolioType": "",
|
||||
"status": 0,
|
||||
"updateDate": "",
|
||||
"userLikeGroupId":''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.setPorfolioChoose, value).then(
|
||||
(rv: any) => {
|
||||
setProjectData(rv)
|
||||
}
|
||||
).catch((res)=>{
|
||||
data.isShowMark = false
|
||||
});
|
||||
}
|
||||
const getHistory = (id:any)=>{
|
||||
let value = {
|
||||
id,
|
||||
}
|
||||
if(!id)return
|
||||
createData()
|
||||
Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
|
||||
setProjectData(rv)
|
||||
}).catch((res)=>{
|
||||
data.isShowMark = false
|
||||
})
|
||||
}
|
||||
const setTask = (item:any)=>{
|
||||
emit('setTask',item)
|
||||
}
|
||||
const setProjectData = (rv:any)=>{
|
||||
let storeData = {
|
||||
name:rv.name,
|
||||
id:rv.id,
|
||||
type:rv.type,
|
||||
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(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
|
||||
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
|
||||
// })
|
||||
|
||||
getCollection()
|
||||
}
|
||||
// const setitemData = (arr:any)=>{
|
||||
// return new Promise((resolve,reject)=>{
|
||||
// nextTick(()=>{
|
||||
// arr.forEach((rv:any)=>{
|
||||
// if(arr.indexOf(rv) > -1 || !dataDom[rv])return
|
||||
// dataDom[rv].openSetData()
|
||||
// })
|
||||
// resolve('')
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
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']
|
||||
// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','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)
|
||||
}
|
||||
})
|
||||
data.isShowMark = false
|
||||
dataDom.design.openSetData()
|
||||
})
|
||||
}
|
||||
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 = (dataValue:any)=>{
|
||||
let collectionData = {
|
||||
disposeMoodboard: dataValue.moodBoard?.moodTemplateId?[{
|
||||
id:dataValue.moodBoard.moodTemplateId,
|
||||
imgUrl:dataValue.moodBoard.moodTemplateUrl,
|
||||
resData:{
|
||||
name:dataValue.moodBoard.moodTemplateName,
|
||||
}
|
||||
}]:[],
|
||||
moodboardPosition:dataValue.moodBoard?.moodboardPosition?JSON.parse(dataValue.moodBoard.moodboardPosition):{},
|
||||
moodboardFiles: dealViewChooseData(
|
||||
dataValue.moodBoard?.moodBoards,"Moodboard"
|
||||
),
|
||||
printboardFiles: dealViewChooseData(
|
||||
dataValue.printBoard,"Printboard"
|
||||
),
|
||||
generatePrintFiles: [],
|
||||
colorBoards: dealViewChooseColor(
|
||||
dataValue.colorBoard
|
||||
),
|
||||
sketchboardFiles: dealViewChooseData(
|
||||
dataValue.sketchBoard,"Sketchboard"
|
||||
),
|
||||
};
|
||||
if(dataValue.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", dataValue.moodBoard.moodTemplateId);
|
||||
store.commit("setAllBoardDataChoose", collectionData);
|
||||
store.commit("setShowSketchboard", dataValue.sketchBoards);
|
||||
let likeDesignCollectionList:any = []
|
||||
if(dataValue.design?.userLikeDetails){
|
||||
dataValue.design?.userLikeDetails.map(
|
||||
(v: any) => {
|
||||
let dataValue = {
|
||||
...v,
|
||||
groupDetailId: v.id,
|
||||
designItemUrl: v.designOutfitUrl,
|
||||
designItemId: v.designItemId,
|
||||
};
|
||||
return dataValue;
|
||||
}
|
||||
);
|
||||
}
|
||||
if(dataValue.design.userLikeDetails)store.commit("setLikeDesignCollectionList",dataValue.design.userLikeDetails);
|
||||
store.commit("setUserGroupId", dataValue.design.userGroupId);
|
||||
if(dataValue.toProduct){
|
||||
let value = {
|
||||
list: dataValue.toProduct,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setToProductImage", value);
|
||||
}
|
||||
if(dataValue.relight){
|
||||
let value = {
|
||||
list: dataValue.relight,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setRelightList", value);
|
||||
}
|
||||
if(dataValue.poseTransfer){
|
||||
let value = {
|
||||
list: dataValue.poseTransfer,
|
||||
str:'add',
|
||||
index:-1,
|
||||
}
|
||||
store.commit("setPoseTransfer", value);
|
||||
}
|
||||
}
|
||||
//统一处理选择组的渲染数据
|
||||
const dealViewChooseData = (dataValue: any,str:string)=> {
|
||||
if (!dataValue) {
|
||||
return [];
|
||||
}
|
||||
let filesList = dataValue.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 = (dataValue: any)=>{
|
||||
let colorList = dataValue.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;
|
||||
}
|
||||
const chatChange = (value:any)=>{
|
||||
console.log(value)
|
||||
if(value.type == '[DESIGN_SIGNAL]' && dataDom.design){
|
||||
dataDom.design.designNewCollection()
|
||||
}else{
|
||||
getCollection()
|
||||
}
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
setTask,
|
||||
chatChange,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.homeBox{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .show{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .function{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user