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

commit 8.5

Browse Source
This commit is contained in:
WangXiaoDong
2023-08-05 12:52:56 +08:00
parent 913b100ac9
commit b28d6585fa
21 changed files with 2020 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -9,7 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@ans1998/vue3-color": "^3.0.7", "@ans1998/vue3-color": "^3.0.7",
"@flaticon/flaticon-uicons": "^2.2.0", "@flaticon/flaticon-uicons": "^2.3.0",
"ant-design-vue": "^3.2.12", "ant-design-vue": "^3.2.12",
"axios": "^1.4.0", "axios": "^1.4.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
@@ -1811,9 +1811,9 @@
} }
}, },
"node_modules/@flaticon/flaticon-uicons": { "node_modules/@flaticon/flaticon-uicons": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz", "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.3.0.tgz",
"integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==", "integrity": "sha512-+y2yJhMebrbMUxEvegLULS7ir0GFiKMhpm5Xq1hypqb6mHtpA0mLKkN63/kgI0+V0Dol5dGkRf1Tg+wHVluYfQ==",
"optionalDependencies": { "optionalDependencies": {
"esbuild-linux-64": "^0.14.5" "esbuild-linux-64": "^0.14.5"
} }
@@ -13324,9 +13324,9 @@
} }
}, },
"@flaticon/flaticon-uicons": { "@flaticon/flaticon-uicons": {
"version": "2.2.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz", "resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.3.0.tgz",
"integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==", "integrity": "sha512-+y2yJhMebrbMUxEvegLULS7ir0GFiKMhpm5Xq1hypqb6mHtpA0mLKkN63/kgI0+V0Dol5dGkRf1Tg+wHVluYfQ==",
"requires": { "requires": {
"esbuild-linux-64": "^0.14.5" "esbuild-linux-64": "^0.14.5"
} }

2
package.json
View File

@@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@ans1998/vue3-color": "^3.0.7", "@ans1998/vue3-color": "^3.0.7",
"@flaticon/flaticon-uicons": "^2.2.0", "@flaticon/flaticon-uicons": "^2.3.0",
"ant-design-vue": "^3.2.12", "ant-design-vue": "^3.2.12",
"axios": "^1.4.0", "axios": "^1.4.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",

15
src/assets/style/style.css
View File

@@ -29,13 +29,14 @@ input {
.button_second { .button_second {
width: 9.85rem; width: 9.85rem;
text-align: center; text-align: center;
background: #343579;
height: 4rem; height: 4rem;
line-height: 4rem; line-height: 4rem;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
color: #fff; color: #000;
cursor: pointer; cursor: pointer;
border-radius: 1.5rem;
border: 2px solid;
} }
.system_silder { .system_silder {
width: 100%; width: 100%;
@@ -80,6 +81,16 @@ input {
font-size: 1.3rem; font-size: 1.3rem;
font-weight: bold; font-weight: bold;
} }
.started_btn {
padding: 0.5rem 2rem;
display: inline-block;
border-radius: 2rem;
font-size: 12px;
color: #fff;
background-color: #39215b;
cursor: pointer;
zoom: 0.9;
}
.modal_component.ant-modal { .modal_component.ant-modal {
top: 0; top: 0;
} }

18
src/assets/style/style.less
View File

@@ -28,13 +28,15 @@ input{
.button_second{ .button_second{
width: 9.85rem; width: 9.85rem;
text-align: center; text-align: center;
background: #343579; // background: #343579;
height: 4rem; height: 4rem;
line-height: 4rem; line-height: 4rem;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
color: #fff; color: #000;
cursor: pointer; cursor: pointer;
border-radius: 1.5rem;
border: 2px solid;
} }
.system_silder{ .system_silder{
@@ -85,7 +87,17 @@ input{
font-weight: bold; font-weight: bold;
} }
} }
//started公共按钮样式
.started_btn{
padding: .5rem 2rem;
display: inline-block;
border-radius: 2rem;
font-size: 12px;
color: #fff;
background-color: #39215b;
cursor: pointer;
zoom: .9;
}
//弹窗公共样式 //弹窗公共样式

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

@@ -10,15 +10,9 @@
<h3 class="" @click="aaa()">Workspace Setting</h3> <h3 class="" @click="aaa()">Workspace Setting</h3>
<div class="habit_intro">adjust your workspace setting</div> <div class="habit_intro">adjust your workspace setting</div>
</div> </div>
<div class="habit_type"> <div class="habit_type" trigger="['click']">
<a-dropdown> <a-dropdown placement="bottomRight">
<template #overlay>
<a-menu @click="habitTypeclick">
<a-menu-item aaa="22" key="1st menu item"> 1st menu item </a-menu-item>
<a-menu-item key="2nd menu item"> 2nd menu item </a-menu-item>
<a-menu-item key="3rd item"> 3rd item </a-menu-item>
</a-menu>
</template>
<a-button> <a-button>
<UserOutlined /> <UserOutlined />
{{habitType.habitTypeone}} {{habitType.habitTypeone}}
@@ -26,7 +20,21 @@
</a-button> </a-button>
</a-dropdown> </a-dropdown>
</div> </div>
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !checked }"
>
男
</div>
<a-switch v-model:checked="checked" />
<div
class="habit_Overal_Single_text"
:class="{ active: checked }"
>
女
</div>
</div>
<div class="habit_Overal_Single"> <div class="habit_Overal_Single">
<div <div
class="habit_Overal_Single_text" class="habit_Overal_Single_text"
@@ -92,14 +100,14 @@
<div class="model_Designer"> <div class="model_Designer">
<div class="model_text"> <div class="model_text">
<div <div
class="habit_Overal_Single_text" class="habit_System_Seleves_text"
:class="{ active: !checked }" :class="{ active: !checked }"
> >
System System
</div> </div>
<a-switch v-model:checked="checked" /> <a-switch v-model:checked="checked" />
<div <div
class="habit_Overal_Single_text" class="habit_System_Seleves_text"
:class="{ active: checked }" :class="{ active: checked }"
> >
Seleves Seleves
@@ -121,7 +129,9 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, createVNode, ref,Ref} from "vue"; import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue"; import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import type { MenuProps } from "ant-design-vue"; import type { MenuProps } from "ant-design-vue";
import axios from "axios";
export default defineComponent({ export default defineComponent({
components: { components: {
DownOutlined, DownOutlined,
@@ -199,7 +209,8 @@ export default defineComponent({
return { return {
}; };
}, },
mounted() {}, mounted() {
},
directives:{ directives:{
fade:{ fade:{
updated (el,model){ updated (el,model){
@@ -219,12 +230,22 @@ export default defineComponent({
} }
}, },
methods: { methods: {
getworkspace(){
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
if (rv) {
console.log(rv,'workspace');
}
})
},
handleButtonClick(e: Event) { handleButtonClick(e: Event) {
console.log("click left button", e); console.log("click left button", e);
}, },
handleMenuClick(e: Event) { handleMenuClick(e: Event) {
console.log("click", e); console.log("click", e);
this.getworkspace()
}, },
systemDesigner(num: Number) { systemDesigner(num: Number) {
console.log(num); console.log(num);
@@ -236,7 +257,6 @@ export default defineComponent({
const aa = this.$refs.stringg const aa = this.$refs.stringg
// const aa = this.$refs.stringg; // const aa = this.$refs.stringg;
// aa.style // aa.style
console.log(aa);
this.habit = !this.habit this.habit = !this.habit
if(!this.habit){ if(!this.habit){
@@ -255,32 +275,32 @@ export default defineComponent({
.habit_button { .habit_button {
background-color: #fff; background-color: #fff;
border: solid 2px #000; border: solid 2px #000;
padding: 0px 20px; padding: 0px 2rem;
box-sizing: initial; box-sizing: initial;
font-weight: 600; font-weight: 600;
height: 32px; height: 3.2rem;
line-height: 32px; line-height: 3.2rem;
padding: 4px 15px; padding: .4rem 1.5rem;
font-size: 14px; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
.fi-bs-angle-down { .fi-bs-angle-down {
margin-left: 10px; margin-left: 1rem;
display: inline-block; display: inline-block;
transform: translateY(2px); transform: translateY(2px);
} }
} }
.habit_content { .habit_content {
border: solid 2px #000; border: solid 2px #000;
border-radius: 10px; border-radius: 1rem;
padding: 20px 20px; padding: 2rem;
// zoom: .75; // zoom: .75;
transform-origin: top right; transform-origin: top right;
position: absolute; position: absolute;
right: -3px; right: -.3rem;
top: 110%; top: 110%;
background: #fff; background: #fff;
// width: 25rem; // width: 25rem;
width: 200px; width: 30rem;
opacity: 0; opacity: 0;
transition: all .3s; transition: all .3s;
transform: scale(0.75)translateY(10%); transform: scale(0.75)translateY(10%);
@@ -291,25 +311,32 @@ export default defineComponent({
} }
.habit_title { .habit_title {
h3 { h3 {
font-size: 16px; font-size: 1.6rem;
font-weight: 600; font-weight: 600;
color: #000; color: #000;
margin: 0; margin: 0;
} }
.habit_intro { .habit_intro {
font-size: 12px; font-size: 1.2rem;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
font-weight: 500; font-weight: 500;
} }
} }
.habit_type { .habit_type {
margin-top: 15px; margin-top: 1.5rem;
// cursor: pointer;
button{
cursor: auto;
}
button:hover{
color: rgba(0, 0, 0, 0.5);
}
} }
.habit_Overal_Single { .habit_Overal_Single {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 30px 0; margin: 3rem 0;
.habit_Overal_Single_text { .habit_Overal_Single_text {
font-weight: 600; font-weight: 600;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@@ -317,22 +344,20 @@ export default defineComponent({
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
font-weight: 900; font-weight: 900;
} }
:deep(.ant-switch-checked) {
background-color: #000;
}
} }
:deep(.ant-switch) { :deep(.ant-switch) {
margin: 0 10px; margin: 0 1rem;
} }
} }
.habit_habit_singleton { .habit_habit_singleton {
margin-bottom: 30px; margin-bottom: 3rem;
} }
.habit_System_Designer { .habit_System_Designer {
margin-top: 80px; margin-top: 8rem;
:deep(.ant-slider-track), :deep(.ant-slider-track),
:deep(.ant-slider-rail) { :deep(.ant-slider-rail) {
height: 0.6rem; height: .6rem;
background-color: #e1e1e1; background-color: #e1e1e1;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
@@ -353,18 +378,19 @@ export default defineComponent({
} }
} }
.habit_model{ .habit_model{
margin-top: 20px; margin-top: 2rem;
} }
.habit_model_show{ .habit_model_show{
position: absolute; position: absolute;
background-color: #fff;
border: solid 2px #000; border: solid 2px #000;
border-radius: 10px; border-radius: 1rem;
padding: 20px 20px; padding: 2rem;
bottom: -5px; bottom: -.5rem;
transform: translateY(110%); transform: translateY(110%);
right: -2px; right: -.2rem;
width: 35rem; width: 35rem;
opacity: 0; opacity: 0;
transition: all .3s; transition: all .3s;
@@ -381,7 +407,18 @@ export default defineComponent({
.model_text{ .model_text{
display: flex; display: flex;
:deep(.ant-switch) { :deep(.ant-switch) {
margin: 0 10px; margin: 0 1rem;
}
.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;
}
} }
} }
} }
@@ -404,6 +441,9 @@ export default defineComponent({
border-color: #000 !important; border-color: #000 !important;
box-shadow: none !important; box-shadow: none !important;
} }
:deep(.ant-switch-checked) {
background-color: #000;
}
.habit :deep(.ant-btn) { .habit :deep(.ant-btn) {
box-shadow: none !important; box-shadow: none !important;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@@ -418,7 +458,9 @@ export default defineComponent({
} }
</style> </style>
<style> <style>
.ant-tooltip{
z-index: 1049 !important;
}
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){ .habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
background: #000 !important; background: #000 !important;
} }

324
src/component/HomePage/Generate.vue
View File

@@ -1,89 +1,55 @@
<template> <template>
<div> <div class="generate">
<a-modal class="my_material_modal" <div v-if="msg.cli == 'Sketchboard'" class="generate_checkbox">
v-model:visible="generateShow" <div>
:footer="null" <label>
width="80%" <input type="checkbox" v-model="checkbox.imageOnly">
:maskClosable="false" <span>Image Only</span>
:centered="true" </label>
> </div>
<div class="my_material_header"> <div>
<div class="my_material_title">My Library</div> <label>
<div class="my_material_header_right"> <input type="checkbox" v-model="checkbox.textOnly">
<div class="content_search_block"> <span>Text Only</span>
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()"> </label>
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> </div>
</div> <div>
<label>
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div> <input type="checkbox" v-model="checkbox.textImage">
</div> <span>Text-Image</span>
</div> </label>
</div>
<div class="my_material_content"> </div>
<div class="material_content_top"> <div v-else class="generage_input">
<div class="material_content_top_title"></div> <input class="search_input" placeholder="Promopt input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="material_content_top_right"> <div class="generage_btn started_btn">Generate</div>
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'"> </div>
<a-select <div v-if="msg.cli == 'Sketchboard'" class="generage_img">
ref="select"
v-model:value="designType" </div>
:options="disignTypeList" <div v-else class="generage_img">
placeholder="All" <div class="generage_img_item" v-for="item,index in fileList" :key="item.imgUrl" @click="generageAdd(item)" :class="{active:item?.checked}">
:allowClear="true" <img v-lazy="item.imgUrl" alt="">
@change="handleChange" </div>
> </div>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
</div>
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
<div>all</div>
</div>
</div>
</div>
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
</div>
<div class="content_img_name">{{img.name}}</div>
</div>
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
<img src="@/assets/images/homePage/null_img.png">
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
<div class="table_pagination" v-show="imgList.length">
<a-pagination
v-model:current="currentPage"
v-model:pageSize="pageSize"
:total="total"
:showSizeChanger="false"
:showQuickJumper="true"
@change="changePage"
/>
</div>
</div>
</a-modal>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref} from 'vue' import { defineComponent, ref} from 'vue'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import GO from '@/tool/GO';
export default defineComponent({ export default defineComponent({
setup() { props: ["msg"],
let myMaterialModalShow = ref(false) setup(prop) {
// console.log(prop.msg);
let checkbox={
imageOnly:false,
textOnly:false,
textImage:false,
}
let imgList = ref([]) let imgList = ref([])
let selectImgList:any = ref([]) let selectImgList:any = ref([])
let selectImgListIds:any = ref([]) let selectImgListIds:any = ref([])
@@ -95,36 +61,30 @@ export default defineComponent({
let total = ref(0) let total = ref(0)
let searcMaterialhName:any = ref('') //搜索名字 let searcMaterialhName:any = ref('') //搜索名字
let designType:any = ref(null) let designType:any = ref(null)
let disignTypeList = [ let store = useStore()
{ let fileList = ref([
value: "Outwear", {
label: "Outwear", imgUrl:'https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png',
}, id_:1
{
value: "Blouse", },
label: "Blouse", {
}, imgUrl:'https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png',
{ id_:2
value: "Dress",
label: "Dress", },
}, {
{ imgUrl:'https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png',
value: "Trousers", id_:3
label: "Trousers",
}, },{
{ imgUrl:'https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png',
value: "Skirt", id_:4
label: "Skirt",
}, }
]
let boardList = { ])
Moodboard:'Mood',
Printboard:'Print',
Sketchboard:'Sketch',
MarketingSketch:'MarketingSketch'
}
return{ return{
myMaterialModalShow,
imgList, imgList,
selectImgList, selectImgList,
selectImgListIds, selectImgListIds,
@@ -136,53 +96,26 @@ export default defineComponent({
total, total,
searcMaterialhName, searcMaterialhName,
designType, designType,
disignTypeList, checkbox,
boardList store,
fileList,
} }
}, },
mounted(){
// this.fileList.forEach((item,index)=>{
// item.checked = true
// item.type_ = 'generate'
// item.id_ = GO.id++
// })
// this.store.commit("addGenerateFils", this.fileList);
},
methods:{ methods:{
init(code:any){ generageAdd(data:any){
this.selectCode = code data.type_ = 'generate'
this.myMaterialModalShow = true this.store.commit("addGenerateMaterialFils", data);
this.getLibraryList() },
},
selectImgItem(imgData:any){
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
if(this.selectImgListIds.indexOf(imgData.id) === -1){
this.selectImgList.push(imgData)
this.selectImgListIds.push(imgData.id)
}else{
let index = this.selectImgListIds.indexOf(imgData.id)
this.selectImgList.splice(index,1)
this.selectImgListIds.splice(index,1)
}
},
//改变页码
changePage(current: number, pageSize: number){
this.currentPage = current
this.pageSize = pageSize
this.getLibraryList()
},
handleChange(){
this.getLibraryList()
},
//选择所有的图片
selectAllImg(){
if(this.selectImgListIds.length == this.imgList.length){
this.selectImgListIds = []
this.selectImgList = []
}else{
this.selectImgListIds = this.imgList.map((v:any) => v.id)
this.selectImgList = this.imgList
}
},
getLibraryList(){ getLibraryList(){
let data = { let data = {
level1Type:this.selectCode, level1Type:this.selectCode,
@@ -203,17 +136,8 @@ export default defineComponent({
}); });
}, },
confirmSelect(){
if(!this.selectImgList.length){
message.error('Please select at least one image')
return
}
this.$emit('confirmSelect',this.selectImgList)
this.closeModal()
},
closeModal(){ closeModal(){
this.myMaterialModalShow = false // this.myMaterialModalShow = false
this.searchPictureName = '' this.searchPictureName = ''
this.designType = null this.designType = null
this.selectImgList = [] this.selectImgList = []
@@ -227,8 +151,86 @@ export default defineComponent({
}) })
</script> </script>
<style lang="less"> <style lang="less">
.my_material_modal{ .generate{
height: 30rem;
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
&.generate::-webkit-scrollbar{display: none;}
.generate_checkbox,.generage_input{
display: flex;
align-items: center;
position: sticky;
top: 0;
background: #fff;
padding-top: 2.5rem;
padding-bottom: 2rem;
}
.generate_checkbox{
div{
margin-right: 4rem;
label{
display: flex;
cursor: pointer;
input{
margin-right: .5rem;
padding-left: 1.5rem;
}
span{
font-size: 12px;
font-weight: 500;
}
}
}
}
.generage_input{
input{
font-size: 12px;
padding: .3rem;
border-radius: .5rem;
width: 70%;
border: 1px solid rgba(0,0,0,.15);
&input:-moz-placeholder{
color: rgba(0,0,0,.15);
}
&input:-ms-input-placeholder {
color: rgba(0,0,0,.15);
}
&input::-webkit-input-placeholder {
color: rgba(0,0,0,.15);
}
}
.generage_btn{
margin: 0 auto;
}
}
.generage_img{
display: flex;
flex-wrap: wrap;
.generage_img_item{
cursor: pointer;
margin: 0 2rem 2rem 0;
&.active{
opacity: .5;
// border: 2px solid;
border-radius: 1rem;
img{
transform: scale(.9);
}
}
img{
width: 10rem;
height: 10rem;
}
}
}
}
.my_material_modal{
border-radius: 2rem;
.ant-modal-close{ .ant-modal-close{
width: 3.6rem; width: 3.6rem;
height: 3.6rem; height: 3.6rem;

3
src/component/HomePage/Header.vue
View File

@@ -348,6 +348,9 @@ export default defineComponent({
border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1); border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
position: relative; position: relative;
align-items: center; align-items: center;
z-index: 1049;
background-color: #fff;
.header_right{ .header_right{
display: flex; display: flex;
align-items: center; align-items: center;

182
src/component/HomePage/Material.vue
View File

@@ -1,26 +1,23 @@
<template> <template>
<div> <div class="my_material_modal">
<a-modal class="my_material_modal" <!-- <a-modal class="my_material_modal"
v-model:visible="myMaterialModalShow" v-model:visible="myMaterialModalShow"
:footer="null" :footer="null"
width="80%" width="80%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
> > -->
<div class="my_material_header"> <div class="my_material_header">
<div class="my_material_title">My Library</div>
<div class="my_material_header_right"> <div class="my_material_header_right">
<div class="content_search_block"> <div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()"> <input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div> </div>
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
</div> </div>
</div> </div>
<div class="my_material_content"> <div class="my_material_content">
<div class="material_content_top"> <!-- <div class="material_content_top">
<div class="material_content_top_title"></div> <div class="material_content_top_title"></div>
<div class="material_content_top_right"> <div class="material_content_top_right">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'"> <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
@@ -45,35 +42,22 @@
<div>all</div> <div>all</div>
</div> </div>
</div> </div>
</div> </div> -->
<div class="material_content_body scroll_style"> <div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)"> <div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']"> <div class="content_img_item_block" :class="{active:img?.checked}">
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/> <img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
</div> </div>
<div class="content_img_name">{{img.name}}</div> <!-- <div class="content_img_name">{{img.name}}</div> -->
</div>
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
<img src="@/assets/images/homePage/null_img.png">
</div> </div>
</div> </div>
<div class="no_data_block loading_block" v-show="isShowLoading"> <div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin> <a-spin size="large"></a-spin>
</div> </div>
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
<div class="table_pagination" v-show="imgList.length">
<a-pagination
v-model:current="currentPage"
v-model:pageSize="pageSize"
:total="total"
:showSizeChanger="false"
:showQuickJumper="true"
@change="changePage"
/>
</div>
</div> </div>
</a-modal> <!-- </a-modal> -->
</div> </div>
</template> </template>
@@ -81,12 +65,14 @@
import { defineComponent, ref} from 'vue' import { defineComponent, ref} from 'vue'
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { useStore } from "vuex";
import GO from '@/tool/GO';
export default defineComponent({ export default defineComponent({
setup() { setup() {
let myMaterialModalShow = ref(false) let myMaterialModalShow = ref(false)
let imgList = ref([]) let imgList = ref([])
let selectImgList:any = ref([]) let store = useStore()
let selectImgListIds:any = ref([])
let isShowLoading:any = ref(false) let isShowLoading:any = ref(false)
let selectCode:any = ref('') let selectCode:any = ref('')
let currentPage:any = ref(1) let currentPage:any = ref(1)
@@ -126,8 +112,7 @@ export default defineComponent({
return{ return{
myMaterialModalShow, myMaterialModalShow,
imgList, imgList,
selectImgList, store,
selectImgListIds,
isShowLoading, isShowLoading,
selectCode, selectCode,
currentPage, currentPage,
@@ -144,20 +129,24 @@ export default defineComponent({
init(code:any){ init(code:any){
this.selectCode = code this.selectCode = code
this.myMaterialModalShow = true // this.myMaterialModalShow = true
this.getLibraryList() if(this.imgList.length == 0){
this.getLibraryList()
}
}, },
selectImgItem(imgData:any){ selectImgItem(imgData:any){
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id) // this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
if(this.selectImgListIds.indexOf(imgData.id) === -1){ // if(this.selectImgListIds.indexOf(imgData.id) === -1){
this.selectImgList.push(imgData) // this.selectImgList.push(imgData)
this.selectImgListIds.push(imgData.id) // this.selectImgListIds.push(imgData.id)
}else{ // }else{
let index = this.selectImgListIds.indexOf(imgData.id) // let index = this.selectImgListIds.indexOf(imgData.id)
this.selectImgList.splice(index,1) // this.selectImgList.splice(index,1)
this.selectImgListIds.splice(index,1) // this.selectImgListIds.splice(index,1)
} // }
imgData.type_ = 'material'
this.store.commit("addGenerateMaterialFils", imgData);
}, },
@@ -173,20 +162,12 @@ export default defineComponent({
}, },
//选择所有的图片 //选择所有的图片
selectAllImg(){
if(this.selectImgListIds.length == this.imgList.length){
this.selectImgListIds = []
this.selectImgList = []
}else{
this.selectImgListIds = this.imgList.map((v:any) => v.id)
this.selectImgList = this.imgList
}
},
getLibraryList(){ getLibraryList(){
let data = { let data = {
level1Type:this.selectCode, level1Type:this.selectCode,
level2Type:this.designType, // level2Type:this.designType,
page:this.currentPage, page:this.currentPage,
pictureName:this.searchPictureName, pictureName:this.searchPictureName,
size:this.pageSize, size:this.pageSize,
@@ -194,7 +175,17 @@ export default defineComponent({
this.isShowLoading = true this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then( Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv: any) => { (rv: any) => {
this.imgList = rv.content let aa:any = []
this.imgList = rv.content
rv.content.forEach((item:any) => {
if(!item.id_){
item.id_ = GO.id++
aa.push(item)
}else{
aa.push(item)
}
});
this.imgList = aa
this.total = rv.total this.total = rv.total
this.isShowLoading = false this.isShowLoading = false
} }
@@ -203,21 +194,11 @@ export default defineComponent({
}); });
}, },
confirmSelect(){
if(!this.selectImgList.length){
message.error('Please select at least one image')
return
}
this.$emit('confirmSelect',this.selectImgList)
this.closeModal()
},
closeModal(){ closeModal(){
this.myMaterialModalShow = false this.myMaterialModalShow = false
this.searchPictureName = '' this.searchPictureName = ''
this.designType = null this.designType = null
this.selectImgList = []
this.selectImgListIds = []
this.imgList = [] this.imgList = []
this.currentPage = 1 this.currentPage = 1
this.pageSize = 10 this.pageSize = 10
@@ -228,7 +209,10 @@ export default defineComponent({
</script> </script>
<style lang="less"> <style lang="less">
.my_material_modal{ .my_material_modal{
height: 30rem;
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
&.my_material_modal::-webkit-scrollbar{display: none;}
.ant-modal-close{ .ant-modal-close{
width: 3.6rem; width: 3.6rem;
height: 3.6rem; height: 3.6rem;
@@ -250,20 +234,17 @@ export default defineComponent({
} }
.my_material_header{ .my_material_header{
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 6.6rem; height: auto;
background: #F7F7F7; padding: 0;
padding: 0 3.4rem 0 3.1rem; padding-top: 2.5rem;
padding-bottom: 2rem;
.my_material_title{ background-color: #fff;
font-size: 1.8rem; position: sticky;
color: #030303; top: 0;
font-weight: 500;
}
.my_material_header_right{ .my_material_header_right{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -274,14 +255,16 @@ export default defineComponent({
display: flex; display: flex;
.search_input{ .search_input{
width: 30rem; width: 15rem;
padding-left: 1.5rem; padding-left: 1.5rem;
height: 4rem; // height: 4rem;
line-height: 3.8rem; // line-height: 3.8rem;
background: #FFFFFF; // background: #FFFFFF;
border: 0.1rem solid #F1F1F1; border: 0.1rem solid #F1F1F1;
font-size: 1.6rem; // font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 400; font-weight: 400;
height: 3rem;
&::placeholder { &::placeholder {
color: #C2C2C2; color: #C2C2C2;
@@ -289,9 +272,9 @@ export default defineComponent({
} }
.search_icon_block{ .search_icon_block{
width: 6rem; width: 5rem;
height: 4rem; height: 3rem;
line-height: 4rem; line-height: 3rem;
text-align: center; text-align: center;
background: #343579; background: #343579;
cursor: pointer; cursor: pointer;
@@ -314,7 +297,8 @@ export default defineComponent({
} }
.my_material_content{ .my_material_content{
padding: 0 3rem 3.5rem 3rem; // padding: 0 3rem 3.5rem 3rem;
padding: 0;
height: calc(100% - 6.6rem); height: calc(100% - 6.6rem);
position: relative; position: relative;
@@ -377,28 +361,38 @@ export default defineComponent({
.material_content_body{ .material_content_body{
width: 100%; width: 100%;
height: calc(100% - 19rem); // height: calc(100% - 19rem);
height: 100%;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
&.generate::-webkit-scrollbar{display: none;}
.content_img_item{ .content_img_item{
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding: 0 1.4rem; // padding: 0 1.4rem;
margin-bottom: 2.8rem; // margin-bottom: 2.8rem;
margin: 0 2rem 2rem 0;
padding: 0;
.content_img_item_block{ .content_img_item_block{
border: 0.1rem solid transparent; // border: 0.1rem solid transparent;
width: 16.5rem; width: 10rem;
height: 16.5rem; height: 10rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&.active{
opacity: .5;
img{
transform: scale(.9);
}
}
&.select_item_img{ &.select_item_img{
border-color: #343579; // border-color: #343579;
} }
.print_content_img{ .print_content_img{

919
src/component/HomePage/MoodboardUpload.vue
View File

@@ -1,425 +1,642 @@
<template> <template>
<div class="collection_modal_item"> <div class="collection_modal_item">
<div class="switch_type_list"> <div class="modal_left">
<div class="switch_type_item select_swtich"> <div class="switch_type_list">
<span>Upload</span> <div
@click="open(1)"
class="switch_type_item"
:class="[openClick == 1 ? 'select_swtich' : '']"
>
<span>Upload</span>
</div>
<div
@click="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
</div>
<div
@click="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>Generate</span>
</div>
</div> </div>
<div @click="openLibrary()" class="switch_type_item"> <div v-show="openClick == 1" class="moodboard_body">
<span>My Library</span> <div class="upload_img_body scroll_style">
</div> <div class="upload_item">
<div @click="openLibrary()" class="switch_type_item"> <div
<span>Generate</span> class="upload_file_item"
</div> v-for="(file, index) in fileList"
<div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div> :key="file"
</div> >
<div
<div class="moodboard_body"> class="upload_file_item_content"
<div class="upload_img_body scroll_style" > v-show="file?.status === 'uploading'"
<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(index)">Delete</div>
</div>
</div>
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:before-upload="beforeUpload"
multiple
:maxCount="10"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file)=>fileUploadChange(file)"
> >
<div class="upload_tip_block" v-show="fileList.length < 10"> <a-spin
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> :indicator="indicator"
tip="Uploading..."
/>
</div> </div>
</a-upload> <div
</div> class="upload_file_item_content"
v-show="file?.status === 'done'"
</div> >
</div> <img :src="file?.imgUrl" class="upload_img" />
<div class="upload_max_tip"> <div
<span class="icon iconfont icon-zhuyi"></span> class="delete_file_block"
<span>Maximum 10 images can be uploaded, Maximum 2M per image</span> @click="deleteFile(file)"
</div> >
</div> Delete
</div>
<Material ref="Material" @confirmSelect="confirmSelect"></Material> </div>
</div>
<a-modal class="moodboard_template_modal" <div
v-model:visible="templateModal" class="upload_file_item upload_component"
:footer="null" v-show="moodboarList.length != 8"
width="47rem" >
:maskClosable="false" <a-upload
:centered="true" :action="uploadUrl + '/api/element/upload'"
:closable="false" list-type="picture-card"
> :data="{
<div class="moodboard_template_content"> ...upload,
<div class="moodboard_template_header"> }"
<div class="moodboard_template_title">MoodBoard Design</div> :headers="{ Authorization: token }"
<div class="icon iconfont icon-guanbi close_icon" @click.stop="changeTemplateModal()"></div> v-model:file-list="fileList"
</div> :before-upload="beforeUpload"
<div class="moodboard_template_block"> multiple
<div class="moodboard_template_info"> :maxCount="8 - moodboarList.length+fileList.length"
<MoodTemplate :fileList="this.templateFileList" :moodTemplateId="moodTemplateId"></MoodTemplate> accept=".jpg,.png,.jpeg,.bmp"
<div class="moodboard_template_refetch_content"> @change="(file) => fileUploadChange(file)"
<div class="button_second" @click="refetchTemplate()">Re-fetch</div> >
<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>
</div> </div>
<div class="button_second submit_button" @click="submitTemplate()">Submit</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> </div>
<Material
v-show="openClick == 2"
</a-modal> ref="Material"
@confirmSelect="confirmSelect"
></Material>
<Generate
v-show="openClick == 3"
ref="Generate"
:msg="sonData"
></Generate>
</div>
<div v-show="moodboarList.length" class="modal_right">
<div class="modal_layout">
<div class="modal_text">
<div>Thumbnail preview of selected moodboard</div>
<div class="modal_btn started_btn" @click="layout()">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">
<div class="modal_text">
<div>Layout of selected moodboard</div>
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
</div>
<div class="modal_img" :class="{active:flex_direction}">
<!-- <div v-for="item,index in moodb_className" :class="[item]" class="modal_imgItem">
<img :src="moodboarList[index].imgUrl">
</div> -->
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
<img :src="item.imgUrl">
</div>
</div>
</div>
</div>
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, h, ref ,computed} from "vue";
import { defineComponent, h,ref } from 'vue' import { LoadingOutlined } from "@ant-design/icons-vue";
import { LoadingOutlined } from '@ant-design/icons-vue'; import { getCookie } from "@/tool/cookie";
import {getCookie} from '@/tool/cookie' import { getUploadUrl } from "@/tool/util";
import {getUploadUrl} from '@/tool/util' import { useStore } from "vuex";
import {useStore} from 'vuex' import { message, Upload } from "ant-design-vue";
import { message, Upload } from 'ant-design-vue'; import Material from "@/component/HomePage/Material.vue";
import Material from '@/component/HomePage/Material.vue' import Generate from "@/component/HomePage/Generate.vue";
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue' import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
import layout from "@/component/HomePage/layout.vue";
import GO from "@/tool/GO";
import moodb from "@/tool/moodb";
export default defineComponent({ export default defineComponent({
components:{Material,MoodTemplate}, components: { Material, MoodTemplate, Generate,layout },
setup(){ setup() {
let fileList:any = ref([]) let lessenList: any = ref([]);
let templateModal:any = ref(false) let fileList: any = ref([]);
let templateFileList: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
return { return {
fileList, fileList,
lessenList,
templateModal, templateModal,
templateFileList templateFileList,
} openClick,
moodb_className,
flex_direction,
layoutList,
};
}, },
data(){ data() {
return{ return {
indicator : h(LoadingOutlined, { indicator: h(LoadingOutlined, {
style: { style: {
fontSize: '2.4rem', fontSize: "2.4rem",
}, },
spin: true, spin: true,
}), }),
upload:{ upload: {
isPin:0, isPin: 0,
level1Type:'Moodboard', level1Type: "Moodboard",
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}, },
token:'', token: "",
uploadUrl:'', uploadUrl: "",
moodTemplateId:'',//模板id moodTemplateId: "", //模板id
store:useStore() store: useStore(),
} sonData: {
cli: "Moodboard",
},
moodb_:moodb.moodb_,
moodboarList:computed(()=>{
return [...useStore().state.UploadFilesModule.moodboardFiles,
...useStore().state.UploadFilesModule.generateFiles,
...useStore().state.UploadFilesModule.MaterialFiles]
}),
};
}, },
mounted(){ // watcheffect(){
this.token = getCookie('token') || '' // let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
this.uploadUrl = getUploadUrl() // (v: any) => v.checked == true
// );
// this.store.commit("setMoodboardFile", breviaryList);
// console.log(22);
// },
mounted() {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
}, },
methods:{ methods: {
openLibrary(){ open(num: Number) {
let material:any = this.$refs.Material this.openClick = num;
material.init('Moodboard') if(num ==2 ){
let material:any = this.$refs.Material
material.init('Moodboard')
}else if (num == 3){
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
}
}, },
fileUploadChange(data:any){ fileUploadChange(data: any) {
let file = data.file let file = data.file;
if(file.status === 'done'){ if (file.status === "done") {
let res = JSON.parse(file.xhr.response) let res = JSON.parse(file.xhr.response);
file.imgUrl = res.data.url file.imgUrl = res.data.url;
file.resData = res.data file.resData = res.data;
let fileList = this.fileList.filter((v:any)=> v.status === 'done') file.type_ = 'upload';
this.store.commit('setMoodboardFile',fileList) file.id_ = GO.id++
this.store.commit('clearMoodTemplateId') let fileList = this.fileList.filter(
}else if(file.status === 'error'){ (v: any) => v.status === "done"
let index = -1 );
this.fileList.forEach((ele:any,index1:any) => { let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
if(file.uid === ele.uid){ if(arr.length >= 8){
index = index1 message.error('You can select up to 8 images')
}else{
this.store.commit("setMoodboardFile", fileList);
this.store.commit("clearMoodTemplateId");
}
} else if (file.status === "error") {
let index = -1;
this.fileList.forEach((ele: any, index1: any) => {
if (file.uid === ele.uid) {
index = index1;
} }
}); });
if(index > -1){ if (index > -1) {
this.fileList.splice(index, 1) this.fileList.splice(index, 1);
} }
message.error(file.name + 'upload failed') message.error(file.name + "upload failed");
} }
},
beforeUpload(file:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.error('You can only upload Image file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 5MB!');
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}, },
confirmSelect(event:any){
deleteFile(index:any){
this.fileList.splice(index, 1)
this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId')
},
recollection(){
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.moodboardFiles))
let moodTemplateId = this.store.state.UploadFilesModule.allBoardData.moodTemplateId
this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('setMoodTemplateId',moodTemplateId)
},
confirmSelect(event:any){
for(let item of event){ for(let item of event){
let data = { let data = {
imgUrl:item.url, imgUrl:item.url,
resData:item, resData:item,
status:'done', status:'done',
} }
if(this.fileList.length == 10){ if(this.fileList.length == 8){
message.error('Maximum number of allowable file uploads has been exceeded') message.error('Maximum number of allowable file uploads has been exceeded')
break break
} }else{
this.fileList.push(data) this.fileList.push(data)
}
} }
this.store.commit('setMoodboardFile',this.fileList) this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId') this.store.commit('clearMoodTemplateId')
}, },
beforeUpload(file: any) {
changeTemplateModal(){ const isJpgOrPng =
this.templateModal = !this.templateModal file.type === "image/jpeg" ||
if(this.templateModal){ file.type === "image/png" ||
this.templateFileList = this.fileList.map((v:any)=>{ file.type === "image/jpg" ||
let data = { file.type === "image/bmp";
...v, if (!isJpgOrPng) {
imgUrl:v.imgUrl.replace(/\s/g, encodeURIComponent(' ')) message.error("You can only upload Image file!");
}
return data
})
this.moodTemplateId = this.store.state.UploadFilesModule.moodTemplateId || this.templateFileList.length
} }
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("Image must smaller than 5MB!");
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
}, },
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值 deleteFile(item: any) {
let index = Math.floor(Math.random() * (max - min)) + min; if(item.type_ == 'generate' || item.type_ == 'material'){
while(index === num){ this.store.commit("addGenerateMaterialFils", item);
index = Math.floor(Math.random() * (max - min)) + min;
} }else{
return index 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);
}
this.store.commit("clearMoodTemplateId");
},
recollection() {
this.fileList = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
);
let moodTemplateId =
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
this.store.commit("setMoodboardFile", this.fileList);
this.store.commit("setMoodTemplateId", moodTemplateId);
}, },
//随机重置图片顺序 changeTemplateModal() {
refetchTemplate(){ let layout:any = this.$refs.layout
let arr= Array.from({length:this.templateFileList.length}) // layout.init('moodboard')
for(let item of this.templateFileList){ layout.init()
let index = this.randomRange(0,this.templateFileList.length,-1)
while(arr[index]){
index = this.randomRange(0,this.templateFileList.length,-1)
}
arr[index] = item
}
this.templateFileList = arr
}, },
layout(){
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
console.log(moodb.filter((item,index)=> item == 'w2h1'));
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
this.moodb_className = this.moodb_[arr.length-1][random]
},
setmoodbClass(val:any){
this.moodb_className = val
}
// randomRange(min: any, max: any, num: any) {
// // min最小值，max最大值 num排除的值
// let index = Math.floor(Math.random() * (max - min)) + min;
// while (index === num) {
// index = Math.floor(Math.random() * (max - min)) + min;
// }
// return index;
// },
//提交模板 // //随机重置图片顺序
submitTemplate(){ // refetchTemplate() {
this.fileList = JSON.parse(JSON.stringify(this.templateFileList)) // let arr = Array.from({ length: this.templateFileList.length });
this.store.commit('setMoodboardFile',this.fileList) // for (let item of this.templateFileList) {
this.store.commit('setMoodTemplateId',this.moodTemplateId) // let index = this.randomRange(
this.changeTemplateModal() // 0,
} // this.templateFileList.length,
} // -1
}) // );
// while (arr[index]) {
// index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// }
// arr[index] = item;
// }
// this.templateFileList = arr;
// },
// //提交模板
// submitTemplate() {
// // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
// // this.store.commit("setMoodboardFile", this.fileList);
// // this.store.commit("setMoodTemplateId", this.moodTemplateId);
// // this.changeTemplateModal();
// },
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.collection_modal_item{ .collection_modal_item {
padding: 1.5rem 2.6rem 4rem; // padding: 1.5rem 2.6rem 4rem;
height: 100%; height: 100%;
display: flex;
.switch_type_list{ .modal_left {
display: flex; padding-top: 4rem;
align-items: center; width: 47%;
position: relative; // width: 50rem;
.switch_type_list {
.switch_type_item{
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 2rem; position: relative;
height: 4rem;
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
margin-right: 2.2rem;
color: #5B5E69;
cursor: pointer;
&.select_swtich{ .switch_type_item {
color: #343579; display: flex;
} align-items: center;
// padding: 0 2rem;
height: 4rem;
background: #fff;
border-radius: 0.8rem;
line-height: 4rem;
font-size: 1.6rem;
// margin-right: 2.2rem;
margin-right: 8rem;
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: 3px;
left: 50%;
transform: translateX(-50%);
bottom: 6px;
width: 0px;
transition: 0.3s all;
}
&.select_swtich {
color: #000;
// font-weight: 900;
transform: scale(1.15);
}
&.select_swtich::before {
width: 100%;
}
.switch_icon{ .switch_icon {
font-size: 1.8rem; font-size: 1.8rem;
margin-right: 0.8rem; margin-right: 0.8rem;
}
} }
} }
.design_template_button{ .moodboard_body {
background: #E6E6F6; height: calc(100% - 5rem);
padding: 0 2.7rem; padding-top: 2.5rem;
font-size: 1.4rem; height: 30rem;
height: 3.2rem; overflow-x: hidden;
line-height: 3.2rem; border-right: 1px solid #e5e5e5;
cursor: pointer; &.moodboard_body::-webkit-scrollbar {
color: #343579; display: none;
position: absolute; }
right: 0; .upload_img_body {
top: 0; height: calc(100% - 3rem);
} overflow-y: auto;
margin-bottom: 1rem;
}
.moodboard_body{
margin-top: 1rem;
height: calc(100% - 5rem);
.upload_img_body{
height: calc(100% - 3rem);
overflow-y: auto;
margin-bottom: 1rem;
}
.upload_file_item{
margin: 0 2rem 2rem 0;
display: inline-block;
width: 16.5rem;
height: 16.5rem;
border: 1px solid #F5F5F5;
vertical-align: top;
&.upload_component{
border: none;
} }
.upload_file_item_content{ .upload_file_item {
margin: 0 2rem 2rem 0;
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: 10rem;
height: 10rem;
border: 1px solid #f5f5f5;
vertical-align: top;
position: relative;
&.upload_component {
border: none;
}
:deep(.ant-upload-picture-card-wrapper) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
:deep(.ant-upload-select-picture-card) {
width: 6rem;
height: 6rem;
border: 0.3rem solid #ededed;
border-radius: 10px;
margin: 0;
}
.upload_file_item_content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
&:hover .delete_file_block {
display: block;
}
.upload_img {
display: block;
height: 100%;
width: 100%;
}
.delete_file_block {
display: none;
width: 100%;
cursor: pointer;
height: 3rem;
background: rgba(0, 0, 0, 0.2);
font-size: 1.6rem;
color: #ffffff;
line-height: 3rem;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
}
}
.upload_img_icon {
width: 4.6rem;
}
}
.upload_max_tip {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; font-size: 1.4rem;
width: 100%;
position: relative;
&:hover .delete_file_block{
display: block;
}
.upload_img{
display: block;
height: 100%;
width: 100%;
}
.delete_file_block{
display: none;
width: 100%;
cursor: pointer;
height: 4rem;
background: rgba(0,0,0,0.2);
font-size: 1.6rem;
color: #FFFFFF;
line-height: 4rem;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
}
}
.upload_img_icon{
width: 4.6rem;
}
}
.upload_max_tip{
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #030303;
.icon-zhuyi{
font-size: 1.6rem;
margin-right: 0.7rem;
}
}
}
}
</style>
<style lang="less">
.moodboard_template_modal{
.ant-modal-body{
padding: 0;
}
.moodboard_template_content{
background: #F2F3FB;
padding-bottom: 2.9rem;
.moodboard_template_header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem 0 2.5rem;
height: 6.6rem;
.moodboard_template_title{
font-size: 1.8rem;
font-weight: 500;
color: #030303; color: #030303;
}
.close_icon{ .icon-zhuyi {
font-size: 1.8rem; font-size: 1.6rem;
color: #AEB2B7; margin-right: 0.7rem;
cursor: pointer;
}
}
.moodboard_template_block{
padding: 0 3.1rem 0;
.moodboard_template_info{
background: #fff;
.moodboard_template_refetch_content{
padding: 3.1rem 0 2rem;
.button_second{
margin: 0 auto;
}
} }
} }
} }
.submit_button{
margin: 2rem auto 0;
}
} }
.modal_right{
flex: 1;
margin-left: 3rem;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
}
}
.modal_layout{
.modal_img{
width: 40rem;
height: 5rem;
overflow-x: hidden;
display: flex;
&.modal_img::-webkit-scrollbar {
display: none;
}
.modal_img_item{
width: 4rem;
height: 4rem;
margin: 0 1rem 1rem 0;
position: relative;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
.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;
height: 30rem;
display: flex;
flex-direction: column;
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
}
.modal_img{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
&.active{
flex-direction: row;
}
.modal_imgItem{
position: relative;
img{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
}
}
}
} }
</style> </style>

46
src/component/HomePage/PrintboardUpload.vue
View File

@@ -4,12 +4,27 @@
<div class="left_upload_header"> <div class="left_upload_header">
<div class="upload_header_item"> <div class="upload_header_item">
<div class="switch_type_list"> <div class="switch_type_list">
<div class="switch_type_item select_swtich"> <div
<span>Upload</span> @click="open(1)"
</div> class="switch_type_item"
<div @click="openLibrary()" class="switch_type_item"> :class="[openClick == 1 ? 'select_swtich' : '']"
<span>My Library</span> >
</div> <span>Upload</span>
</div>
<div
@click="open(2)"
class="switch_type_item"
:class="[openClick == 2 ? 'select_swtich' : '']"
>
<span>Library</span>
</div>
<div
@click="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>Generate</span>
</div>
</div> </div>
</div> </div>
<div class="upload_header_item"> <div class="upload_header_item">
@@ -17,7 +32,7 @@
<div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div> <div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
</div> </div>
</div> </div>
<div class="printboard_body"> <div v-show="openClick == 1" class="printboard_body">
<div class="upload_img_body"> <div class="upload_img_body">
<div class="upload_item"> <div class="upload_item">
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file"> <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
@@ -65,6 +80,8 @@
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span> <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
</div> </div>
</div> </div>
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
</div> </div>
<div class="generate_print"> <div class="generate_print">
<div class="generate_print_header"> <div class="generate_print_header">
@@ -88,7 +105,6 @@
</div> </div>
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -101,20 +117,24 @@ import { Https } from "@/tool/https";
import { message,Upload} from 'ant-design-vue'; import { message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue' import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue' import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
export default defineComponent({ export default defineComponent({
components:{ components:{
Cropper, Cropper,
Material Material,
Generate
}, },
setup(){ setup(){
let store:any =useStore() let store:any =useStore()
let fileList:any = ref([]),//选中的文件id数据 let fileList:any = ref([]),//选中的文件id数据
printImgList:any = ref([]), //print的印花图片 printImgList:any = ref([]), //print的印花图片
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles}) moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
let openClick: any = ref(1);
return { return {
fileList, fileList,
printImgList, printImgList,
moodBoards moodBoards,
openClick
} }
}, },
computed:{ computed:{
@@ -150,6 +170,9 @@ export default defineComponent({
currentFileNum:0, //当前上传的文件数 currentFileNum:0, //当前上传的文件数
isUpload:false, isUpload:false,
generateloading:false, generateloading:false,
sonData: {
cli: "Printboard",
},
} }
}, },
@@ -158,6 +181,9 @@ export default defineComponent({
this.uploadUrl = getUploadUrl() this.uploadUrl = getUploadUrl()
}, },
methods:{ methods:{
open(num: Number) {
this.openClick = num;
},
openLibrary(){ openLibrary(){
let material:any = this.$refs.Material let material:any = this.$refs.Material
material.init('Printboard') material.init('Printboard')

102
src/component/HomePage/RobotAssist.vue
View File

@@ -80,26 +80,6 @@ export default defineComponent({
this.textScroll() this.textScroll()
let userInfo:any = getCookie("userInfo") let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo); this.userInfo = JSON.parse(userInfo);
console.log(22);
const data = {
"user_id": "83",
"session_id": "",
"message": "Hello, can you tell me what holiday is on July 1st",
};
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
// console.log(11);
// num = progressEvent.event.currentTarget.response
console.log(progressEvent);
},
}).then((res)=>{
console.log(res);
}).catch((response) => {
console.log(response);
// var res = http.responseText
});
}, },
directives:{ directives:{
fade:{ fade:{
@@ -168,46 +148,33 @@ const data = {
"session_id":"" "session_id":""
} }
console.log(getCookie('token'));
let interaction = {onDownloadProgress: (progressEvent:any) => { let interaction = {onDownloadProgress: (progressEvent:any) => {
this.clearTimer() this.clearTimer()
console.log(progressEvent); console.log(progressEvent.event.currentTarget.response);
if(a){ // if(a){
this.dialogue.push({ // this.dialogue.push({
state:1, // state:1,
// str:progressEvent.event.currentTarget.response // str:progressEvent.event.currentTarget.response
}) // })
a = false // a = false
}else{ // }else{
this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response // this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
} // }
}, },
} }
// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then( Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
// (rv: any) => { (rv: any) => {
// a = true a = true
// this.createTimer() this.createTimer()
// } }
// ).catch(res=>{ ).catch(res=>{
// this.createTimer() this.createTimer()
// }); });
// new Promise((resolve, reject) => { // new Promise((resolve, reject) => {
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
// console.log(11);
// num = progressEvent.event.currentTarget.response
console.log(progressEvent);
},
}).then((res)=>{
console.log(res);
}).catch((response) => {
console.log(response);
// var res = http.responseText
});
// axios.post("/api/python/chatStream", data,{ // axios.post("/api/python/chatStream", data,{
// onDownloadProgress: (progressEvent:any) => { // onDownloadProgress: (progressEvent:any) => {
@@ -233,7 +200,7 @@ const data = {
// }) // })
// }); // });
this.chatCentent = "" this.chatCentent = ""
this.textScroll() this.textScroll()
@@ -266,15 +233,17 @@ const data = {
<style lang="less" scoped> <style lang="less" scoped>
.robot{ .robot{
position: absolute; position: absolute;
bottom: 25px; bottom: .5rem;
right: 50px; // bottom: 2.5rem;
right: 2.5rem;
// right: 5rem;
z-index: 9999; z-index: 9999;
// width: 400px; // width: 400px;
.robot_top{ .robot_top{
// width: 70%; // width: 70%;
width: 250px; width: 25rem;
margin-left: auto; margin-left: auto;
height: 140px; height: 14rem;
overflow-x: hidden; overflow-x: hidden;
transition: .3s all; transition: .3s all;
opacity: 0; opacity: 0;
@@ -284,15 +253,15 @@ const data = {
} }
&.robot_top::-webkit-scrollbar{display: none;} &.robot_top::-webkit-scrollbar{display: none;}
.robot_text{ .robot_text{
font-size: 14px; font-size: 1.4rem;
padding: 5px 10px; padding: .5rem 1rem;
display: inline-block; display: inline-block;
border-radius: 20px; border-radius: 2rem;
max-width: 80%; max-width: 80%;
} }
.text_left,.text_right{ .text_left,.text_right{
margin: 20px 0; margin: 2rem 0;
font-size: 12px; font-size: 1.2rem;
} }
.text_left{ .text_left{
display: flex; display: flex;
@@ -327,14 +296,14 @@ const data = {
transition: .3s all; transition: .3s all;
opacity: 0; opacity: 0;
display: none; display: none;
margin-right: 40px; margin-right: 4rem;
&.active{ &.active{
opacity: 1; opacity: 1;
} }
input{ input{
border: none; border: none;
font-size: 12px; font-size: 1.2rem;
width: 250px; width: 25rem;
} }
.robot_btn{ .robot_btn{
display: flex; display: flex;
@@ -352,8 +321,7 @@ const data = {
.robot_img{ .robot_img{
margin-left: auto; margin-left: auto;
img{ img{
width: 100px; width: 8rem;
width: 80px;
// margin-left: 40px; // margin-left: 40px;
cursor: pointer; cursor: pointer;

378
src/component/HomePage/Upload.vue Normal file
View File

@@ -0,0 +1,378 @@
<template>
<div 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(index)">Delete</div>
</div>
</div>
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="fileList"
:before-upload="beforeUpload"
multiple
:maxCount="10"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file)=>fileUploadChange(file)"
>
<div class="upload_tip_block" v-show="fileList.length < 10">
<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>Maximum 10 images can be uploaded, Maximum 2M per image</span>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, h} from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import {getUploadUrl} from '@/tool/util'
import {getCookie} from '@/tool/cookie'
import { message, Upload } from 'ant-design-vue';
import {useStore} from 'vuex'
export default defineComponent({
props: ["msg"],
setup(prop) {
console.log(prop.msg);
let fileList:any = ref([])
return{
fileList
}
},
data(){
return{
indicator : h(LoadingOutlined, {
style: {
fontSize: '2.4rem',
},
spin: true,
}),
uploadUrl:'',
upload:{
isPin:0,
level1Type:'Moodboard',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token:'',
store:useStore(),
}
},
mounted(){
this.token = getCookie('token') || ''
this.uploadUrl = getUploadUrl()
},
methods:{
beforeUpload(file:any){
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
if (!isJpgOrPng) {
message.error('You can only upload Image file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('Image must smaller than 5MB!');
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
fileUploadChange(data:any){
let file = data.file
if(file.status === 'done'){
let res = JSON.parse(file.xhr.response)
file.imgUrl = res.data.url
file.resData = res.data
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
this.store.commit('setMoodboardFile',fileList)
this.store.commit('clearMoodTemplateId')
}else if(file.status === 'error'){
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.error(file.name + 'upload failed')
}
},
deleteFile(index:any){
this.fileList.splice(index, 1)
this.store.commit('setMoodboardFile',this.fileList)
this.store.commit('clearMoodTemplateId')
},
}
})
</script>
<style lang="less">
.generate{
// background: #030303;
border-radius: 20px;
overflow: hidden;
}
.my_material_modal{
border-radius: 2rem;
.ant-modal-close{
width: 3.6rem;
height: 3.6rem;
position: absolute;
top: -1.8rem;
right: -1.8rem;
}
.ant-modal-header{
display: none;
}
.ant-modal-body{
background: #F2F3FB;
height: 80vh;
min-height: 72rem;
overflow-y: hidden;
padding: 0;
}
.my_material_header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 6.6rem;
background: #F7F7F7;
padding: 0 3.4rem 0 3.1rem;
.my_material_title{
font-size: 1.8rem;
color: #030303;
font-weight: 500;
}
.my_material_header_right{
display: flex;
justify-content: space-between;
align-items: center;
.content_search_block{
margin-right: 5rem;
display: flex;
.search_input{
width: 30rem;
padding-left: 1.5rem;
height: 4rem;
line-height: 3.8rem;
background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
font-size: 1.6rem;
font-weight: 400;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 6rem;
height: 4rem;
line-height: 4rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
.icon_close{
color: rgba(174, 178, 183, 1);
font-size: 2.4rem;
cursor: pointer;
}
}
}
.my_material_content{
padding: 0 3rem 3.5rem 3rem;
height: calc(100% - 6.6rem);
position: relative;
.material_content_top{
padding: 1.3rem 0 2.1rem;
height: 7rem;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.material_content_top_title{
font-size: 20px;
color: #030303;
}
.material_content_top_right{
display: flex;
align-items: center;
.select_block{
background: #FFFFFF;
color: #1A1A1A !important;
margin-right: 2.3rem;
.icon-xiala{
color: #1A1A1A !important;
}
}
.check_all_block{
display: flex;
align-items: center;
font-size: 1.6rem;
color: #64686D;
cursor: pointer;
&.check_all{
color: #1A1A1A;
}
.check_block{
width: 2.4rem;
height: 2.4rem;
background: #EBECF4;
border: 0.1rem solid #64686D;
padding: 0.3rem;
margin-right: 0.7rem;
.check_block_body{
width: 100%;
height: 100%;
background: #343579;
}
}
}
}
}
.material_content_body{
width: 100%;
height: calc(100% - 19rem);
overflow-y: auto;
position: relative;
.content_img_item{
display: inline-block;
vertical-align: top;
padding: 0 1.4rem;
margin-bottom: 2.8rem;
.content_img_item_block{
border: 0.1rem solid transparent;
width: 16.5rem;
height: 16.5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.select_item_img{
border-color: #343579;
}
.print_content_img{
width: 100%;
height: 100%;
}
.content_img{
max-width: 100%;
max-height: 100%;
}
}
.content_img_name{
width: 16.5rem;
height: 3.5rem;
line-height: 3.5rem;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.4rem;
color: #030303;
}
}
}
.no_data_block{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
&.loading_block{
background: rgba(0,0,0,0.2);
}
}
.material_confirm{
width: 9.8rem;
height: 3.6rem;
line-height: 3.6rem;
font-size: 1.4rem;
text-align: center;
margin: 0 auto;
color: #FFFFFF;
background: #343579;
cursor: pointer;
margin-top: 2rem;
}
.table_pagination{
position: absolute;
bottom: 3.5rem;
left: 0;
width: 100%;
text-align: center;
margin-top: 5rem;
}
}
}
</style>

129
src/component/HomePage/collectionModal.vue
View File

@@ -6,21 +6,37 @@
width="80%" width="80%"
:maskClosable="false" :maskClosable="false"
:centered="true" :centered="true"
:closable="false"
> >
<template #title> <div class="collection_title">
<div v-show="collectionStep === 1">Moodboard</div> <div class="collection_title_text">
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div> <div v-show="collectionStep === 1">Moodboard</div>
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div> <div v-show="collectionStep === 2">Printboard</div>
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div> <div v-show="collectionStep === 3">Colorboard</div>
<div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div> <div v-show="collectionStep === 4">Sketchboard</div>
</template> <div v-show="collectionStep === 5">Markets Sketch</div>
<template #closeIcon> <div class="collection_title_text_intro">select moodboard for your collection</div>
<div class="header_right_block" @click.stop=""> </div>
<div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> <div>
<div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> <a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
<div class="header_cancel_button" @click.stop="cancelDsign()">Cancel</div> </div>
</div>
</template> </div>
<div class="collection_closeIcon" @click.stop="cancelDsign()">
<!-- <div class="header_right_block" @click.stop="">
<div class="header_cancel_button" >Cancel</div>
</div> -->
<i class="fi fi-rr-cross-small"></i>
</div>
<div class="collection_page">
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
<i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
</div>
<div class="collection_modal_body"> <div class="collection_modal_body">
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload> <MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload> <PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
@@ -34,6 +50,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent ,createVNode } from 'vue' import { defineComponent ,createVNode } from 'vue'
import Generate from '@/component/HomePage/Generate.vue'
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue' import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue' import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue' import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
@@ -44,6 +62,7 @@ import { Modal,message } from 'ant-design-vue';
import {useStore} from 'vuex' import {useStore} from 'vuex'
export default defineComponent({ export default defineComponent({
components:{ components:{
Generate,
MoodboardUpload, MoodboardUpload,
PrintboardUpload, PrintboardUpload,
ColorboardUpload, ColorboardUpload,
@@ -89,6 +108,7 @@ export default defineComponent({
icon: createVNode(ExclamationCircleOutlined), icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes', okText: 'Yes',
cancelText: 'No', cancelText: 'No',
mask:false,
// centered:true, // centered:true,
onOk() { onOk() {
_this.showCollectionModal = false _this.showCollectionModal = false
@@ -114,6 +134,70 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.collection_modal{ .collection_modal{
// max-width: 120rem;
.collection_title,.collection_closeIcon,.collection_page{
position: absolute;
}
.collection_title{
top: 4rem;
display: flex;
font-size: 1.8rem;
font-weight: 900;
color: rgba(0,0,0,.65);
align-items: center;
.collection_title_text{
margin-right: 4rem;
}
.collection_title_text_intro{
font-size: 1.2rem;
font-weight: 400;
color: rgba(0,0,0,.45);
}
}
.collection_closeIcon{
top: 2rem;
right: 2rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
.fi-rr-cross-small::before{
padding: .2rem;
border-radius: 5px;
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
color: rgba(0, 0, 0, 0.55);
}
&.collection_closeIcon:hover .fi-rr-cross-small::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.collection_page{
left: 50%;
transform: translateX(-50%);
bottom: 3rem;
.fi-rr-arrow-small-left{
margin-right: 10rem;
}
.fi{
cursor: pointer;
}
.fi::before{
padding: 5px;
border-radius: 50%;
color: rgba(0, 0, 0, 0.55);
border: solid 2px rgba(0, 0, 0, 0.25);
transition: 1s all;
}
.fi:hover.fi::before{
border: solid 2px rgba(0, 0, 0, 0.55);
color: rgba(0, 0, 0, 1);
}
}
.header_icon_fanhui{ .header_icon_fanhui{
margin-right: 1rem; margin-right: 1rem;
font-size: 2rem; font-size: 2rem;
@@ -155,3 +239,20 @@ export default defineComponent({
} }
} }
</style> </style>
<style lang="less">
.collection_modal{
max-width: 1200px ;
.ant-modal-content{
border-radius: 10px;
overflow: hidden;
.ant-modal-header{
background-color: #fff;
border-bottom: none;
}
.ant-modal-body{
padding: 8rem 5rem !important;
height: calc(60vh - 6.4rem);
}
}
}
</style>

394
src/component/HomePage/layout.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<div>
<a-modal
class="layout_modal"
v-model:visible="layout"
:footer="null"
width="47rem"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="false"
>
<div class="layout_content">
<div class="layout_header">
<div class="layout_title">MoodBoard Design</div>
<div
class="icon iconfont icon-guanbi close_icon"
@click.stop="init()"
></div>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}">
<!-- <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
<img :src="item.imgUrl">
</div> -->
<draggable
v-model="layoutList"
group="people"
@start="drag=true"
@end="drag=false"
animation= "150"
item-key="id">
<template #item="{element,index}">
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
<img :src="element.imgUrl">
</div>
</template>
</draggable>
<!-- <div v-for="item,index in moodb_className" :class="item" class="modal_imgItem">
<img :src="layoutList[index].imgUrl" alt="">
</div> -->
</div>
<div class="layout_left">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
</div>
</div>
</div>
<div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
</div>
</div>
</div>
<div
class="button_second submit_button"
@click="submitTemplate()"
>
Submit
</div>
</div>
</a-modal>
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import moodb from "@/tool/moodb";
import draggable from 'vuedraggable'
export default defineComponent({
props:["moodb_className",'flex_direction'],
components: {
draggable
},
setup(prop) {
let fileList: any = ref([]);
let layout: any = ref(false);
let templateFileList: any = ref([]);
let openClick: any = ref(1);
let drag = false;
return {
fileList,
layout,
templateFileList,
openClick,
drag,
};
},
data() {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
moodTemplateId: "", //模板id
store: useStore(),
layoutList:computed(()=>{
return [...(useStore().state.UploadFilesModule.moodboardFiles),
...(useStore().state.UploadFilesModule.generateFiles),
...(useStore().state.UploadFilesModule.MaterialFiles)]
}),
layoutListaa:[
{
id_:1,
name:'2',
},
{
id_:2,
name:'2',
},
{
id_:3,
name:'2',
},
],
moodb : moodb.moodb_,
moodbList:{},
moodbClassName:[],
};
},
mounted() {
},
directives:{
layout:{
mounted (el,layout) {
// console.log(el,layout);
layout.value.style = {
rotate:'',
left:'',
top:'',
width:'',
height:'',
}
},
updated (el,layout) {
}
}
},
methods: {
init(){
this.layout = !this.layout
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
...this.store.state.UploadFilesModule.generateFiles,
...this.store.state.UploadFilesModule.MaterialFiles]
console.log(this.moodb[layoutList.length]);
this.moodbList = this.moodb[layoutList.length-1]
this.moodbClassName = this.moodb_className
},
setmoodb(item:any){
console.log(item);
this.moodbClassName = item
this.$emit('setmoodbClass',this.moodbClassName)
},
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
// setmoodbClassName(){
// },
//获取图片宽高
// getimgWH(){
// let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// return new Promise(res => {
// var img = document.createElement("img");
// img.src = item.imgUrl
// img.addEventListener("load", function () {
// document.body.appendChild(img);
// var w = img.offsetWidth;
// var h = img.offsetHeight;
// img.remove()
// res({ w, h });
// })
// })
// layoutList.forEach(item => {
// let img = document.createElement('img')
// img.addEventListener("load",function(){
// document.body.appendChild(img);
// var w = img.offsetWidth;
// var h = img.offsetHeight;
// console.log(w,h);
// img.remove()
// })
// });
// },
// layoutcli(num: Number) {
// this.openClick = num;
// if(num ==2 ){
// let material:any = this.$refs.Material
// material.init('Moodboard')
// }else if (num == 3){
// let material:any = this.$refs.Material
// material.init('generate')
// }
// },
randomRange(min: any, max: any, num: any) {
// min最小值，max最大值 num排除的值
let index = Math.floor(Math.random() * (max - min)) + min;
while (index === num) {
index = Math.floor(Math.random() * (max - min)) + min;
}
return index;
},
//随机重置图片顺序
// refetchTemplate() {
// let arr = Array.from({ length: this.templateFileList.length });
// for (let item of this.templateFileList) {
// let index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// while (arr[index]) {
// index = this.randomRange(
// 0,
// this.templateFileList.length,
// -1
// );
// }
// arr[index] = item;
// }
// this.templateFileList = arr;
// },
changeTemplateModal(){
this.layout = !this.layout
},
//提交模板
submitTemplate() {
this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
this.store.commit("setMoodboardFile", this.fileList);
this.store.commit("setMoodTemplateId", this.moodTemplateId);
this.changeTemplateModal();
},
},
});
</script>
<style lang="less">
.layout_modal {
width: 80% !important;
.ant-modal-body {
padding: 0;
height: calc(60vh - 6.4rem);
}
.ant-modal-content{
border-radius: 1rem;
}
.layout_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
height: 100%;
.layout_header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem 0 2.5rem;
height: 6.6rem;
.layout_title {
font-size: 1.8rem;
font-weight: 500;
color: #030303;
}
.close_icon {
font-size: 1.8rem;
color: #aeb2b7;
cursor: pointer;
}
}
.layout_nav{
display: flex;
margin-top: 2rem;
justify-content: center;
img{
width:5rem;
cursor: pointer;
margin: 0 2rem;
}
}
.layout_centent{
display: flex;
height: 60%;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
width: 50%;
margin: auto;
padding: 3rem 0;
justify-content: space-between;
>div{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
margin: auto;
justify-content: space-between;
}
&.active{
>div{
flex-direction: row;
}
}
.layout_centent_bor{
}
.modal_imgItem{
position: relative;
img{
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
.wh1{
width: 23%;
height: 48%;
}
.wh4{
width: 48.5%;
height: 100%;
}
.w1h2{
width: 23%;
height: 100%;
}
.w2h1{
width: 48.5%;
height: 48%;
}
.layout_left{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
overflow-x: hidden;
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
display: none;
}
.layout_left_items{
width: 100%;
height: 6rem;
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
}
.submit_button {
margin: 2rem auto 0;
}
}
}
</style>

59
src/store/uploadFile/uploadFile.ts
View File

@@ -1,10 +1,14 @@
import {Module} from 'vuex' import {Module} from 'vuex'
import {RootState} from '../index' import {RootState} from '../index'
import { message } from "ant-design-vue";
interface UploadFiles{ interface UploadFiles{
moodboardFiles:any, moodboardFiles:any,
printboardFiles:any, printboardFiles:any,
generatePrintFiles:any, generatePrintFiles:any,
generateFiles:any,
MaterialFiles:any,
generateList:any,
colorBoards:any, colorBoards:any,
skecthboardFiles:any, skecthboardFiles:any,
marketingSketchFiles:any, marketingSketchFiles:any,
@@ -17,6 +21,9 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
moodboardFiles:[], moodboardFiles:[],
printboardFiles:[], printboardFiles:[],
generatePrintFiles:[], generatePrintFiles:[],
generateFiles:[],
MaterialFiles:[],
generateList:[],
colorBoards:[], colorBoards:[],
skecthboardFiles:[], skecthboardFiles:[],
marketingSketchFiles:[], marketingSketchFiles:[],
@@ -25,7 +32,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
}, },
mutations:{ mutations:{
setMoodboardFile(state,files){ setMoodboardFile(state,files){
state.moodboardFiles = files state.moodboardFiles = files
}, },
setPrintboardFile(state,files){ setPrintboardFile(state,files){
state.printboardFiles = files state.printboardFiles = files
@@ -33,6 +40,53 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
setGeneratePrintFile(state,files){ setGeneratePrintFile(state,files){
state.generatePrintFiles = files state.generatePrintFiles = files
}, },
addGenerateMaterialFils(state,data){
let file
let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
if(data.type_ == 'generate'){
file = state.generateFiles
}else{
file = state.MaterialFiles
}
if(file.length == 0){
if(arr.length >= 8){
message.error('You can select up to 8 images')
}else{
data.checked = true
file.push(data)
}
}else{
let str = true
for (let index = 0; index < file.length; index++) {
if(file[index].id_ == data.id_){
// data.id_ = GO.id++
str = false
}
}
if(str){
if(arr.length >= 8){
message.error('You can select up to 8 images')
}else{
data.checked = true
file.push(data)
}
}else{
data.checked = false
file = file.filter((v:any)=> v.id_ != data.id_)
}
}
if(data.type_ == 'generate'){
state.generateFiles = file
}else{
state.MaterialFiles = file
}
},
getGenerateList(state,list){
state.generateList = list
},
// setGenerateFils(state,files){
// state.generateFiles = files
// },
setColorboardList(state,colorBoards){ setColorboardList(state,colorBoards){
state.colorBoards = colorBoards state.colorBoards = colorBoards
}, },
@@ -47,6 +101,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
moodboardFiles:state.moodboardFiles, moodboardFiles:state.moodboardFiles,
printboardFiles:state.printboardFiles, printboardFiles:state.printboardFiles,
generatePrintFiles:state.generatePrintFiles, generatePrintFiles:state.generatePrintFiles,
generateFiles:state.generateFiles,
colorBoards:state.colorBoards, colorBoards:state.colorBoards,
skecthboardFiles:state.skecthboardFiles, skecthboardFiles:state.skecthboardFiles,
marketingSketchFiles:state.marketingSketchFiles, marketingSketchFiles:state.marketingSketchFiles,
@@ -60,6 +115,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.moodboardFiles = [] state.moodboardFiles = []
state.printboardFiles = [] state.printboardFiles = []
state.generatePrintFiles=[] state.generatePrintFiles=[]
state.generateFiles = []
state.MaterialFiles = []
state.colorBoards = [] state.colorBoards = []
state.skecthboardFiles = [] state.skecthboardFiles = []
state.marketingSketchFiles = [] state.marketingSketchFiles = []

4
src/tool/GO.ts Normal file
View File

@@ -0,0 +1,4 @@
export default {
id : 1,
testUrl:'http://192.168.1.5:10086'
}

13
src/tool/https.js
View File

@@ -1,7 +1,6 @@
import axios from 'axios' import axios from 'axios'
// import qs from 'qs' // import qs from 'qs'
// import message from '@/components/public/message/src' // import message from '@/components/public/message/src'
import router from '@/router/index' import router from '@/router/index'
import {getCookie} from '@/tool/cookie' import {getCookie} from '@/tool/cookie'
// import cookie from '@/tools/cookie.js' // import cookie from '@/tools/cookie.js'
@@ -15,11 +14,12 @@ axios.defaults.headers.post['lang'] = 'en'; //配置语言请求头
axios.defaults.withCredentials = true; //跨域携带cookie axios.defaults.withCredentials = true; //跨域携带cookie
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
if(process.env.NODE_ENV == "development"){ // if(process.env.NODE_ENV == "development"){
axios.defaults.baseURL = ""; //配置接口地址 // axios.defaults.baseURL = ""; //配置接口地址
}else{ // }else{
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址 // axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
} // }
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
//POST传参序列化(添加请求拦截器) //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => { axios.interceptors.request.use((config) => {
@@ -99,6 +99,7 @@ export const Https = {
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点 saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
libraryModelsDot:'/api/library/modelsDot',//Models打点预览 libraryModelsDot:'/api/library/modelsDot',//Models打点预览
pythonChatStream:'/api/python/chatStream',//机器人助力 pythonChatStream:'/api/python/chatStream',//机器人助力
workspaceDetail:'http://192.168.1.5:10086/api/workspace/detail',//用户习惯详情
}, },

12
src/tool/moodb.ts Normal file
View File

@@ -0,0 +1,12 @@
export default {
moodb_ : [
[['wh4']],
[['wh4','wh4']],
[['wh4','w1h2','w1h2'],['w1h2','w1h2','wh4'],['w2h1','w2h1','wh4'],['wh4','w2h1','w2h1']],
[['wh1','wh1','w1h2','wh4'],['w1h2','wh1','wh1','wh4'],['wh4','wh1','wh1','w1h2'],['w1h2','w1h2','w1h2','w1h2']],
[['wh1','wh1','wh1','wh1','wh4'],['wh1','wh1','wh4','wh1','wh1'],['wh4','wh1','wh1','wh1','wh1'],['w1h2','w1h2','w1h2','wh1','wh1'],['wh1','wh1','w1h2','w1h2','w1h2'],['w1h2','w1h2','wh1','wh1','w1h2'],['w1h2','wh1','wh1','w1h2','w1h2']],
[['wh1','wh1','wh1','wh1','w1h2','w1h2'],['wh1','wh1','w1h2','wh1','wh1','w1h2'],['w1h2','w1h2','wh1','wh1','wh1','wh1'],['wh1','wh1','wh1','wh1','w2h1','w2h1'],['wh1','wh1','w2h1','w2h1','wh1','wh1'],['w2h1','w2h1','wh1','wh1','wh1','wh1']],
[['wh1','wh1','wh1','wh1','wh1','wh1','w1h2'],['wh1','wh1','wh1','wh1','w1h2','wh1','wh1'],['wh1','wh1','w1h2','wh1','wh1','wh1','wh1'],['w1h2','wh1','wh1','wh1','wh1','wh1','wh1'],['wh1','wh1','wh1','wh1','wh1','wh1','w2h1']],
[['wh1','wh1','wh1','wh1','wh1','wh1','wh1','wh1']]
]
}

23
src/views/HomeView.vue
View File

@@ -53,7 +53,7 @@
@click="resDesignCollection()"> @click="resDesignCollection()">
Redesign Redesign
</div> </div>
<div class="system_scale"> <!-- <div class="system_scale">
<div class="system_silder"> <div class="system_silder">
<a-slider id="system_silder" :tooltipVisible="true" <a-slider id="system_silder" :tooltipVisible="true"
v-model:value="system_scale_value" :tip-formatter="formatter" v-model:value="system_scale_value" :tip-formatter="formatter"
@@ -78,7 +78,7 @@
switch_open ? "Category" : "Outfit" switch_open ? "Category" : "Outfit"
}} }}
</div> </div>
</div> </div> -->
<div class="select_block" v-show="!switch_open"> <div class="select_block" v-show="!switch_open">
<a-select ref="select" v-model:value="designType" :options="disignTypeList"> <a-select ref="select" v-model:value="designType" :options="disignTypeList">
<template #suffixIcon><span class="icon iconfont icon-xiala" <template #suffixIcon><span class="icon iconfont icon-xiala"
@@ -86,12 +86,12 @@
</a-select> </a-select>
</div> </div>
</div> </div>
<div class="right_top_right"> <!-- <div class="right_top_right">
<div class="content_header_button" @click="selectModels()"> <div class="content_header_button" @click="selectModels()">
<span class="content_header_button_des">Mannequins</span><span <span class="content_header_button_des">Mannequins</span><span
class="icon iconfont icon-xiala"></span> class="icon iconfont icon-xiala"></span>
</div> </div>
</div> </div> -->
</div> </div>
<div class="right_content_block"> <div class="right_content_block">
@@ -1226,3 +1226,18 @@ export default defineComponent({
} }
} }
</style> </style>
<style lang="less">
.ant-modal-root{
.ant-modal-mask{
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
}
.ant-modal-centered{
top: 7rem;
}
}
.ant-message{
z-index: 1049 !important;
}
</style>

13
src/views/LoginPage.vue
View File

@@ -399,8 +399,10 @@ export default defineComponent({
}; };
// this.loginType = 'email' // this.loginType = 'email'
// this.emailStap = 2; // this.emailStap = 2;
let loginTime = true
Https.axiosPost(Https.httpUrls.preLogin, data).then( if(loginTime){
loginTime = false
Https.axiosPost(Https.httpUrls.preLogin, data).then(
(rv: any) => { (rv: any) => {
// if (rv) { // if (rv) {
// this.loginType = 'email' // this.loginType = 'email'
@@ -415,7 +417,12 @@ export default defineComponent({
this.createTimer(); this.createTimer();
} }
} }
); );
setTimeout(() => {
loginTime = true
}, 1000);
}
} }
}, },

14
vue.config.js
View File

@@ -14,11 +14,15 @@ module.exports = defineConfig({
: '10086', : '10086',
proxy: { proxy: {
"/api": { // "/api": {
// target: 'https://www.aida.com.hk', //后端接口地址 // // target: 'https://www.aida.com.hk', //后端接口地址
target: process.env.VUE_APP_BASE_URL, // target: process.env.VUE_APP_BASE_URL,
changeOrigin: true, //是否允许跨越 // changeOrigin: true, //是否允许跨越
} // }
'http://192.168.1.5:10086/api':{
target:'http://18.167.251.121:5567',
changeOrigin:true,
}
}, },
}, },
pluginOptions: { pluginOptions: {