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

选择颜色调整两种方式

Browse Source
This commit is contained in:
X1627315083
2024-06-27 17:37:49 +08:00
parent c661454590
commit 67250edba6
12 changed files with 385 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/component/Detail/habitSetStyle.vue
View File

@@ -30,12 +30,12 @@
</div>
</div>
<div class="habitSetStyle_ok">
<div class="started_btn" @click="setOk()">
OK
</div>
<div class="started_btn" @click="setClear()">
{{ $t('Habit.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
</div>
</div>
</div>

270
src/component/HomePage/ColorboardUpload.vue
View File

@@ -84,7 +84,6 @@
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
</div> -->
</div>
<div class="right_content_line right_content_line_upload">
<div class="upload_right_header">
<i class="color_edit fi fi-bs-comments" ></i>
@@ -92,28 +91,36 @@
</div>
<div class="upload_centetn">
<div class="upload_item Guide_1_10">
<div class="upload_file_item" v-for="(file) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file.status !== 'done'">
<a-spin :indicator="indicator" tip="Uploading..."/>
<div class="upload_file_item upload_file_item_show">
<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" v-for="(file) in fileList" :key="file">
<div class="upload_file_item_content" v-show="file.status !== 'done'">
<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" ref="colorImage">
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
</div>
</div>
<div class="upload_file_item_content" v-show="file.status === 'done'">
<img :src="file?.imgUrl" class="upload_img" ref="colorImage">
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
<div class="upload_file_item_scale">
<a-upload
:capture="null"
:max-count="1"
list-type="picture-card"
:customRequest="function(){}"
@change="fileUploadChange"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
<div class="upload_file_item" @click="setPrintImg()">
<i class="fi fi-rr-picture"></i>
</div>
</div>
</div>
<a-upload
:capture="null"
v-show="fileList.length < 1"
list-type="picture-card"
:customRequest="function(){}"
@change="fileUploadChange"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-rr-picture"></i>
</div>
</a-upload>
</div>
<div class="upload_color">
<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'']">
@@ -144,6 +151,7 @@
</div>
</div>
</div>
<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
</div>
</template>
<script>
@@ -158,12 +166,14 @@ import {useStore} from 'vuex'
import ColorThief from '@/tool/colorthief/colorthief'
import { message,Upload} from 'ant-design-vue';
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import selectImgList from "@/component/HomePage/selectImgList.vue";
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
Chrome,
Slider,
Sketch,
selectImgList,
},
setup(){
// console.log(isMoible());
@@ -436,81 +446,83 @@ export default defineComponent({
}
file.imgUrl = data_new
file.status = 'done'
this.fileList.push(file)
setTimeout(async ()=>{
const img = new Image();
let colorImage = this.$refs.colorImage
img.src = colorImage[0].src;
const colorThief = new ColorThief();
img.onload = async () => {
let domImg = colorImage[0];
// let color = colorThief.getColor(domImg)
let selectColorList = [];
let selectColor = colorThief.getPalette(img,9)
//排序
let obj = {
max : 5,
min: 5,
}
let colorSort
await GO.setColor(selectColor,file.imgUrl,obj).then(
(rv) => {
if(rv){
colorSort = rv.ratio
}
}
)
colorSort.sort((a, b) => {
var a_num = a.ratio;
var b_num = b.ratio;
return b_num - a_num;
});
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
)
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
// console.log(this.colorList);
// console.log(selectColorList);
// let colorListIndex = []
// this.colorList.forEach((item,index)=>{
// if(!item.rgba){
// colorListIndex.push(index)
// }
// })
// for (let index = 0; index < selectColorList.length; index++) {
// this.colorList[colorListIndex[0]] = selectColorList[index]
// colorListIndex.splice(0,1)
// }
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
img.remove()
};
},100)
this.fileList[0] = file
this.getImgColor()
};
// 转化为base64S
reader.readAsDataURL(fileData)
},
getImgColor(){
setTimeout(()=>{
const img = new Image();
let colorImage = this.$refs.colorImage
const colorThief = new ColorThief();
img.onload = async () => {
let domImg = colorImage[0];
// let color = colorThief.getColor(domImg)
let selectColorList = [];
let selectColor = colorThief.getPalette(img,9)
//排序
let obj = {
max : 5,
min: 5,
}
let colorSort
await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
(rv) => {
if(rv){
colorSort = rv.ratio
}
}
)
colorSort.sort((a, b) => {
var a_num = a.ratio;
var b_num = b.ratio;
return b_num - a_num;
});
selectColor = []
colorSort.forEach(v=>{
selectColor.push(v.rgb)
})
selectColor = selectColor.join('&')
selectColor = selectColor.split("&")
let color = selectColor[0].split(',')
let colorHex = this.rgbaToHex(color)
let colorLi = []
new Set(selectColor).forEach((item)=>{
colorLi.push(item.split(","))
})
colorLi.forEach(element => {
let colorLiHex = this.rgbaToHex(element)
selectColorList.push(
{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
)
});
this.selectColorList = selectColorList
this.getHsvColor(selectColorList)
this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
// console.log(this.colorList);
// console.log(selectColorList);
// let colorListIndex = []
// this.colorList.forEach((item,index)=>{
// if(!item.rgba){
// colorListIndex.push(index)
// }
// })
// for (let index = 0; index < selectColorList.length; index++) {
// this.colorList[colorListIndex[0]] = selectColorList[index]
// colorListIndex.splice(0,1)
// }
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
img.remove()
};
img.src = colorImage[0].src;
},100)
},
rgbaToHex(rgba) { // rgba转16进制
let hex = '#';
rgba.forEach((i,index) => {
@@ -759,6 +771,39 @@ export default defineComponent({
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
this.setColorboardList(colorList)
},
setPrintImg(){
let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
let imgListData = [...moodImgListData,...printImgListData]
console.log(imgListData.length);
if(imgListData?.length==0){
message.info(this.t('ColorboardUpload.jsContent6'))
return
}
let selectImgList = this.$refs.selectImgList;
// selectImgList.selectImgListMask = true
// selectImgList.styleList = this.styleList
selectImgList.init(imgListData);
},
setImgGetColor(data){
data.status = 'await'
this.fileList[0] = data
fetch(data.imgUrl)
.then(response => response.blob())
.then(blob => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
this.fileList[0].status = 'done'
const base64data = reader.result;
this.fileList[0].imgUrl = base64data
nextTick(()=>{
this.getImgColor()
})
};
})
}
}
})
</script>
@@ -849,24 +894,56 @@ export default defineComponent({
padding-right: calc(3rem*1.2);
margin-right: 2.4rem;
.upload_centetn{
overflow-x: hidden;
// overflow-x: hidden;
height: calc(100% - 4.4rem*1.2);
padding-bottom: 4rem;
}
.upload_item{
position: relative;
}
.upload_centetn::-webkit-scrollbar {
display: none;
}
.upload_file_item_show{
position: relative;
}
.upload_file_item_scale{
position: absolute;
width: 28rem;
height: 14rem;
z-index: 2;
top: 100%;
left: 50%;
display: none;
transform: translateX(-50%);
border-radius: 4px;
box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
overflow: hidden;
background: #fff;
}
.upload_file_item_show:hover{
border-bottom: none;
.upload_file_item_scale{
display: flex;
}
}
.fi-rr-square-plus,.fi-rr-picture{
zoom: 4;
}
.upload_file_item{
// margin: 0 2rem 2rem 0;
margin: 0;
display: inline-block;
// width: 16.5rem;
// height: 16.5rem;
width: calc(12rem*1.2);
height: calc(12rem*1.2);
border: 1px solid #F5F5F5;
vertical-align: top;
display: flex;
align-items: center;
justify-content: center;
.upload_file_item_content{
display: flex;
align-items: center;
@@ -911,6 +988,11 @@ export default defineComponent({
width: calc(12rem*1.2);
flex-wrap: wrap;
justify-content: space-between;
height: 25rem;
overflow-y: auto;
&.upload_color::-webkit-scrollbar {
display: none;
}
.upload_color_item{
width: calc(5rem*1.2);
height: calc(5rem*1.2);

182
src/component/HomePage/selectImgList.vue Normal file
View File

@@ -0,0 +1,182 @@
<template>
<a-modal
class="selectImgList_modal generalModel"
v-model:visible="selectImgList"
:footer="null"
width="50%"
:maskClosable="false"
:centered="true"
:closable="false"
:mask="selectImgListMask"
:keyboard="false"
:destroyOnClose="true"
:zIndex="1050"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<i class="fi fi-rr-cross-small"></i>
</div>
</div>
<div class="selectImgList_content">
<div class="modal_title_text">
<div>{{ $t('selectImgList.SelectImg') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="selectImgList_content_bottom">
<div class="content_bottom_item" v-for="item in imgList" @click="setItemSelect(item)">
<img :src="item.imgUrl" alt="" :class="{active:item.isChecked}">
</div>
</div>
<div class="selectImgList_ok">
<div class="started_btn" @click="setClear()">
{{ $t('selectImgList.Clear') }}
</div>
<div class="started_btn" @click="setOk()">
OK
</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { getCookie } from "@/tool/cookie";
import { message,Modal } from "ant-design-vue";
import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { downloadIamge } from "@/tool/util";
import { useI18n } from "vue-i18n";
export default defineComponent({
emits:['setImgGetColor'],
setup(props,{emit}) {
let selectImgList: any = ref(false);//弹窗
let selectImgListMask:any = ref(false)//弹窗遮罩
let oldDataId = ''
let selectImgListData:any = reactive({
imgList:[],
selectStyle:{
name:'',
id:'',
},
selectStyleName:'',
isShowMark:false,
})
const {t} = useI18n()
let init = (data:any)=>{
selectImgList.value = true
selectImgListData.imgList = data
// selectImgListData.selectStyleId = 'feng2'
}
let cleardata = ()=>{
selectImgList.value = false
selectImgListData.isShowMark = false
// setParentData()
}
let cancelDsign = ()=>{
cleardata()
}
let setOk= ()=>{
let data = selectImgListData.imgList.filter((item:any)=>item.isChecked);
if(data.legnth > 0){
emit('setImgGetColor',data[0])
}
cleardata()
}
let setClear = ()=>{
selectImgListData.selectStyle.id = ''
selectImgListData.selectStyle.name = ''
selectImgListData.selectStyle.value = ''
}
let setItemSelect = (item:any)=>{
selectImgListData.imgList.forEach((item:any) => {
item.isChecked = false
});
item.isChecked = true
}
return {
selectImgList,
selectImgListMask,
...toRefs(selectImgListData),
init,
cancelDsign,
setItemSelect,
setOk,
setClear,
};
},
data() {
return {
// moodTemplateId: "", //模板id
};
},
mounted() {
},
methods: {
},
});
</script>
<style lang="less">
.selectImgList_modal {
&.generalModel{
.ant-modal-body {
height: calc(55rem*1.2);
}
}
.selectImgList_content{
display: flex;
flex-direction: column;
height: 100%;
.selectImgList_content_bottom{
--border-color: #c4c4c4;
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
overflow-y: auto;
.content_bottom_item{
img{
width: 16rem;
height: 16rem;
object-fit: contain;
margin: 2rem;
cursor: pointer;
}
}
.content_bottom_item:nth-child(4n){
margin-right: 0rem;
}
.content_bottom_item .active{
opacity: .5;
transform: scale(.8);
}
}
.selectImgList_ok{
width: 60%;
text-align: center;
margin: 0 auto;
padding-top: 1rem;
display: flex;
justify-content: space-around;
>div{
width: 40%;
}
}
}
}
</style>

1
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -730,6 +730,7 @@ export default defineComponent({
models = {
libraryId:this.printObject.relationId || null,
templateId:this.printObject.templateId || null,
sex:this.sex,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...await this.getPrintLocation()
}

3
src/component/LibraryPage/ModelPlacementMobile.vue
View File

@@ -718,6 +718,7 @@ export default defineComponent({
libraryId:this.printObject.relationId || null,
templateId:this.printObject.templateId || null,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
sex:this.sex,
...this.getPrintLocation()
}
let cropper:any = this.$refs.cropper
@@ -730,7 +731,7 @@ export default defineComponent({
if(this.isShowMark){
return
}
this.isShowMark = true
// this.isShowMark = true
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
(rv: any) => {
this.perviewUrl = rv

6
src/component/LibraryPage/ModelPlacementUpdata.vue
View File

@@ -1,6 +1,6 @@
<template>
<div v-show="placementShow">
<a-modal class="models_placement_component"
<a-modal class="models_placement_component1"
v-model:visible="placementShow"
:footer="null"
width="111.5rem"
@@ -531,7 +531,7 @@ export default defineComponent({
})
</script>
<style lang="less">
.models_placement_component{
.models_placement_component1{
.ant-modal-close{
width: 3.6rem;
@@ -782,6 +782,8 @@ export default defineComponent({
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
position: relative;
width: 100%;
height: auto;
&::-webkit-scrollbar { width: 0 !important }
}

5
src/lang/cn.ts
View File

@@ -322,6 +322,11 @@ export default {
jsContent3:"您只能上传图片文件！",
jsContent4:'图片必须小于5MB',
jsContent5:"请输入正确的TCX值",
jsContent6:"请至少选择一个情绪版或者印花",
},
selectImgList:{
SelectImg:'选择图片',
Clear:'关闭',
},
MoodboardUpload:{
Upload:'上传',

5
src/lang/en.ts
View File

@@ -322,6 +322,11 @@ export default {
jsContent3:"You can only upload Image file!",
jsContent4:'Image must smaller than 5MB!',
jsContent5:"Please enter the correct TCX value",
jsContent6:"Please select at least one mood plate or print",
},
selectImgList:{
SelectImg:' Select Image',
Clear:'Close',
},
MoodboardUpload:{
Upload:'Upload',

1
src/views/HomeMain.vue
View File

@@ -19,7 +19,6 @@
</div>
<div
v-if="isTest"
class="trialApproval button_second credits hideChecked"
>
{{$t('Header.Credits')}}:&nbsp;

9
src/views/HomeView/HomeView.vue
View File

@@ -533,7 +533,7 @@ export default defineComponent({
this.workspacePosition.forEach((positionItem:any) => {
if(positionItem.value == sketchItem.category){
if(positionItem.value == sketchItem.categoryValue){
num ++
// console.log(num,this.allBoardData?.sketchboardFiles.length);
}
@@ -815,7 +815,7 @@ export default defineComponent({
let data: any = {
id: v.resData.id,
designType: v.resData.designType,
level2Type: v.category,
level2Type: v.categoryValue,
isPin: v.pin ? 1 : 0,
};
return data;
@@ -828,7 +828,7 @@ export default defineComponent({
let data = {
designType: v.resData.designType,
isPin: v.pin ? 1 : 0,
level2Type: v.category,
level2Type: v.categoryValue,
sketchBoardId: v.resData.id,
};
return data;
@@ -1034,12 +1034,13 @@ export default defineComponent({
};
if (v.level1Type === "Sketchboard") {
newData.pin = v.isPin;
newData.category = v.level2Type;
newData.categoryValue = v.level2Type;
newData.level2Type = v.level2Type;
}
if (v.level1Type === "Printboard") {
newData.pin = v.isPin;
newData.level2Type = v.level2Type;
newData.categoryValue = v.level2Type;
}
return newData;
});

1
src/views/HomeView/Works.vue
View File

@@ -131,6 +131,7 @@ export default defineComponent({
}
filter.getListDate.page = 0
fall.value.clearData()
filter.isNoData = false
// getPorfolio()
}
let likeFile = (item:any,type:string) => {

2
src/views/HomeView/library.vue
View File

@@ -1340,7 +1340,7 @@ export default defineComponent({
clearInterval(this.remGenerateTime[str])
this.remGenerate[str] = false
this.isGenerate[str] = false
this.generateLevel2 = ''
this.generateLevel2[str] = ''
}
}
}