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

09-12

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

609
src/component/Detail/DesignDetailAlter.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="detail_modal_body_select">
<div v-show="type_ == 1 && select == true">
<div v-show="(type_ == 1 || type_ == 2) && select == true">
<div class="detail_uploadLibrary">
<div class="switch_type_list">
<div
@@ -18,40 +18,57 @@
<span>Library</span>
</div>
</div>
<!-- <div v-show="openClick == 1">
<div v-show="openClick == 1" class="moodboard_body">
<div v-show="openClick == 2" class="detail_Library">
<div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
</div>
</div>
<div v-show="openClick == 1" class="detail_Upload_item">
<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"
v-for="(file, index) in uploadList"
:key="file"
@click.stop="selectImgItem(file)"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin
:indicator="indicator"
tip="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" />
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ current.type }}
</div>
</div>
</div>
<div
class="delete_file_block"
@click="deleteFile(file)"
@click.stop="deleteFile(index)"
>
Delete
<span class="icon iconfont icon-shanchu"></span>
</div>
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="moodboarList.length != 8"
v-show="uploadList.length != 8"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
@@ -60,34 +77,40 @@
...upload,
}"
:headers="{ Authorization: token }"
v-model:file-list="fileList"
v-model:file-list="uploadList"
:before-upload="beforeUpload"
multiple
:maxCount="8 - moodboarList.length+fileList.length"
:maxCount="8 - uploadList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
@change="(file) => upFileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show=" moodboarList.length != 8"
v-show="uploadList.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 v-show="openClick == 2">
</div>
</div>
</div>
<div v-show="type_ == 2 && select == true">
1111111111111111111111111
<div v-show="openClick == 2" class="detail_Library_item">
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
</div>
</div>
</div>
<div class="no_data_block loading_block" v-show="isShowLoading">
<a-spin size="large"></a-spin>
</div>
</div>
</div>
<div v-show="type_ == 3 && select == true">
<div class="detail_color">
<div class="right_content_line">
@@ -179,9 +202,6 @@
<span class="icon iconfont icon-huoquduixiang"></span>
<span class="get_color_des"></span>
</div>
<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
<img src="#" :title="pantongName">
</div>
</div>
</div>
</div>
@@ -191,7 +211,7 @@
<DesignDetailEnd ref="DesignDetailEnd"></DesignDetailEnd>
</template>
<script>
import { defineComponent,computed,ref, h ,nextTick } from 'vue'
import { defineComponent,computed,ref, h ,nextTick ,inject,provide } from 'vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
@@ -200,7 +220,7 @@ import { message,Upload} from 'ant-design-vue';
import { Sketch} from '@ans1998/vue3-color'
import {getUploadUrl,rgbToHsv} from '@/tool/util'
import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
export default defineComponent({
props: ["msg"],
components:{
@@ -210,11 +230,39 @@ export default defineComponent({
const store = useStore();
let type_ = ref(1);
let select = ref(false);
let parentData = ref({
})//父组件传过来的数据
let current = inject('current')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
let disignTypeList = [
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
]
let isShowLoading = ref(false)
let clothesList = ref([])
let uploadList = ref([])
let apparelList = ref([])
let printList = ref([])
let selectCode = ref('Sketchboard')
//颜色
let selectColor = ref({
rgba:{},
@@ -223,8 +271,17 @@ export default defineComponent({
})
return{
store,
parentData,
current,
openClick,
searchPictureName,
disignTypeList,
isShowLoading,
clothesList,
uploadList,
apparelList,
printList,
selectCode,
type_,
select,
selectColor,
@@ -235,12 +292,30 @@ export default defineComponent({
selectColor(newVal,oldVal){
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = newVal
// console.log(DesignDetailEnd.selectIndex);
let colorList = DesignDetailEnd.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
clearInterval(this.getPantongNameTime)
this.getPantongNameTime = setTimeout(() => {
this.getPantongName(newVal.rgba)
}, 100);
}
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
return (selectColor)=>{
@@ -250,14 +325,32 @@ export default defineComponent({
g:rgba?.g || rgba?.g===0 ? rgba?.g : 255,
b:rgba?.b || rgba?.b===0 ? rgba?.b : 255,
a:rgba?.a || rgba?.a===1 ? rgba?.a : 1,
hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
hex:selectColor.hex == undefined ? '#FFFFFF': selectColor.hex
}
if(data.a != 1 || data.a != 0){
data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
}
return data
}
},
},
data(){
return{
token: "",
uploadUrl:'',
upload: {
isPin: 0,
level1Type: 'Sketchboard',
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
designShowPrview:1, //展示图片预览步骤
generateHighDesignImg:'',//点击generate按钮生成的高级设计图
@@ -278,26 +371,187 @@ export default defineComponent({
},
spin: true,
}),
getPantongNameTime:true
}
},
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
dropperDom.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// 返回RGB格式的字符串
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.error("Your browser does not support it")
}
})
},
methods:{
//点击判断
init(num){
this.type_ = num
this.select = true
let arr = this.current.color
// if(!arr[3]){
// arr[3] = 1
// }
this.selectColor = {
rgba:{
r:108,
g:108,
b:172,
a:1
r:Number(arr.r),
g:Number(arr.g),
b:Number(arr.g),
a:Number(arr.a?arr.a:1),
},
hex:'#6c6cac'
hex:this.rgbaToHex([arr.r,arr.g,arr.b,arr.a?arr.a:1])
}
console.log(this.selectColor);
this.uploadList = []
if (num == 1) {
this.selectCode = 'Sketchboard'
this.upload.level1Type = 'Sketchboard'
this.uploadList = this.apparelList
}else if (num == 2){
this.selectCode = 'Printboard'
this.upload.level1Type = 'Printboard'
this.uploadList = this.printList
}
if(num == 1 || num == 2){
this.clothesList = []
this.getLibraryList()
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
DesignDetailEnd.init(num)
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
upFileUploadChange(data) {
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
file.designType = res.data.designType
file.category = this.current;
console.log(file);
let fileList = this.uploadList.filter(
(v) => v.status === "done"
);
if (this.uploadList.length >= 8) {
message.error("You can select up to 8 images");
} else {
// this.store.commit("setSketchboardFile", fileList);
this.uploadList = fileList
// this.store.commit("clearMoodTemplateId");
if(this.selectCode == 'Sketchboard'){
this.apparelList = this.uploadList
}else{
this.printList = this.uploadList
}
}
} else if (file.status === "error") {
let index = -1;
this.uploadList.forEach((ele, index1) => {
if (file.uid === ele.uid) {
index = index1;
}
});
if (index > -1) {
this.uploadList.splice(index, 1);
}
message.error(file.name + "upload failed");
}
},
//关闭
terminate(){
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.selectIndex = 0
DesignDetailEnd.type_ = 0
},
//切换整体衣服
changePlace(){
this.uploadList = []
let DesignDetailEnd = this.$refs.DesignDetailEnd
this.select = false
DesignDetailEnd.type_ = 0
this.uploadList = []
this.apparelList = []
this.printList = []
this.select = false
DesignDetailEnd.colorList = [{},{},{},{},{},{},{},{}]
DesignDetailEnd.selectIndex = 0
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
showFileCategory(file) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate,list) {
file.category = cate.value;
for (let item of list) {
item.categoryShow = false;
}
},
hiddenFileCategory() {
for (let item of this.clothesList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
selectImgItem(imgData){
if(this.selectCode == 'Sketchboard'){
this.current.id_ = imgData.id
this.current.path = imgData.url
}else{
console.log(imgData,this.current.printObject);
this.current.printObject.url = imgData.url
this.current.printObject.id = imgData.id
}
// imgData.type_ = this.type_
// this.store.commit("addGenerateMaterialFils", imgData);
},
//请求我的印花&&模型
getLibraryList(){
let data = {
level1Type:this.selectCode,
// level2Type:this.designType,
page:1,
pictureName:this.searchPictureName,
size:10,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
this.clothesList = rv.content
this.isShowLoading = false
}
).catch((res)=>{
this.isShowLoading = false
});
},
//衣服
open(num) {
this.openClick = num;
@@ -306,6 +560,7 @@ export default defineComponent({
},
//印花
@@ -322,15 +577,6 @@ export default defineComponent({
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
//清除当前的颜色
clearCurrentColor(){
this.selectColor = {
rgba:{}
}
this.colorFileList = []
this.pantongName = ''
this.pantongNameList = []
this.tcxColor = ''
},
colorDeleteFile(index){
this.colorFileList.splice(index, 1)
this.selectColorList = []
@@ -340,9 +586,14 @@ export default defineComponent({
},
rgbaToHex(rgba) { // rgba转16进制
let hex = '#';
for (const i of rgba) {
hex += Number(i).toString(16).padStart(2, '0');
}
rgba.forEach((i,index) => {
if(index == 3){
hex += Math.round(i * 255).toString(16)
}else{
hex += Number(i).toString(16).padStart(2, '0');
}
});
return hex;
},
//通过HSV获取颜色
@@ -373,40 +624,34 @@ export default defineComponent({
}
hsvList.push(obj)
})
// let data = []
// Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
// if(rv){
// this.pantongName = rv.name
// console.log(rv);
// }
// })
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
(rv) => {
if(rv){
rv.forEach(element => {
this.pantongNameList.push(element.name)
});
console.log(rv);
}
}
).catch(res=>{
});
},
//通过tcx获取颜色
getTcxColor(){
if(!this.tcxColor){
return
}
let DesignDetailEnd = this.$refs.DesignDetailEnd
Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
if(rv && rv.name){
// let hex = this.rgbaToHex([color.r,color.g,color.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
this.selectColor = this.reviewColor
this.colorList[this.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
DesignDetailEnd.colorList[DesignDetailEnd.selectIndex] = {r:rv.r, g:rv.g, b:rv.b}
this.pantongName = rv.name
let colorList =this.colorList.filter((v) => Object.keys(v).length)
let colorList =DesignDetailEnd.colorList.filter((v) => Object.keys(v).length)
this.setColorboardList(colorList)
this.getColorBg = true
}else{
@@ -414,16 +659,43 @@ export default defineComponent({
}
})
},
//查询颜色的潘通值和txc
getPantongName(v) {
if(!v.r){
return
}
let color = [v.r, v.g, v.b];
let hsv = rgbToHsv(color);
let data = [{
h: hsv[0],
s: hsv[1],
v: hsv[2],
}]
return new Promise((resolve, reject) => {
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
.then((rv) => {
if (rv) {
this.selectColor.tcx = rv[0].tcx
this.selectColor.name = rv[0].name
resolve();
}
})
.catch((res) => {
reject();
});
});
},
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
let data = {
id:'',
name:'',
rgbValue:v
}
return data
})
// this.store.commit('setColorboardList',newColorList)
},
fileUploadChange(data){
@@ -450,8 +722,7 @@ export default defineComponent({
let colorHex = this.rgbaToHex(color)
let selectColorList = [];
let selectColor = colorThief.getPalette(domImg,7)
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
selectColor = selectColor.join('&').split("&")
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
@@ -479,6 +750,8 @@ export default defineComponent({
width: 20%;
>div{
height: 100%;
display: flex;
flex-direction: column;
}
i{
font-size: 1.8rem;
@@ -486,6 +759,8 @@ export default defineComponent({
}
.detail_uploadLibrary{
.switch_type_list {
margin-bottom: 1rem;
margin-top: -1rem;
display: flex;
align-items: center;
position: relative;
@@ -537,7 +812,185 @@ export default defineComponent({
}
}
}
.detail_Library{
.content_search_block{
display: flex;
margin-bottom: 1rem;
.search_input{
width: 15rem;
padding-left: 1.5rem;
// height: 4rem;
// line-height: 3.8rem;
// background: #FFFFFF;
border: 0.1rem solid #F1F1F1;
// font-size: 1.6rem;
font-size: 1.2rem;
font-weight: 400;
height: 3rem;
&::placeholder {
color: #C2C2C2;
}
}
.search_icon_block{
width: 5rem;
height: 3rem;
line-height: 3rem;
text-align: center;
background: #343579;
cursor: pointer;
.icon-sousuo{
font-size: 2rem;
color: #FFFFFF;
}
}
}
}
.detail_Library_item,.detail_Upload_item{
width: 100%;
// height: calc(100% - 19rem);
flex: 1;
overflow: hidden;
position: relative;
&.generate::-webkit-scrollbar{display: none;}
>div{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
overflow-X: hidden;
height: 100%;
&.scroll_style::-webkit-scrollbar{display: none;}
}
.content_img_item{
display: inline-block;
vertical-align: top;
// padding: 0 1.4rem;
// margin-bottom: 2.8rem;
margin-bottom: 2rem;
padding: 0;
height: 9rem;
&.active{
margin-bottom: 2rem;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
&.active{
opacity: .5;
img{
transform: scale(.9);
}
}
&.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;
}
}
.upload_img_body{
width: 100%;
.upload_item{
justify-content: space-between;
}
}
.moodboard_body{
.upload_file_item{
margin: 0;
margin-bottom: 2rem;
width: 9rem;
height: 9rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
.upload_file_item_content{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
cursor: pointer;
.upload_img{
display: block;
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
.delete_file_block{
display: none;
width: 3.2rem;
height: 3.2rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
position: absolute;
top: 0.9rem;
right: 0.9rem;
text-align: center;
line-height: 3.2rem;
left: auto;
.icon-shanchu{
font-size: 1.6rem;
color: #fff;
}
}
&:hover .delete_file_block{
display: block;
}
}
}
}
}
.detail_color{
// height: calc(100% - 5.4rem);
height: 100%;
@@ -904,21 +1357,7 @@ export default defineComponent({
vertical-align: middle;
}
}
.get_color_bg{
width: 18rem;
height: 18rem;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 1.5rem;
img{
opacity: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
}
}
}