commit

src/assets/style/style.css

@@ -114,11 +114,12 @@ input {
   overflow-y: hidden;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card {
-  width: 16.5rem;
-  height: 16.5rem;
   background: #FFFFFF;
-  border: 0.3rem dashed #EDEDED;
+  width: 6rem;
-  margin: 0 2rem 2rem 0;
+  height: 6rem;
+  border: 0.3rem solid #ededed;
+  border-radius: 10px;
+  margin: 0;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
   font-size: 3.2rem;
@@ -135,6 +136,102 @@ input {
   width: auto;
   vertical-align: top;
 }
+.collection_modal_body .input_box {
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  padding-top: 2.5rem;
+  padding-bottom: 2rem;
+}
+.collection_modal_body .input_box input {
+  font-size: 12px;
+  border-radius: 0.5rem;
+  width: 70%;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding-left: 1.5rem;
+  border: 0.1rem solid #F1F1F1;
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+.collection_modal_body .input_box inputinput:-moz-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box inputinput:-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box inputinput::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box .generage_btn {
+  margin: 0 auto;
+}
+.collection_modal_body .upload_item {
+  display: flex;
+  flex-wrap: wrap;
+}
+.collection_modal_body .upload_item .upload_file_item {
+  margin: 0 2rem 2rem 0;
+  display: inline-block;
+  width: 10rem;
+  height: 10rem;
+  border: 1px solid #f5f5f5;
+  vertical-align: top;
+  position: relative;
+}
+.collection_modal_body .upload_item .upload_file_item.upload_component {
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
+  width: 6rem;
+  height: 6rem;
+  border: 0.3rem solid #ededed;
+  border-radius: 10px;
+  margin: 0;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
+  display: block;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .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;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_img_icon {
+  width: 4.6rem;
+}
 .cut_pricture_modal .ant-modal-body {
   height: 65.4rem;
   overflow-y: hidden;

src/assets/style/style.less

@@ -135,12 +135,12 @@ input{
     }
 
     .ant-upload.ant-upload-select-picture-card{
-        width: 16.5rem;
-        height: 16.5rem;
         background: #FFFFFF;
-        border: 0.3rem dashed #EDEDED;
+		width: 6rem;
-        margin: 0 2rem 2rem 0;
+		height: 6rem;
-
+		border: 0.3rem solid #ededed;
+		border-radius: 10px;
+		margin: 0;
         .upload_tip_block{
             .icon-jiahao{
                 font-size: 3.2rem;
@@ -161,6 +161,115 @@ input{
         vertical-align: top;
     }
 }
+//设计input和上传按钮样式
+.collection_modal_body{
+	.input_box{
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		background: #fff;
+		padding-top: 2.5rem;
+		padding-bottom: 2rem;
+		input{
+			font-size: 12px;
+			border-radius: .5rem;
+			width: 70%;
+			border: 1px solid rgba(0,0,0,.15);
+			padding-left: 1.5rem;
+			border: 0.1rem solid #F1F1F1;
+			font-size: 1.2rem;
+			font-weight: 400;
+			&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;
+		}
+
+		
+	}
+	.upload_item{
+		display: flex;
+		flex-wrap: wrap;
+		.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;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			: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;
+			}
+		}
+	}
+}
 
 //剪裁弹窗
 .cut_pricture_modal{

src/component/HomePage/ColorboardUpload.vue

@@ -1,47 +1,69 @@
 <template>
     <div class="colorboard_upload_modal">
-        <div class="colorboard_upload_left">
+		<div class="modal_layout">
-            <div class="upload_left_header">
+			<div class="modal_text">
-                <span class="color_list icon iconfont icon-diaosebanpalette3"></span>
+				<div>Thumbnail preview of selected moodboard</div>
-                <span>My Color Palette</span>
 			</div>
-            <div class="upload_left_content scroll_style">
+			<div class="modal_img">
-                <div class="upload_color_block" v-for="(color,index) in colorList" :key="color">
+				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
-                    <div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '']" :style="{background:`rgb(${color?.r},${color?.g},${color?.b})`}"></div>
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
 					</div>
 				</div>
 			</div>
+		</div>
+      
         <div class="colorboard_upload_right">
             <div class="upload_right_content">
                 <div class="right_content_line">
                     <div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
+						<i class="color_edit fi fi-bs-comments" ></i>
-                        <span>Choose Color</span>
+                        <span>Palette</span>
                     </div>
                     <div class="color_setting_block">
-                        <Chrome class="chrome_color" v-model="selectColor"></Chrome>
+						<Sketch class="sketch_color" v-model="selectColor"  :show.sync="colorPickerVisible"/>
-                        <Slider class="sileder_color" v-model="selectColor"></Slider>
+                        <!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
-                        <div class="color_rgb_block">
+                        <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
-                            <div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
+						<div class="color_block">
-                            <div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
+							<div class="color_left" @click="colorBlockHex = !colorBlockHex">
-                            <div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
+								<div v-show="colorBlockHex">
+									HEX
+								</div>
+								<div v-show="!colorBlockHex">
+									RGBA
+								</div>
+							</div>
+							<div class="color_right">
+								<div class="color_HEX_block" v-show="colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div>
+										{{getSelectRGB(selectColor).hex}}
+									</div>
+								</div>
+								<div class="color_rgb_block" v-show="!colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
+								</div>
 							</div>
 							
 						</div>
+                    </div>
 
-                    <div class="color_review_block">
+                    <!-- <div class="color_review_block">
                         <div class="color_review_content" :style="{background: reviewColor?.r || reviewColor?.r===0 ?`rgb(${reviewColor?.r},${reviewColor?.g},${reviewColor?.b})` : 'none'}"></div>
                         <div class="pantong_name" v-show="pantongName">{{pantongName}}</div>
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
-                    </div>
+                    </div> -->
                    
                 </div>
 
-                <div class="right_content_line">
+                <div class="right_content_line right_content_line_upload">
                     <div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
+						<i class="color_edit fi fi-bs-comments" ></i>
-                        <span>Upload Color</span>
+                        <span>Auto Recognize</span>
                     </div>
+					<div class="upload_centetn">
 						<div class="upload_item">
 							<div class="upload_file_item" v-for="(file) in fileList" :key="file">
 								<div class="upload_file_item_content" v-show="file.status !== 'done'">
@@ -61,14 +83,26 @@
 								accept=".jpg,.png,.jpeg,.bmp"
 								>
 								<div  class="upload_tip_block">
-                                <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
+									<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">
+								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
+								</div>
+								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
+								<img src="#" :title="pantongNameList[index]">
+							</div>
+						</div>
+					</div>
                     
+                   
+                </div>
+				<div class="right_content_line">
 					<div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
+						<i class="color_edit fi fi-bs-comments" ></i>
-                        <span>Key in Color Code</span>
+                        <span>Color Code</span>
                     </div>
                     <div class="get_color_block">
                         <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
@@ -76,14 +110,17 @@
                             <span class="icon iconfont icon-huoquduixiang"></span>
                             <span class="get_color_des">Extract Color</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>
         </div>
     </div>
 </template>
-<script lang="ts">
+<script>
-import { Chrome,Slider } from '@ans1998/vue3-color'
+import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
 import { Https } from "@/tool/https";
 import { defineComponent, h,ref } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
@@ -95,34 +132,41 @@ import { message,Upload} from 'ant-design-vue';
 export default defineComponent({
     components:{
         Chrome,
-        Slider
+        Slider,
+		Sketch
     },
     setup(){
-        let fileList:any = ref([])
+        let fileList = ref([])
-        let colorList:any = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
+        let colorList = [{},{},{},{},{},{},{},{}]
-        let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
+        let selectColor = ref({
+			rgba:{},
+		}) //顔色选择器默认颜色
+		let selectColorList = ref({
+		})
         return {
             fileList,
             colorList,
             selectColor,
+			selectColorList,
         }
     },
     watch:{
-        selectColor(newVal:any,oldVal:any){
+        selectColor(newVal,oldVal){
-            this.reviewColor = newVal.rgba || {}
             this.colorList[this.selectIndex] = newVal.rgba
-            let colorList =this.colorList.filter((v:any) => v && Object.keys(v).length)
+            let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
             this.setColorboardList(colorList)
         }
     },
     computed:{
         getSelectRGB(selectColor){
-            return (selectColor:any)=>{
+            return (selectColor)=>{
                 let rgba = selectColor.rgba
                 let data = {
                     r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
                     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
                 }
                 return data
             }
@@ -135,6 +179,7 @@ export default defineComponent({
             selectIndex:0,//选中的文件索引
             tcxColor:'',
             pantongName:'',//潘通值
+			pantongNameList:[],
             indicator : h(LoadingOutlined, {
                 style: {
                     fontSize: '2.4rem',
@@ -148,22 +193,59 @@ export default defineComponent({
             },
             token:'',
             uploadUrl:'',
-            store:useStore()
+            store:useStore(),
+			colorPickerVisible: true,
+			colorBlockHex:true,
+			getColorBg:false,
         }
     },
     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")
+			}
+		})
+		// if ("EyeDropper" in window) {
+		// 	console.log(true);
+		// }
+		// else {
+		// 	console.log(false);
+		// }
     },
     methods:{
+		
         //选择不同的色块
-        selectColorItem(index:any,color:any){
+        selectColorItem(index,color){
+			let hex
+			if(color.r){
+				hex = this.rgbaToHex([color.r,color.g,color.b])
+			}else{
+				hex = '#FFFFFF'
+			}
             this.selectIndex = index
-            this.reviewColor = color?.r  + ''? {r:color.r,g:color.g ,b:color.b } : {}
+            this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1},hex:hex} : {hex:''}
-            this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1}} : {}
             this.fileList = []
             this.tcxColor = ''
             this.pantongName = ''
+            this.pantongNameList = []
+			this.selectColorList= []
+			this.reviewColor= {}
+			this.getColorBg = false
         },
 
         //通过tcx获取颜色
@@ -173,11 +255,15 @@ export default defineComponent({
             }
             Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
                 if(rv && rv.name){
-                    this.reviewColor = {r:rv.r, g:rv.g, b:rv.b}
+					// let hex = this.rgbaToHex([color.r,color.g,color.b])
+					let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
+					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}
                     this.pantongName = rv.name
-                    let colorList =this.colorList.filter((v:any) => Object.keys(v).length)
+                    let colorList =this.colorList.filter((v) => Object.keys(v).length)
                     this.setColorboardList(colorList)
+					this.getColorBg = true
                 }else{
                     message.error("Can't find the TCX color")
                 }
@@ -188,15 +274,17 @@ export default defineComponent({
         clearCurrentColor(){
             this.selectColor = {}
             this.fileList = []
+			this.reviewColor={}
             this.pantongName = ''
+            this.pantongNameList = []
             this.tcxColor = ''
         },
 
-        fileUploadChange(data:any){
+        fileUploadChange(data){
             let file = data.file
             let fileData = file.originFileObj
             var reader = new FileReader();
-            reader.onload = (e:any) => {
+            reader.onload = (e) => {
                 let data_new;
                 if (typeof e.target.result === 'object') {
                 // 把Array Buffer转化为blob 如果是base64不需要
@@ -210,47 +298,110 @@ export default defineComponent({
 
                 setTimeout(()=>{
                     const colorThief = new ColorThief();
-                    let colorImage:any = this.$refs.colorImage
+                    let colorImage = this.$refs.colorImage
-                    let domImg:any = colorImage[0];
+                    let domImg = colorImage[0];
                     let color = colorThief.getColor(domImg)
-                    this.getHsvColor(color)
+					let colorHex = this.rgbaToHex(color)
-                    this.reviewColor = {r:color[0],g:color[1],b:color[2]}
+					let selectColorList = [];
-                    this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1}}
+					let selectColor = colorThief.getPalette(domImg,10)
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
+					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}
                 },100)
             };
             // 转化为base64S
             reader.readAsDataURL(fileData)
         },
-
+		rgbaToHex(rgba) { // rgba转16进制
-        beforeUpload(file:any){
+            let hex = '#';
+            for (const i of rgba) {
+                hex += Number(i).toString(16).padStart(2, '0');
+            }
+            return hex;
+        },
+		setUplpadColor(color){
+			this.selectColor  = color
+		},
+        beforeUpload(file){
             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;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.error('Image must smaller than 5MB!');
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
 
-        deleteFile(index:any){
+        deleteFile(index){
             this.fileList.splice(index, 1)
+			this.selectColorList = []
         },
 
         //通过HSV获取颜色
-        getHsvColor(color:any){
+        getHsvColor(color){
-            let hsv = rgbToHsv(color)
+            // let hsv = rgbToHsv(color)
             this.pantongName = ''
-            Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
+			// {params:{id:3}}
-                if(rv){
+			// console.log(color);
-                    this.pantongName = rv.name
+			let colorList = []
-                }
+			color.forEach((item,index)=>{
+				let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
+				colorList.push(arr)
 			})
+			
+			let hsvList = []
+			colorList.forEach((item)=>{
+				let hsv = rgbToHsv(item)
+				if(hsvList.length == 0){
+				}else{
+					if(hsvList[0].h+5){
+					}
+				}
+				
+				let obj = {
+					h:Number(hsv[0]),
+					s:Number(hsv[1]),
+					v:Number(hsv[2]),
+				}
+				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=>{
+            });
         },
 
-        setColorboardList(colorList:any){
+        setColorboardList(colorList){
-            let  newColorList = colorList.map((v:any)=>{
+            let  newColorList = colorList.map((v)=>{
                 let data = {
                     id:'',
                     name:'',
@@ -264,72 +415,68 @@ export default defineComponent({
 
         recollection(){
             let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
-            colorList.forEach((ele:any, index:number) => {
+            colorList.forEach((ele, index) => {
                 this.colorList[index] = ele.rgbValue
             });
-            this.reviewColor = this.colorList[0]
             this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
-        }
+        },
+		
 
     }
 })
 </script>
 <style lang="less">
 .colorboard_upload_modal{
-    padding: 1rem 1rem 1.8rem 1rem;
+    // padding: 1rem 1rem 1.8rem 1rem;
     height: 100%;
-    background: #F2F3FB;
+    // background: #F2F3FB;
+	position: relative;
     display: flex;
     justify-content: space-between;
-
+	padding-top: 7rem;
-    .colorboard_upload_left{
+	.modal_layout{
-        width: calc(100% - 48rem);
+		position: absolute;
-        height: 100%;
+		top: 0;
-        background: #FFFFFF;
+		left: calc(47% + 3rem);
-
+		.modal_text{
-        .upload_left_header{
+			font-size: 1.2rem;
-            padding: 1.4rem 2rem 1.6rem;
+			font-weight: 400;
-            font-size: 1.6rem;
+			color: rgba(0, 0, 0, 0.45);
-            color: #333333;
-            font-weight: bold;
 			display: flex;
 			align-items: center;
-            line-height: 2.4rem;
+			justify-content: space-between;
-            
-            .color_list{
-                font-size: 2.2rem;
-                margin-right: 0.7rem;
 		}
+		.modal_img{
+			width: 40rem;
+			height: 5rem;
+			overflow-x: hidden;
+			display: flex;
+			&.modal_img::-webkit-scrollbar {
+				display: none;
 			}
-
+			.modal_img_item{
-        .upload_left_content{
+				width: 4rem;
-            padding: 1rem 1.6rem;
+				height: 4rem;
-            height: calc(100% - 5.4rem);
+				margin: 0 1rem 1rem 0;
-            overflow-y: auto;
+				position: relative;
-
-            .upload_color_block{
-                padding: 0 0.4rem;
-                margin-bottom: 2.6rem;
-                display: inline-block;
-                vertical-align: top;
-
-                .upload_color{
-                    width: 11.5rem;
-                    height: 11.5rem;
-                    border: 0.1rem solid #DCDCEC;
 				cursor: pointer;
-                }
+				border: 0.1rem solid #DCDCEC;
-
 				.select_upload_color{
-                    border-color: #343579;
+					border: 0.1rem solid #343579;
-                }
-            }
 				}
+				.upload_color{
+					width: 100%;
+					height: 100%;
 				}
 				
+			}
+			
+			
+		}
+	}
     .colorboard_upload_right{
-        width: 47rem;
+        // width: 47rem;
         height: 100%;
         background: #FFFFFF; 
 
@@ -343,22 +490,32 @@ export default defineComponent({
             align-items: center;
 
             .color_edit{
-                font-size: 2.4rem;
+                font-size: 2rem;
-                margin-right: 0.7rem;
+                margin-right: 1rem;
+				position: absolute;
+				left: 0;
             }
 
         }
 
         .upload_right_content{
-            padding: 1rem 2.8rem;
+            // height: calc(100% - 5.4rem);
-            height: calc(100% - 5.4rem);
+			height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
             display: flex;
 
             .right_content_line{
-                margin-bottom: 2.3rem;
+				padding-left: 3rem;
-
+				position: relative;
+				padding-right: 5rem;
+				.upload_centetn{
+					overflow-x: hidden;
+					height: calc(100% - 4.4rem);
+				}
+				.upload_centetn::-webkit-scrollbar {
+					display: none;
+				}
                 .color_review_block{
                     margin-right: 4rem;
 
@@ -393,10 +550,13 @@ export default defineComponent({
                 }
 
                 .upload_file_item{
-                    margin: 0 2rem 2rem 0;
+                    // margin: 0 2rem 2rem 0;
+					margin: 0;
                     display: inline-block;
-                    width: 16.5rem;
+                    // width: 16.5rem;
-                    height: 16.5rem;
+                    // height: 16.5rem;
+					width: 12rem;
+					height: 12rem;
                     border: 1px solid #F5F5F5;
                     vertical-align: top;
 
@@ -417,6 +577,7 @@ export default defineComponent({
                             display: block;
                             max-height: 100%;
                             max-width: 100%;
+							object-fit: cover;
                         }
 
                         .delete_file_block{
@@ -438,14 +599,122 @@ export default defineComponent({
                 .upload_img_icon{
                     width: 4.6rem;
                 }
-
+				.upload_color{
+					display: flex;
+					width: 12rem;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					.upload_color_item{
+						width: 5rem;
+						height: 5rem;
+						position: relative;
+						margin-bottom: 2rem;
+						cursor: pointer;
+						.upload_color_item_bg{
+							width: 5rem;
+							height: 5rem;
+						}
+						img{
+							position: absolute;
+							width: 100%;
+							height: 100%;
+							opacity: 0;
+							top: 0;
+						}
+						// .upload_color_item_text{
+						// 	font-size: 12px;
+						// 	line-height: 1;
+						// 	text-align: center;
+						// }
+						div{
+						}
+					}
+				}
                 .color_setting_block{
-                    width: 16.5rem;
+                    // width: 16.5rem;
-                    margin-right: 4rem;
+					width: auto;
-                    margin-bottom: 7rem;
+					background: #f0eaee;
+
+					border-radius: 10px;
+					overflow: hidden;
+					// box-shadow: 2px 2px 8px #000;
+					box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+					background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+					.sketch_color{
+						box-shadow: none;
+						width: 18rem;
+						background: rgba(0,0,0,0);
+						padding-top: 1rem !important;
+						max-width: 170px;
+						padding: 0;
+						.vc-sketch{
+						}
+						.vc-sketch-saturation-wrap{
+							width: 16rem;
+							height: 16rem;
+							max-height: 170px;
+							max-width: 170px;
+							margin: auto;
+							padding-bottom: 0;
+						}
+						.vc-sketch-presets{
+							display: none;
+						}
+						.vc-botton-container{
+							display: none;
+						}
 						.vc-chrome-body{
 							display: none;
 						}
+						.vc-sketch-field{
+							display: none;
+							.vc-input__input{
+								text-align: center;
+								padding: .4rem 0;
+								border-radius: 5px;
+							}
+						}
+						.vc-sketch-color-wrap{
+							border-radius: 5px;
+							box-shadow: inset 0 0 0 1px #ccc;
+							.vc-sketch-active-color{
+							}
+							.vc-sketch-active-color{
+								display: none;
+							}
+							.vc-checkerboard{
+								display: none;
+							}
+						}
+						
+						.vc-sketch-color-wrap{
+							background-image: url(@../../../../assets/images/homePage/dropper.png);
+							background-size: 15px;
+							background-repeat: no-repeat;
+							background-position: 50%;
+							cursor: pointer;
+
+						}
+						// .vc-sketch-color-wrap{
+						// 	display: none;
+						// }
+						.vc-sketch-controls{
+							width: 90%;
+							margin: .5rem auto;
+							.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
+								.vc-hue{
+									border-radius: 15px;
+								}
+								.vc-alpha{
+									border-radius: 15px;
+									overflow: hidden;
+								}
+							}
+							.vc-sketch-alpha-wrap{
+								margin-top: .5rem;
+							}
+						}
+					}
                     .chrome_color{
                         width: 16.5rem;
                         height: 16.5rem;
@@ -485,17 +754,62 @@ export default defineComponent({
                         
                     }
 
-                    .color_rgb_block{
+                    .color_block{
-                        margin-top: 1rem;
+                        // margin-top: 1rem;
+                        // display: flex;
+                        // justify-content: space-between;
+                        // font-size: 1.6rem;
+						width: 100%;
+						padding: 0 5%;
+						padding-bottom: 5%;
+						margin: 0.5rem auto;
 						display: flex;
 						justify-content: space-between;
-                        font-size: 1.6rem;
+						align-items: center;
-                        color: #343579;
+						.color_right{
+							width: 11rem;
+							font-size: 12px;
+							color: #666666;
+							.color_rgb_block{
+								display: flex;
+								.rgb_item{
+									margin-left: .2rem;
+								}
+							}
+						}
+						.color_left{
+							cursor: pointer;
+							color: rgb(153, 153, 153);
+						}
+						.color_right,.color_left{
+							>div{
+								display: flex;
+								align-items: center;
+							}
+							.color_HEX_block,.color_rgb_block{
+								padding: .2rem .5rem;
+								box-shadow: inset 0 0 0 1px #ccc;
+								border-radius: .4rem;
+								justify-content: space-around;
+								text-transform:uppercase;
+								.color_block_bg{
+									width: 1.5rem;
+									height: 1.5rem;
+									// margin-right: .5rem;
+									display: flex;
+									justify-content: space-between;
+								}
+							}
+							.color_block_bg{
+							}
+						}
+						
                     }
                 }
 
                 .get_color_block{
-                    
+                    display: flex;
+					flex-direction: column;
                     .get_color_input{
                         width: 19.4rem;
                         height: 3.8rem;
@@ -534,11 +848,42 @@ 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%;
+						}
+					}
                 }
             }
 
             .upload_item{
-                margin-bottom: 11.6rem;
+                margin-bottom: 2rem;
+				.ant-upload-picture-card-wrapper{
+					.ant-upload-list{
+						.ant-upload-select-picture-card{
+							// margin: 0 2rem 2rem 0;
+							margin: 0;
+							display: inline-block;
+							width: 12rem;
+							height: 12rem;
+							border: 1px solid #F5F5F5;
+							vertical-align: top;
+							i{
+								zoom: 4;
+							}
+						}
+					}
+				}
             }
         }
     }

src/component/HomePage/Generate.vue

@@ -1,89 +1,218 @@
 <template>
     <div class="generate">
-		<div v-if="msg.cli == 'Sketchboard'" class="generate_checkbox">
+        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'"  class="generate_checkbox">
             <div>
                 <label>
-					<input type="checkbox" v-model="checkbox.imageOnly">
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[0].type"
+                        @click="setKeyword(0)"
+                    />
                     <span>Image Only</span>
                 </label>
             </div>
             <div>
                 <label>
-					<input type="checkbox" v-model="checkbox.textOnly">
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[1].type"
+                        @click="setKeyword(1)"
+                    />
                     <span>Text Only</span>
                 </label>
             </div>
             <div>
                 <label>
-					<input type="checkbox" v-model="checkbox.textImage">
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[2].type"
+                        @click="setKeyword(2)"
+                    />
                     <span>Text-Image</span>
                 </label>
             </div>
         </div>
-		<div v-else class="generage_input">
+        <div v-else class="input_box">
-			<input class="search_input" placeholder="Promopt input" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
+            <input
+                class="search_input"
+                placeholder="Promopt input"
+                v-model="searchPictureName"
+                @keydown.enter="getLibraryList()"
+            />
             <div class="generage_btn started_btn">Generate</div>
         </div>
-		<div v-if="msg.cli == 'Sketchboard'" class="generage_img">
+        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generage_img">
-			
+            <div class="upload_item">
+                <div
+                    class="upload_file_item"
+                    v-for="(file, index) in sketchboardList"
+                    :key="file"
+					@click.stop="setSketchboardItem(file)"
+					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'']"
+                >
+                    <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="operate_file_block">
+                            <div class="select_img_type">
+                                <div
+                                    class="select_category"
+                                    @click.stop="showFileCategory(file)"
+                                >
+                                    {{ getSketchLabel(file.category) }}
+                                    <div
+                                        :class="[
+                                            'icon',
+                                            'iconfont',
+                                            'icon-xiala',
+                                            file.categoryShow
+                                                ? 'icon_rotate'
+                                                : '',
+                                        ]"
+                                    ></div>
+                                </div>
+                                <div
+                                    class="category_list"
+                                    v-show="file.categoryShow"
+                                >
+                                    <div
+                                        :class="[
+                                            'category_item',
+                                            file.category == cate.value
+                                                ? 'select_category_item'
+                                                : '',
+                                        ]"
+                                        v-for="(
+                                            cate, index
+                                        ) in sketchCatecoryList"
+                                        :key="index"
+                                        @click.stop="selectFileCategory(file, cate)"
+                                    >
+                                        {{ cate.label }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            class="delete_file_block"
+                            @click="deleteFile(index)"
+                        >
+                            <span class="icon iconfont icon-shanchu"></span>
+                        </div>
+                    </div>
+                </div>
+                <div
+                    class="upload_file_item upload_component"
+                    v-show="sketchboardList.length != 8"
+                >
+                    <a-upload
+                        :action="uploadUrl + '/api/element/upload'"
+                        list-type="picture-card"
+                        :data="{
+                            ...upload,
+                        }"
+						:disabled="checkbox[1].type"
+                        :headers="{ Authorization: token }"
+                        v-model:file-list="sketchboardList"
+                        :before-upload="beforeUpload"
+                        multiple
+                        :maxCount="8 - sketchboardList.length"
+                        accept=".jpg,.png,.jpeg,.bmp"
+                        @change="(file) => fileUploadChange(file)"
+                    >
+                        <div
+                            class="upload_tip_block"
+                            v-show="sketchboardList.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 v-else class="generage_img">
-			<div class="generage_img_item" v-for="item,index in fileList" :key="item.imgUrl" @click="generageAdd(item)" :class="{active:item?.checked}">
+            <div
-				<img v-lazy="item.imgUrl" alt="">
+                class="generage_img_item"
+                v-for="(item, index) in fileList"
+                :key="item.imgUrl"
+                @click="generageAdd(item)"
+                :class="{ active: item?.checked }"
+            >
+                <img v-lazy="item.imgUrl" alt="" />
             </div>
         </div>
     </div>
-    
 </template>
 <script lang="ts">
-import { defineComponent, ref} from 'vue'
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { message, Upload } from "ant-design-vue";
+import { defineComponent, computed, h, ref, nextTick } from "vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import { message } from 'ant-design-vue';
+import GO from "@/tool/GO";
-import GO from '@/tool/GO';
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
 export default defineComponent({
     props: ["msg"],
-    setup(prop) {
+    setup() {
         // console.log(prop.msg);
-		let checkbox={
+        let checkbox = ref([
-			imageOnly:false,
-			textOnly:false,
-			textImage:false,
-		}
-        let imgList = ref([])
-        let selectImgList:any = ref([])
-        let selectImgListIds:any = ref([])
-        let isShowLoading:any = ref(false)
-        let selectCode:any = ref('')
-        let currentPage:any = ref(1)
-        let searchPictureName = ref('')
-        let pageSize = ref(20)
-        let total = ref(0)
-        let searcMaterialhName:any = ref('') //搜索名字
-        let designType:any = ref(null)
-		let store = useStore()
-		let fileList = ref([
             {
-			imgUrl:'https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png',
+                name: "image",
-			id_:1
+                type: false,
-			
             },
             {
-			imgUrl:'https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png',
+                name: "text",
-			id_:2
+                type: true,
-			
             },
             {
-			imgUrl:'https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png',
+                name: "text-image",
-			id_:3
+                type: false,
-			
+            },
-		},{
+        ]);
-			imgUrl:'https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png',
+		let checkboxImage = ref()
-			id_:4
+        let imgList = ref([]);
-			
+        let selectImgList: any = ref([]);
-		}
+        let selectImgListIds: any = ref([]);
-			
+        let isShowLoading: any = ref(false);
-		])
+        let selectCode: any = ref("");
+        let currentPage: any = ref(1);
+        let searchPictureName = ref("");
+        let pageSize = ref(20);
+        let total = ref(0);
+        let searcMaterialhName: any = ref(""); //搜索名字
+        let designType: any = ref(null);
+        let store = useStore();
+        let fileList: any = ref([
+            {
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+        ]);
+		let sketchboardList:any = ref([])
+		let collectionElementid = ref()
+		let level2Type = ref('')
         return {
             imgList,
             selectImgList,
@@ -99,7 +228,58 @@ export default defineComponent({
             checkbox,
             store,
             fileList,
-        }
+			sketchboardList,
+			collectionElementid,
+			level2Type,
+			checkboxImage,
+        };
+    },
+    data(prop) {
+        return {
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+                level1Type: prop.msg,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+            moodboarList: computed(() => {
+                return useStore().state.UploadFilesModule.moodboard;
+            }),
+            type_: {
+                type1: "generate",
+                type2: prop.msg,
+            },
+            sketchCatecoryList: [
+                {
+                    value: "Outwear",
+                    label: "Outwear",
+                },
+                {
+                    value: "Blouse",
+                    label: "Blouse",
+                },
+                {
+                    value: "Dress",
+                    label: "Dress",
+                },
+                {
+                    value: "Trousers",
+                    label: "Trousers",
+                },
+                {
+                    value: "Skirt",
+                    label: "Skirt",
+                },
+            ],
+			
+        };
     },
     mounted() {
         // this.fileList.forEach((item,index)=>{
@@ -108,56 +288,193 @@ export default defineComponent({
         // 	item.id_ = GO.id++
         // })
         // this.store.commit("addGenerateFils", this.fileList);
+        this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+		console.log(getUploadUrl());
 		
     },
+    computed: {
+        getSketchLabel(value: any) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
+                }
+                return lable;
+            };
+        },
+    },
     methods: {
-		
         generageAdd(data: any) {
-			data.type_ = 'generate'
+            data.type_ = this.type_;
             this.store.commit("addGenerateMaterialFils", data);
         },
-        getLibraryList(){
+        beforeUpload(file: any) {
-            let data = {
+            const isJpgOrPng =
-                level1Type:this.selectCode,
+                file.type === "image/jpeg" ||
-                level2Type:this.designType,
+                file.type === "image/png" ||
-                page:this.currentPage,
+                file.type === "image/jpg" ||
-                pictureName:this.searchPictureName,
+                file.type === "image/bmp";
-                size:this.pageSize,
+            if (!isJpgOrPng) {
+                message.error("You can only upload Image file!");
             }
-            this.isShowLoading = true
+            const isLt2M = file.size / 1024 / 1024 < 2;
-            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
+            if (!isLt2M) {
-                (rv: any) => {
+                message.error("Image must smaller than 5MB!");
-                    this.imgList = rv.content
-                    this.total = rv.total
-                    this.isShowLoading = false
             }
-            ).catch((res)=>{
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-                this.isShowLoading = false
+        },
+        setKeyword(num: any) {
+            this.checkbox.forEach((v: any) => {
+                v.type = false;
             });
+			
+			nextTick().then(()=>{
+				this.checkbox[num].type = true
+			})
+			this.$emit('generateCheckbox',this.checkbox[0].type)
+			this.checkboxImage = this.checkbox[1].type
+			if(this.checkboxImage){
+				this.sketchboardList.forEach((v:any)=>{
+					v.checked = false
+				})
+			}
+        },
+        getLibraryList() {
+            // let data = {
+            //     level1Type: this.selectCode,
+            //     level2Type: this.designType,
+            //     page: this.currentPage,
+            //     pictureName: this.searchPictureName,
+            //     size: this.pageSize,
+            // };
+            // this.isShowLoading = true;
+            // Https.axiosPost(Https.httpUrls.queryLibraryPage, data)
+            //     .then((rv: any) => {
+            //         this.imgList = rv.content;
+            //         this.total = rv.total;
+            //         this.isShowLoading = false;
+            //     })
+            //     .catch((res) => {
+            //         this.isShowLoading = false;
+            //     });
+        },
+        fileUploadChange(data: any) {
+			console.log(data);
+			
+            let file = data.file;
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+                file.id = res.data.id;
+                file.imgUrl = res.data.url;
+                file.resData = res.data;
+                file.type_ = "upload";
+                file.id_ = GO.id++;
+                file.category = "Outwear";
+                let fileList = this.sketchboardList.filter(
+                    (v: any) => v.status === "done"
+                );
+                let arr = this.store.state.UploadFilesModule.sketchboard;
+                if (arr.length >= 8) {
+                    message.error("You can select up to 8 images");
+                } else {
+                    // this.store.commit("setSketchboardFile", fileList);
+					this.sketchboardList = fileList
+                    // this.store.commit("clearMoodTemplateId");
+                }
+            } else if (file.status === "error") {
+                let index = -1;
+                this.sketchboardList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.sketchboardList.splice(index, 1);
+                }
+                message.error(file.name + "upload failed");
+            }
+        },
+        showFileCategory(file: any) {
+            file.categoryShow = true;
+            document.addEventListener("click", this.hiddenFileCategory);
+        },
+        selectFileCategory(file: any, cate: any) {
+            file.category = cate.value;
+			file.categoryShow = false
+            // this.store.commit("setSketchboardFile", this.sketchboardList);
+        },
+        hiddenFileCategory() {
+            for (let item of this.sketchboardList) {
+                item.categoryShow = false;
+            }
+            document.removeEventListener("click", this.hiddenFileCategory);
         },
 
-        closeModal(){
+		setSketchboardItem(item:any){
-            // this.myMaterialModalShow = false
+			if(this.checkboxImage){
-            this.searchPictureName = ''
+				return
-            this.designType = null
-            this.selectImgList = []
-            this.selectImgListIds = []
-            this.imgList = []
-            this.currentPage = 1
-            this.pageSize = 10
-            this.total = 0
 			}
+			if(item.checked){
+				item.checked = false
+			}else{
+				this.sketchboardList.forEach((v:any)=>{
+					if(v.checked){
+						v.checked = false
 					}
 				})
+				item.checked = true
+			}
+			this.collectionElementid = item.id
+			this.level2Type = item.category
+		},
+        deleteFile(item: any) {
+            if (item.type_ == "generate" || item.type_ == "material") {
+                this.store.commit("addGenerateMaterialFils", item);
+            } else {
+                this.sketchboardList =
+                    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.sketchboardList.splice(moodboard, 1);
+                this.store.commit("setSketchboardFile", this.sketchboardList);
+            }
+            this.store.commit("clearMoodTemplateId");
+        },
+        closeModal() {
+            // this.myMaterialModalShow = false
+            this.searchPictureName = "";
+            this.designType = null;
+            this.selectImgList = [];
+            this.selectImgListIds = [];
+            this.imgList = [];
+            this.currentPage = 1;
+            this.pageSize = 10;
+            this.total = 0;
+        },
+    },
+});
 </script>
 <style lang="less">
 .generate {
     height: 30rem;
     overflow-x: hidden;
     border-right: 1px solid #e5e5e5;
-	&.generate::-webkit-scrollbar{display: none;}
+    &.generate::-webkit-scrollbar {
+        display: none;
+    }
 
-	.generate_checkbox,.generage_input{
+    .generate_checkbox,
+    .generage_input {
         display: flex;
         align-items: center;
         position: sticky;
@@ -165,6 +482,7 @@ export default defineComponent({
         background: #fff;
         padding-top: 2.5rem;
         padding-bottom: 2rem;
+        z-index: 2;
     }
     .generate_checkbox {
         div {
@@ -173,7 +491,7 @@ export default defineComponent({
                 display: flex;
                 cursor: pointer;
                 input {
-					margin-right: .5rem;
+                    margin-right: 0.5rem;
                     padding-left: 1.5rem;
                 }
                 span {
@@ -181,32 +499,9 @@ export default defineComponent({
                     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;
@@ -215,11 +510,11 @@ export default defineComponent({
             cursor: pointer;
             margin: 0 2rem 2rem 0;
             &.active {
-				opacity: .5;
+					opacity: 0.5;
 					// border: 2px solid;
 					border-radius: 1rem;
 					img {
-					transform: scale(.9);
+						transform: scale(0.9);
 					}
 				}
             img {
@@ -227,6 +522,137 @@ export default defineComponent({
                 height: 10rem;
             }
         }
+        .upload_item {
+            .upload_file_item {
+				&.active {
+					opacity: 0.5;
+					// border: 2px solid;
+					border-radius: 1rem;
+					transform: scale(0.9);
+					img {
+					}
+				}
+				&.forbidden{
+					cursor:not-allowed;
+					img{
+						cursor:not-allowed;
+					}
+				}
+                .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%;
+                    }
+
+                    .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;
+                    }
+
+                    .operate_file_block {
+                        width: 100%;
+                        height: 3rem;
+                        font-size: 1.6rem;
+                        color: #ffffff;
+                        position: absolute;
+                        left: 0;
+                        bottom: 0;
+
+                        .select_img_type {
+                            height: 100%;
+                            line-height: 3rem;
+                            text-align: center;
+                            background: rgba(0, 0, 0, 0.6);
+                            position: relative;
+
+                            .select_category {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+
+                                .icon-xiala {
+                                    margin-left: 0.8rem;
+                                }
+                            }
+
+                            .icon_rotate {
+                                -moz-transform: rotate(180deg);
+                                -webkit-transform: rotate(180deg);
+                                transform: rotate(180deg);
+                                animation-direction: 0.5s;
+                            }
+
+                            .category_list {
+                                position: absolute;
+                                width: 100%;
+                                cursor: pointer;
+                                position: absolute;
+                                // top: 3.1rem;
+                                margin-top: 0.2rem;
+                                left: 0;
+                                background: rgba(0, 0, 0, 0.4);
+                                border: 1px solid #343579;
+                                border-radius: 0.8rem;
+                                // overflow: hidden;
+                                z-index: 2;
+                                height: 9rem;
+                                overflow-x: hidden;
+                                &.category_list::-webkit-scrollbar {
+                                    display: none;
+                                }
+
+                                .category_item {
+                                    text-align: left;
+                                    font-size: 1.4rem;
+                                    padding: 1rem 1.9rem;
+                                    line-height: 1.6rem;
+
+                                    &.select_category_item {
+                                        background: linear-gradient(
+                                            160deg,
+                                            #ac2a3b,
+                                            #292161
+                                        );
+                                    }
+
+                                    &:hover {
+                                        background: linear-gradient(
+                                            160deg,
+                                            #ac2a3b,
+                                            #292161
+                                        );
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 .my_material_modal {
@@ -244,7 +670,7 @@ export default defineComponent({
     }
 
     .ant-modal-body {
-        background: #F2F3FB;
+        background: #f2f3fb;
         height: 80vh;
         min-height: 72rem;
         overflow-y: hidden;
@@ -257,7 +683,7 @@ export default defineComponent({
         align-items: center;
         width: 100%;
         height: 6.6rem;
-        background: #F7F7F7;
+        background: #f7f7f7;
         padding: 0 3.4rem 0 3.1rem;
 
         .my_material_title {
@@ -280,13 +706,13 @@ export default defineComponent({
                     padding-left: 1.5rem;
                     height: 4rem;
                     line-height: 3.8rem;
-                    background: #FFFFFF;
+                    background: #ffffff;
-                    border: 0.1rem solid #F1F1F1;
+                    border: 0.1rem solid #f1f1f1;
                     font-size: 1.6rem;
                     font-weight: 400;
 
                     &::placeholder {
-                        color: #C2C2C2;
+                        color: #c2c2c2;
                     }
                 }
 
@@ -300,7 +726,7 @@ export default defineComponent({
 
                     .icon-sousuo {
                         font-size: 2rem;
-                        color: #FFFFFF;
+                        color: #ffffff;
                     }
                 }
             }
@@ -311,8 +737,6 @@ export default defineComponent({
                 cursor: pointer;
             }
         }
-
-        
     }
 
     .my_material_content {
@@ -338,12 +762,12 @@ export default defineComponent({
                 align-items: center;
 
                 .select_block {
-                    background: #FFFFFF;
+                    background: #ffffff;
-                    color: #1A1A1A !important;
+                    color: #1a1a1a !important;
                     margin-right: 2.3rem;
 
                     .icon-xiala {
-                        color: #1A1A1A !important;
+                        color: #1a1a1a !important;
                     }
                 }
 
@@ -351,18 +775,18 @@ export default defineComponent({
                     display: flex;
                     align-items: center;
                     font-size: 1.6rem;
-                    color: #64686D;
+                    color: #64686d;
                     cursor: pointer;
 
                     &.check_all {
-                        color: #1A1A1A;
+                        color: #1a1a1a;
                     }
 
                     .check_block {
                         width: 2.4rem;
                         height: 2.4rem;
-                        background: #EBECF4;
+                        background: #ebecf4;
-                        border: 0.1rem solid #64686D;
+                        border: 0.1rem solid #64686d;
                         padding: 0.3rem;
                         margin-right: 0.7rem;
 
@@ -374,7 +798,6 @@ export default defineComponent({
                     }
                 }
             }
-
         }
 
         .material_content_body {
@@ -412,7 +835,6 @@ export default defineComponent({
                         max-width: 100%;
                         max-height: 100%;
                     }
-
                 }
                 .content_img_name {
                     width: 16.5rem;
@@ -426,8 +848,6 @@ export default defineComponent({
                     color: #030303;
                 }
             }
-
-            
         }
 
         .no_data_block {
@@ -453,7 +873,7 @@ export default defineComponent({
             font-size: 1.4rem;
             text-align: center;
             margin: 0 auto;
-            color: #FFFFFF;
+            color: #ffffff;
             background: #343579;
             cursor: pointer;
             margin-top: 2rem;

src/component/HomePage/Material.vue

@@ -69,7 +69,8 @@ import { useStore } from "vuex";
 import GO from '@/tool/GO';
 
 export default defineComponent({
-    setup() {
+    props: ["msg"],
+    setup(prop) {
         let myMaterialModalShow = ref(false)
         let imgList = ref([])
 		let store = useStore()
@@ -122,7 +123,15 @@ export default defineComponent({
             searcMaterialhName,
             designType,
             disignTypeList,
-            boardList
+            boardList,
+        }
+    },
+	data (prop) {
+		return {
+			type_ : {
+				type1:'material',
+				type2:prop.msg
+			}
 		}
 	},
     methods:{
@@ -145,7 +154,7 @@ export default defineComponent({
             //     this.selectImgList.splice(index,1)
             //     this.selectImgListIds.splice(index,1)
             // }
-			imgData.type_ = 'material'
+			imgData.type_ = this.type_
 			this.store.commit("addGenerateMaterialFils", imgData);
         },
 

src/component/HomePage/MoodboardUpload.vue

@@ -3,21 +3,21 @@
         <div class="modal_left">
             <div class="switch_type_list">
                 <div
-                    @click="open(1)"
+                    @click.stop="open(1)"
                     class="switch_type_item"
                     :class="[openClick == 1 ? 'select_swtich' : '']"
                 >
                     <span>Upload</span>
                 </div>
                 <div
-                    @click="open(2)"
+                    @click.stop="open(2)"
                     class="switch_type_item"
                     :class="[openClick == 2 ? 'select_swtich' : '']"
                 >
                     <span>Library</span>
                 </div>
                 <div
-                    @click="open(3)"
+                    @click.stop="open(3)"
                     class="switch_type_item"
                     :class="[openClick == 3 ? 'select_swtich' : '']"
                 >
@@ -95,11 +95,12 @@
                 v-show="openClick == 2"
                 ref="Material"
                 @confirmSelect="confirmSelect"
+                msg="Moodboard"
             ></Material>
             <Generate
                 v-show="openClick == 3"
                 ref="Generate"
-                :msg="sonData"
+                msg="Moodboard"
             ></Generate>
         </div>
         <div v-show="moodboarList.length" class="modal_right">
@@ -188,15 +189,9 @@ export default defineComponent({
             uploadUrl: "",
             moodTemplateId: "", //模板id
             store: useStore(),
-            sonData: {
-                cli: "Moodboard",
-            },
 			moodb_:moodb.moodb_,
 			moodboarList:computed(()=>{
-			
+				return  useStore().state.UploadFilesModule.moodboard
-				return [...useStore().state.UploadFilesModule.moodboardFiles,
-				...useStore().state.UploadFilesModule.generateFiles,
-				...useStore().state.UploadFilesModule.MaterialFiles]
 			}),
 			
         };
@@ -235,7 +230,7 @@ export default defineComponent({
                 let fileList = this.fileList.filter(
                     (v: any) => v.status === "done"
                 );
-				let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
+				let arr =  this.store.state.UploadFilesModule.moodboard
 				if(arr.length >= 8){
 					message.error('You can select up to 8 images')
 				}else{
@@ -291,7 +286,7 @@ export default defineComponent({
         },
 
         deleteFile(item: any) {
-			if(item.type_ == 'generate' || item.type_ == 'material'){
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
 				this.store.commit("addGenerateMaterialFils", item);
 				
 			}else{
@@ -303,7 +298,11 @@ export default defineComponent({
 						
 					}
 				})
+				console.log(this.fileList);
+				
 				this.fileList.splice(moodboard,1)
+				console.log(this.fileList);
+
 				this.store.commit("setMoodboardFile", this.fileList);
 			}
             this.store.commit("clearMoodTemplateId");
@@ -328,13 +327,10 @@ export default defineComponent({
 				layout.init()
         },
 		layout(){
-			let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
+			let arr = this.store.state.UploadFilesModule.moodboard
 			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{
@@ -460,70 +456,7 @@ export default defineComponent({
                 margin-bottom: 1rem;
             }
 
-            .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;

src/component/HomePage/PrintboardUpload.vue

@@ -1,25 +1,26 @@
 <template>
     <div class="printboard_upload_modal">
+		
         <div class="printboard_left_upload">
             <div class="left_upload_header">
                 <div class="upload_header_item">
                     <div class="switch_type_list">
                         <div
-							@click="open(1)"
+							@click.stop="open(1)"
 							class="switch_type_item"
 							:class="[openClick == 1 ? 'select_swtich' : '']"
 						>
 							<span>Upload</span>
 						</div>
 						<div
-							@click="open(2)"
+							@click.stop="open(2)"
 							class="switch_type_item"
 							:class="[openClick == 2 ? 'select_swtich' : '']"
 						>
 							<span>Library</span>
 						</div>
 						<div
-							@click="open(3)"
+							@click.stop="open(3)"
 							class="switch_type_item"
 							:class="[openClick == 3 ? 'select_swtich' : '']"
 						>
@@ -27,10 +28,6 @@
 						</div>
                     </div>
                 </div>
-                <div class="upload_header_item">
-                    <div><span class="select_img_num">{{getPinLength}}</span><span class="select_tip">selected</span></div>
-                    <div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
-                </div>
             </div>
              <div v-show="openClick == 1" class="printboard_body">
                 <div class="upload_img_body">
@@ -42,7 +39,7 @@
                                 </div>
                                 <div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
                                     <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
-                                    <div class="delete_file_block" @click.stop="deleteFile(index,file)">Delete</div>
+                                    <div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
                                 </div>
                             </div>
                             <div class="pin_block" v-show="file?.status === 'done'">
@@ -67,44 +64,49 @@
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="fileUploadChange"
                                 >
-                                <div  class="upload_tip_block" >
+								<div
-                                    <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
+                                    class="upload_tip_block"
+                                >
+                                    <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 class="upload_max_tip">
-                    <span class="icon iconfont icon-zhuyi"></span>
-                    <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
-                </div>
             </div>
 			<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
         </div>
-        <div class="generate_print">
+		<div class="modal_right">
-            <div class="generate_print_header">
+			<div class="modal_layout">
-                <div class="generate_title">Generate New Print</div>
+				<div class="modal_text">
-                <div class="generate_save_button" @click="savePrint()">Save</div>
+					<div>Thumbnail preview of selected moodboard</div>
+					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
 				</div>
-            <div class="generate_print_content_block">
+				<div class="modal_img">
-                <div class="generate_print_content scroll_style">
+					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
-                    <div class="image_block" v-for="(img, index) in printImgList" :key="index">
+						<img v-lazy="item.imgUrl">
-                        <div class="image_block_content">
+						<div class="checked" >
-                            <img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
+							<i class="fi fi-rr-trash"></i>
-                            <div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
 						</div>
 					</div>
 				</div>
-                <div class="generate_loading_mark" v-show="generateloading">
+			</div>
-                    <a-spin size="large" />
+			<div v-show="openClick == 3" class="modal_accomplish">
+				<div class="input_box">
+					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
+					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
+				</div>
+				<div class="modal_img">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
+						<img :src="item.imgUrl">
 					</div>
 				</div>
-            
 			</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> -->
     </div>
 </template>
 <script lang="ts">
@@ -130,11 +132,32 @@ export default defineComponent({
             printImgList:any = ref([]), //print的印花图片
             moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
         let openClick: any = ref(1);
+		let generateCheckbox:any = ref()
+		let generateList:any = ref([
+		{
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+		])
         return {
             fileList,
             printImgList,
             moodBoards,
-			openClick
+			openClick,
+			generateCheckbox,
+			generateList,
         }
     },
     computed:{
@@ -170,9 +193,10 @@ export default defineComponent({
             currentFileNum:0, //当前上传的文件数
             isUpload:false,
             generateloading:false,
-			sonData: {
+			captionGeneration:'',
-                cli: "Printboard",
+			printboardList:computed(()=>{
-            },
+				return  useStore().state.UploadFilesModule.printboard
+			}),
 
         }
     },
@@ -232,16 +256,24 @@ export default defineComponent({
             
         },
 
-        deleteFile(index:any,file:any){
+        deleteFile(item:any){
-            this.fileList.splice(index, 1)
+            // this.fileList.splice(item, 1)
-            this.store.commit('setPrintboardFile',this.fileList)
+            // this.store.commit('setPrintboardFile',this.fileList)
-        },
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				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
 						
-        deleteGenerateFile(index:any){
+					}
-            this.printImgList.splice(index, 1)
+				})
-            this.store.commit('setGeneratePrintFile',this.printImgList)    
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
         },
-        
         randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
             let index = Math.floor(Math.random() * (max - min)) + min;
             while(index === num){
@@ -478,53 +510,123 @@ export default defineComponent({
             }
             this.store.commit('setPrintboardFile',this.fileList)
             
-        }
+        },
+		getgenerateCheckbox(value:any){
+			this.generateCheckbox = value
+		},
+		getgenerate(){
 			
+			let generage:any = this.$refs.Generate
+			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
+			let data = {
+				generateType:generateType,
+				designType:'',
+				collectionElementId:generage.collectionElementid,
+				level1Type:generage.upload.level1Type,
+				level2Type:generage.level2Type,
+				// text:this.captionGeneration,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				version:1,//为1就是Print
+			}
+			if(generateType == 'image'||generateType == 'text-image'){
+				if(generage.collectionElementid){
+				}else{
+					message.error(
+						"Please select a picture"
+					);
+					return
+				}
+			}else if(generateType == 'text'){
+				// this.beforeUpload(false)
+				// if(this.captionGeneration){
+				// }else{
+				// 	message.error(
+				// 		"Please enter content"
+				// 	);
+				// 	return
+				// }
+			}
+			if(generateType == 'text'){
+				data.collectionElementId = ''
+				data.level2Type = ''
+			}
+			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
+                (rv) => {
+					// if(rv){
+						
+					// }
+					console.log(rv);
+					
+                }
+            ).catch(res=>{
+            });
+		},
+		generageAdd(item:any){
+			item.type_ = {
+                type1: "generate",
+                type2: 'Printboard',
+            },
+            this.store.commit("addGenerateMaterialFils", item);
+		}
      }
 
 })
 </script>
 <style lang="less" scoped>
 .printboard_upload_modal{
-    padding: 1rem 1rem 1.8rem 1rem;
+    // padding: 1rem 1rem 1.8rem 1rem;
 	height: 100%;
-    background: #F2F3FB;
     display: flex;
-    justify-content: space-between;
-
     .printboard_left_upload{
-        width: calc(100% - 39.8rem);
+        // width: calc(100% - 39.8rem);
-        height: 100%;
+        // height: 100%;
-        background: #fff;
+        // background: #fff;
-        padding: 0.5rem 2.2rem 2rem 2.6rem;
+        // padding: 0.5rem 2.2rem 2rem 2.6rem;
-        box-sizing: border-box;
+        // box-sizing: border-box;
-        
+        padding-top: 4rem;
-        .left_upload_header{
+        width: 47%;
-            display: flex;
-            justify-content: space-between;
-
-            .upload_header_item{
-                display: flex;
-                align-items: center;
-
         .switch_type_list {
             display: flex;
             align-items: center;
+            position: relative;
 
             .switch_type_item {
                 display: flex;
                 align-items: center;
-                        padding: 0 2rem;
+                // padding: 0 2rem;
                 height: 4rem;
                 background: #fff;
+                border-radius: 0.8rem;
                 line-height: 4rem;
                 font-size: 1.6rem;
-                        margin-right: 2.2rem;
+                // margin-right: 2.2rem;
-                        color: #5B5E69;
+                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: #343579;
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
                 }
 
                 .switch_icon {
@@ -532,56 +634,38 @@ export default defineComponent({
                     margin-right: 0.8rem;
                 }
             }
-                    
-                }
-
-                .select_img_num{
-                    font-size: 2rem;
-                    color: #030303;
-                    font-weight: bold;
-                }
-
-                .select_tip{
-                    font-size: 1.6rem;
-                    margin-left: 0.9rem;
-                    color: #B7B7B7;
-                }
-
-                .recollection_button{
-                    padding: 0 1rem;
-                    height: 3.2rem;
-                    line-height: 3.2rem;
-                    background: #E6E6F6;
-                    font-size: 1.2rem;
-                    color: #343579;
-                    margin-left: 0.9rem;
-                    cursor: pointer;
-                }
-                
-            }
-
-            
         }
 
         .printboard_body{
-            margin-top: 1rem;
             height: calc(100% - 5rem);
-            
+			padding-top: 2.5rem;
+			height: 30rem;
+			overflow-x: hidden;
+			border-right: 1px solid #e5e5e5;
+			&.printboard_body::-webkit-scrollbar {
+            display: none;
+        }
             .upload_img_body{
                 height: calc(100% - 3rem);
                 overflow-y: auto;
                 margin-bottom: 1rem;
+				&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
             }
 		
             .upload_file_item{
-                margin: 0 2rem 2rem 0;
+                margin: 0 2rem 4rem 0;
+				// margin: 0 2rem 2rem 0;
 				display: inline-block;
+				width: 10rem;
+				height: 10rem;
+				border: 1px solid #f5f5f5;
 				vertical-align: top;
-
+				position: relative;
-                .upload_file_img_block{
+				img{
-                    width: 16.5rem;
+					width: 100%;
-                    height: 16.5rem;
+					height: 100%;
-                    border: 1px solid #F5F5F5;
 				}
 
                 .pin_block{
@@ -591,167 +675,240 @@ export default defineComponent({
 
                 &.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;
+					}
+                }
+				.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;
 			}
-
 			.upload_file_item_content{
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 height: 100%;
-                    width: 100%;
                 position: relative;
                 cursor: pointer;
+                .upload_img{
+                    display: block;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
 
+                .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;
                 }
 
-                    .upload_img{
+                .operate_file_block{
-                        display: block;
-                        height: 100%;
                     width: 100%;
-                    }
+                    height: 3rem;
-
-                    .delete_file_block{
-                        display: none;
-                        width: 100%;
-                        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;
+
+                    .select_img_type{
+                        height: 100%;
+                        line-height: 3rem;
+                        text-align: center;
+                        background: rgba(0,0,0,0.6);
+                        position: relative;
+
+                        .select_category{
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .icon-xiala{
+                                margin-left: 0.8rem;
                             }
                         }
 
+                        .icon_rotate{
+                            -moz-transform:rotate(180deg);
+                            -webkit-transform:rotate(180deg);
+                            transform: rotate(180deg);
+                            animation-direction: 0.5s;
+                        }
+
+                        .category_list{
+							position: absolute;
+                            width: 100%;
+                            cursor: pointer;
+                            position: absolute;
+                            // top: 3.1rem;
+							margin-top: .2rem;
+                            left: 0;
+                            background: rgba(0,0,0,0.4);
+                            border: 1px solid #343579;
+                            border-radius: 0.8rem;
+                            // overflow: hidden;
+                            z-index: 2;
+							height: 9rem;
+							overflow-x: hidden;
+							&.category_list::-webkit-scrollbar{display: none;}
+
+                            .category_item{
+                                text-align: left;
+                                font-size: 1.4rem;
+                                padding: 1rem 1.9rem;
+                                line-height: 1.6rem;
+
+                                &.select_category_item{
+                                    background: linear-gradient(160deg, #AC2A3B, #292161);
+                                }
+
+                                &:hover{
+                                    background: linear-gradient(160deg, #AC2A3B, #292161);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
                 .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;
-                }
-            }
         }
     }
 
-    .generate_print{
+	.modal_right{
-        width: 38.4rem;
+		flex: 1;
-        height: 100%;
+		margin-left: 3rem;
-        background: #fff;
+		.modal_layout,.modal_accomplish{
-
+			.modal_text{
-        .generate_print_header{
+				font-size: 1.2rem;
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-            padding: 1rem 1rem 2.5rem 2.5rem;
-
-            .generate_title{
-                font-size: 1.6rem;
-                font-weight: bold;
-                color: #030303;
-            }
-            .generate_save_button{
-                background: #E6E6F6;
-                padding: 0.1rem;
-                padding: 0 2.7rem;
-                font-size: 1.4rem;
-                height: 3.2rem;
-                line-height: 3.2rem;
-                cursor: pointer;
-                color: #343579;
-
 			}
 		}
-
+		.modal_layout{
-        .generate_print_content_block{
+			.modal_img{
-            height: calc(100% - 6.7rem);
+				width: 40rem;
-            position: relative;
+				height: 5rem;
-
+				overflow-x: hidden;
-            .generate_loading_mark{
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
 				display: flex;
-                align-items: center;
+				flex-direction: row;
-                justify-content: center;
+				&.modal_img::-webkit-scrollbar {
-                background: rgba(0,0,0,0.4);
-                z-index: 2;
-            }
-
-            .generate_print_content{
-                overflow-y: auto;
-                height: 100%;
-                padding:0 0.8rem;
-                position: relative;
-
-                
-
-                .image_block{
-                    display: inline-block;
-                    margin-right: 1.6rem;
-                    margin-bottom: 1.6rem;
-                    width: 16.5rem;
-                    height: 16.5rem;
-                    border: 0.1rem solid #F5F5F5;
-                    vertical-align: top;
-
-                    &:nth-child(2n){
-                        margin-right: 0;
-                    }
-
-                    .image_block_content{
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-
-                        &:hover .delete_file_block{
-                            display: block;
-                        }
-
-                        .delete_file_block{
 					display: none;
-                            width: 100%;
+				}
+				.modal_img_item{
+					width: 4rem;
 					height: 4rem;
-                            background: rgba(0,0,0,0.2);
+					margin: 0 1rem 1rem 0;
-                            font-size: 1.6rem;
+					position: relative;
-                            color: #FFFFFF;
-                            line-height: 4rem;
-                            text-align: center;
-                            position: absolute;
-                            left: 0;
-                            bottom: 0;
 					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;
 					}
 				}
 				
-                    .image_body{
+			}
-                        max-width: 100%;
+		}
-                        max-height: 100%;
+		.modal_accomplish{
+			// margin-top: 2rem;
+			height: 30rem;
+			display: flex;
+			flex-direction: column;
+			.modal_text{
+				padding-top: 2rem;
+				padding-block: 2rem;
+			}
+			.input_box{
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				.modal_imgItem{
+					margin: 0 2rem 2rem 0;
+					display: inline-block;
+					width: 10rem;
+					height: 10rem;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					img{
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: 1rem;
+						img {
+							transform: scale(0.9);
+						}
 					}
 				}
 			}
 		}
-
-        
 	}
 }
 

src/component/HomePage/SketchboardUpload.vue

@@ -1,49 +1,123 @@
 <template>
     <div class="sketchboard_upload_modal">
+        <div class="modal_left">
             <div class="switch_type_list">
-            <div class="switch_type_item select_swtich">
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
                     <span>Upload</span>
                 </div>
-             <div @click="openLibrary()" class="switch_type_item">
+                <div
-                <span>My Library</span>
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>Library</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item"
+                    :class="[openClick == 3 ? 'select_swtich' : '']"
+                >
+                    <span>Generate</span>
                 </div>
             </div>
-
+            <div v-show="openClick == 1" class="sketchboard_body">
-         <div class="sketchboard_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
-                        <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
+                            class="upload_file_item"
-                            <a-spin  :indicator="indicator" tip="Uploading..."/>
+                            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'">
+                            <div
-                            <img  :src="file?.imgUrl" class="upload_img">
+                                class="upload_file_item_content"
+                                v-show="file?.status === 'done'"
+                            >
+                                <img :src="file?.imgUrl" class="upload_img" />
                                 <div class="operate_file_block">
-                                <!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
                                     <div class="select_img_type">
-                                    <div class="select_category" @click.stop="showFileCategory(file)">
+                                        <div
+                                            class="select_category"
+                                            @click.stop="showFileCategory(file)"
+                                        >
                                             {{ getSketchLabel(file.category) }}
-                                         <div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
+                                            <div
+                                                :class="[
+                                                    'icon',
+                                                    'iconfont',
+                                                    'icon-xiala',
+                                                    file.categoryShow
+                                                        ? 'icon_rotate'
+                                                        : '',
+                                                ]"
+                                            ></div>
                                         </div>
-                                    <div class="category_list" v-show="file.categoryShow">
+                                        <div
-                                        <div :class="['category_item', file.category == cate.value?'select_category_item':'']"  v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectFileCategory(file,cate)">{{cate.label}}</div>
+                                            class="category_list"
+                                            v-show="file.categoryShow"
+                                        >
+                                            <div
+                                                :class="[
+                                                    'category_item',
+                                                    file.category == cate.value
+                                                        ? 'select_category_item'
+                                                        : '',
+                                                ]"
+                                                v-for="(
+                                                    cate, index
+                                                ) in sketchCatecoryList"
+                                                :key="index"
+                                                @click="
+                                                    selectFileCategory(
+                                                        file,
+                                                        cate
+                                                    )
+                                                "
+                                            >
+                                                {{ cate.label }}
                                             </div>
                                         </div>
                                     </div>
-                            <div class="delete_file_block" @click="deleteFile(index)">
+                                </div>
-                                <span class="icon iconfont icon-shanchu"></span>
+                                <div
+                                    class="delete_file_block"
+                                    @click="deleteFile(file)"
+                                >
+                                    <span
+                                        class="icon iconfont icon-shanchu"
+                                    ></span>
                                 </div>
                             </div>
-                        <div class="pin_block" v-show="file?.status === 'done'">
+                            <div
-                            <a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
+                                class="pin_block"
+                                v-show="file?.status === 'done'"
+                            >
+                                <a-checkbox v-model:checked="file.pin"
+                                    >PIN</a-checkbox
+                                >
                             </div>
                         </div>
-                    <div class="upload_file_item upload_component" v-show="fileList.length < 15">
+                        <div
+                            class="upload_file_item upload_component"
+                            v-show="fileList.length < 15"
+                        >
                             <a-upload
                                 :action="uploadUrl + '/api/element/upload'"
                                 list-type="picture-card"
                                 :data="{
-                                ...upload
+                                    ...upload,
                                 }"
                                 :before-upload="beforeUpload"
                                 :headers="{ Authorization: token }"
@@ -53,214 +127,397 @@
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="(file) => fileUploadChange(file)"
                             >
-                            <div  class="upload_tip_block" v-show="fileList.length < 15">
+								<div
-                                <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
+                                    class="upload_tip_block"
+                                >
+                                    <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 class="upload_max_tip">
-                <span class="icon iconfont icon-zhuyi"></span>
-                <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
-            </div>
             </div>
 
-        <Material ref="Material" @confirmSelect="confirmSelect"></Material>
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Sketchboard"
+                @confirmSelect="confirmSelect"
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Sketchboard"
+                @generateCheckbox="getgenerateCheckbox"
+            ></Generate>
+        </div>
+		<div 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 sketchboardList" :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 v-show="openClick == 3" class="modal_accomplish">
+				<div class="input_box">
+					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
+					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
+				</div>
+				<div class="modal_img">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
+						<img :src="item.imgUrl">
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
        	
 		
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, h,ref } from 'vue'
+import { defineComponent, h, ref ,computed } 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 GO from "@/tool/GO";
-import { message,Upload} from 'ant-design-vue';
+import { useStore } from "vuex";
-import Material from '@/component/HomePage/Material.vue'
+import { message, Upload } from "ant-design-vue";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import { Https } from "@/tool/https";
 export default defineComponent({
-    components:{Material},
+    components: { Material, Generate },
     setup() {
-        let fileList:any = ref([])
+        let fileList: any = ref([]);
+        let openClick: any = ref(1);
+		let generateList:any = ref([
+		{
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+		])
+		let generateCheckbox:any = ref()
         return {
-            fileList
+            fileList,
-        }
+            openClick,
+			generateList,
+			generateCheckbox
+        };
     },
     data() {
         return {
-            swtich_type:'upload',
+            swtich_type: "upload",
             indicator: h(LoadingOutlined, {
                 style: {
-                    fontSize: '2.4rem',
+                    fontSize: "2.4rem",
                 },
                 spin: true,
             }),
             upload: {
                 isPin: 0,
-                level1Type:'Sketchboard',
+                level1Type: "Sketchboard",
                 timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             },
-            token:'',
+            token: "",
-            uploadUrl:'',
+            uploadUrl: "",
             store: useStore(),
             sketchCatecoryList: [
                 {
-                    value: 'Outwear',
+                    value: "Outwear",
                     label: "Outwear",
                 },
                 {
-                    value: 'Blouse',
+                    value: "Blouse",
                     label: "Blouse",
                 },
                 {
-                    value: 'Dress',
+                    value: "Dress",
                     label: "Dress",
                 },
                 {
-                    value: 'Trousers',
+                    value: "Trousers",
                     label: "Trousers",
                 },
                 {
-                    value: 'Skirt',
+                    value: "Skirt",
                     label: "Skirt",
                 },
             ],
-        }
+			captionGeneration:'',
+			sketchboardList:computed(()=>{
+				return  useStore().state.UploadFilesModule.sketchboard
+			}),
+        };
     },
     computed: {
         getSketchLabel(value) {
             return (value: any) => {
-                let lable = '';
+                let lable = "";
                 for (let item of this.sketchCatecoryList) {
                     if (item.value === value) {
-                        lable = item.label
+                        lable = item.label;
-                        break
+                        break;
-                    }
-                }
-                return lable
                     }
                 }
+                return lable;
+            };
+        },
+		
     },
     mounted() {
-        this.token = getCookie('token') || ''
+        this.token = getCookie("token") || "";
-        this.uploadUrl = getUploadUrl()
+        this.uploadUrl = getUploadUrl();
     },
     methods: {
-        openLibrary(){
+        open(num: Number) {
-            let material:any = this.$refs.Material
+            this.openClick = num;
-                material.init('Sketchboard')
+            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')
+            }
+        },
+		getgenerateCheckbox(value:any){
+			this.generateCheckbox = value
 		},
         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;
-                file.pin = false
+                file.pin = false;
-                file.category = 'Outwear'
+                file.category = "Outwear";
-                file.categoryShow = false
+                file.categoryShow = false;
-                let fileList = this.fileList.filter((v:any)=> v.status === 'done')
+				file.id_ = GO.id++
-                this.store.commit('setSketchboardFile',fileList)
+				file.type_ = 'upload';
-            }else if(file.status ===  'error'){
+                let fileList = this.fileList.filter(
-                let index = -1
+                    (v: any) => v.status === "done"
+                );
+                this.store.commit("setSketchboardFile", fileList);
+            } else if (file.status === "error") {
+                let index = -1;
                 this.fileList.forEach((ele: any, index1: any) => {
                     if (file.uid === ele.uid) {
-                        index = index1
+                        index = index1;
                     }
                 });
                 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';
+            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!');
+                message.error("You can only upload Image file!");
             }
             const isLt2M = file.size / 1024 / 1024 < 2;
             if (!isLt2M) {
-                message.error('Image must smaller than 5MB!');
+                message.error("Image must smaller than 5MB!");
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
 
         showFileCategory(file: any) {
-            file.categoryShow = true
+            file.categoryShow = true;
-            document.addEventListener('click', this.hiddenFileCategory)
+            document.addEventListener("click", this.hiddenFileCategory);
         },
 
         selectFileCategory(file: any, cate: any) {
-            file.category = cate.value
+            file.category = cate.value;
-            this.store.commit('setSketchboardFile',this.fileList)
+            this.store.commit("setSketchboardFile", this.fileList);
         },
-
         hiddenFileCategory() {
             for (let item of this.fileList) {
-                item.categoryShow = false
+                item.categoryShow = false;
             }
-            document.removeEventListener('click', this.hiddenFileCategory)
+            document.removeEventListener("click", this.hiddenFileCategory);
         },
 
-        deleteFile(index:any){
+        deleteFile(item: any) {
-            this.fileList.splice(index, 1)
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
-            this.store.commit('setSketchboardFile',this.fileList)
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				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("setSketchboardFile", this.fileList);
+			}
         },
 
         recollection() {
-            this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
+            this.fileList = JSON.parse(
-            this.store.commit('setSketchboardFile',this.fileList)
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .skecthboardFiles
+                )
+            );
+            this.store.commit("setSketchboardFile", this.fileList);
         },
-
         confirmSelect(event: any) {
             for (let item of event) {
                 let data = {
                     imgUrl: item.url,
                     resData: item,
                     pin: false,
-                    status:'done',
+                    status: "done",
-                    category:item.level2Type || 'Outwear',
+                    category: item.level2Type || "Outwear",
                     categoryShow: false,
-                }
+                };
                 if (this.fileList.length == 15) {
-                    message.error('Maximum number of allowable file uploads has been exceeded')
+                    message.error(
-                    break
+                        "Maximum number of allowable file uploads has been exceeded"
+                    );
+                    break;
                 }
-                this.fileList.push(data)
+                this.fileList.push(data);
             }
-            this.store.commit('setSketchboardFile',this.fileList)
+            this.store.commit("setSketchboardFile", this.fileList);
+        },
+		//发送请求生成图片
+		getgenerate(){
+			
+			let generage:any = this.$refs.Generate
+			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
+			let data = {
+				generateType:generateType,
+				designType:'',
+				collectionElementId:generage.collectionElementid,
+				level1Type:generage.upload.level1Type,
+				level2Type:generage.level2Type,
+				text:this.captionGeneration,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				version:0,//为1就是Print
+			}
+			if(generateType == 'image'||generateType == 'text-image'){
+				if(generage.collectionElementid){
+				}else{
+					message.error(
+						"Please select a picture"
+					);
+					return
+				}
+			}else if(generateType == 'text'){
+				// this.beforeUpload(false)
+				if(this.captionGeneration){
+				}else{
+					message.error(
+						"Please enter content"
+					);
+					return
+				}
+			}
+			if(generateType == 'text'){
+				data.collectionElementId = ''
+				data.level2Type = ''
+			}
+			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
+                (rv) => {
+					// if(rv){
+						
+					// }
+					console.log(rv);
 					
                 }
+            ).catch(res=>{
+            });
+		},
+		generageAdd(item:any){
+			item.type_ = {
+                type1: "generate",
+                type2: 'Sketchboard',
+            },
+            this.store.commit("addGenerateMaterialFils", item);
 		}
-})
+    },
+});
 </script>
 <style lang="less" scoped>
 .sketchboard_upload_modal {
-    padding: 1.5rem 2.6rem 4rem;
 	height: 100%;
-
+    display: flex;
+	.modal_left {
+        padding-top: 4rem;
+        width: 47%;
 		.switch_type_list {
             display: flex;
             align-items: center;
+            position: relative;
 
             .switch_type_item {
                 display: flex;
                 align-items: center;
-            padding: 0 2rem;
+                // padding: 0 2rem;
                 height: 4rem;
                 background: #fff;
                 border-radius: 0.8rem;
                 line-height: 4rem;
                 font-size: 1.6rem;
-            margin-right: 2.2rem;
+                // margin-right: 2.2rem;
-            color: #5B5E69;
+                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: #343579;
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
                 }
 
                 .switch_icon {
@@ -268,39 +525,76 @@ export default defineComponent({
                     margin-right: 0.8rem;
                 }
             }
-        
         }
-
 		.sketchboard_body {
-        margin-top: 1rem;
         height: calc(100% - 5rem);
-
+        padding-top: 2.5rem;
+        height: 30rem;
+        overflow-x: hidden;
+        border-right: 1px solid #e5e5e5;
+        &.moodboard_body::-webkit-scrollbar {
+            display: none;
+        }
         .upload_img_body {
             height: calc(100% - 3rem);
             overflow-y: auto;
             margin-bottom: 1rem;
+			&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
         }
 
-        .upload_file_item{
-            margin: 0 2rem 2rem 0;
-            display: inline-block;
-            width: 16.5rem;
-            border: 1px solid #F5F5F5;
-            vertical-align: top;
        
+		.upload_file_item{
+			margin: 0 2rem 4rem 0;
+			// margin: 0 2rem 2rem 0;
+			display: inline-block;
+			width: 10rem;
+			height: 10rem;
+			border: 1px solid #f5f5f5;
+			vertical-align: top;
+			position: relative;
+			img{
+				width: 100%;
+				height: 100%;
+			}
 			&.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;
+                }
+			.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;
+			}
 			.upload_file_item_content{
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 height: 100%;
-                height: 16.5rem;
                 position: relative;
                 cursor: pointer;
-
                 .upload_img{
                     display: block;
                     max-height: 100%;
@@ -318,7 +612,7 @@ export default defineComponent({
                     right: 0.9rem;
                     text-align: center;
                     line-height: 3.2rem;
-
+					left: auto;
                     .icon-shanchu{
                         font-size: 1.6rem;
                         color: #fff;
@@ -331,7 +625,7 @@ export default defineComponent({
 
                 .operate_file_block{
                     width: 100%;
-                    height: 4rem;
+                    height: 3rem;
                     font-size: 1.6rem;
                     color: #FFFFFF;
                     position: absolute;
@@ -340,7 +634,7 @@ export default defineComponent({
 
                     .select_img_type{
                         height: 100%;
-                        line-height: 4rem;
+                        line-height: 3rem;
                         text-align: center;
                         background: rgba(0,0,0,0.6);
                         position: relative;
@@ -367,13 +661,17 @@ export default defineComponent({
                             width: 100%;
                             cursor: pointer;
                             position: absolute;
-                            top: 4.1rem;
+                            // top: 3.1rem;
+							margin-top: .2rem;
                             left: 0;
                             background: rgba(0,0,0,0.4);
                             border: 1px solid #343579;
                             border-radius: 0.8rem;
-                            overflow: hidden;
+                            // overflow: hidden;
                             z-index: 2;
+							height: 9rem;
+							overflow-x: hidden;
+							&.category_list::-webkit-scrollbar{display: none;}
 
                             .category_item{
                                 text-align: left;
@@ -394,25 +692,107 @@ export default defineComponent({
                 }
             }
 			.pin_block{
-                text-align: center;
-                margin-top:1.6rem;
-            }
 				
-            .upload_img_icon{
-                width: 4.6rem;
 			}
 		}
        
-        .upload_max_tip{
+    }
+	}
+   
+	.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;
+				flex-direction: row;
+				&.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;
-            font-size: 1.4rem;
+						align-items: center;
-            color: #030303;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
 				
-            .icon-zhuyi{
+			}
-                font-size: 1.6rem;
+		}
-                margin-right: 0.7rem;
+		.modal_accomplish{
+			// margin-top: 2rem;
+			height: 30rem;
+			display: flex;
+			flex-direction: column;
+			.modal_text{
+				padding-top: 2rem;
+				padding-block: 2rem;
+			}
+			.input_box{
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				.modal_imgItem{
+					margin: 0 2rem 2rem 0;
+					display: inline-block;
+					width: 10rem;
+					height: 10rem;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					img{
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: 1rem;
+						img {
+							transform: scale(0.9);
+						}
+					}
+				}
 			}
 		}
 	}

src/component/HomePage/collectionModal.vue

@@ -236,12 +236,14 @@ export default defineComponent({
 
     .collection_modal_body{
         height: 100%;
+		background-color: #fff;
     }
 }
 </style>
 <style lang="less">
 .collection_modal{
-	max-width: 1200px ;
+	// max-width: 1200px ;
+	max-width: 1150px ;
 	.ant-modal-content{
 		border-radius: 10px;
 		overflow: hidden;
@@ -251,7 +253,8 @@ export default defineComponent({
 		}
 		.ant-modal-body{
 			padding: 8rem 5rem !important;
-			height: calc(60vh - 6.4rem);
+			// height: calc(65vh - 6.4rem);
+			height: 60rem;
 		}
 	}
 }

src/component/HomePage/layout.vue

@@ -4,11 +4,12 @@
             class="layout_modal"
             v-model:visible="layout"
             :footer="null"
-            width="47rem"
+            width="80%"
             :maskClosable="false"
             :centered="true"
             :closable="false"
             :mask="false"
+			:destroyOnClose="true"
         >
             <div class="layout_content">
                 <div class="layout_header">
@@ -19,14 +20,28 @@
                     ></div>
                 </div>
 				<div class="layout_nav">
-					<div v-for="item,index in layoutList" :key="item">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
-				<div class="layout_centent" :class="{active:flex_direction}">
+				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
-						<img :src="item.imgUrl">
+						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> 
+						<ul v-show="item.setPitch" class="layout_btn" >
+							<li class="layout_btn_top" v-compile.stop="'top'"></li>
+							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
+							<li class="layout_btn_left" v-compile.stop="'left'"></li>
+							<li class="layout_btn_right" v-compile.stop="'right'"></li>
+							<li class="layout_rotote" v-rotote.stop></li>
+							<li class="layout_translate" v-translate.stop></li>
+							<!-- <li class="layout_translate" v-translate.stop></li> -->
+							<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
+							<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
+							<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
+							<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
+						</ul>
 					</div>
+						<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
 					<!-- <draggable 
 						v-model="layoutList" 
 						group="people" 
@@ -48,12 +63,12 @@
 						</div>
 					</div>
 				</div>
-				<div class="layout_right">
+				<!-- <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> -->
                 <div
                     class="button_second submit_button"
                     @click="submitTemplate()"
@@ -70,8 +85,10 @@
 import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
+import GO from "@/tool/GO";
 import moodb from "@/tool/moodb";
 import draggable from 'vuedraggable'
+import domTurnImg from '@/tool/domTurnImg'
 export default defineComponent({
 	props:["moodb_className",'flex_direction'],
 	components: {
@@ -83,12 +100,16 @@ export default defineComponent({
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
+		let layoutList:any = ref([])
+		const content = ref<HTMLElement | null>(null);
         return {
             fileList,
             layout,
             templateFileList,
             openClick,
 			drag,
+			layoutList,
+			content
         };
     },
     data() {
@@ -99,31 +120,18 @@ export default defineComponent({
                 },
                 spin: true,
             }),
-            moodTemplateId: "", //模板id
+            // moodTemplateId: "", //模板id
             store: useStore(),
 
-			layoutList:computed(()=>{
+			// layoutList:computed(()=>{
-				return [...(useStore().state.UploadFilesModule.moodboardFiles),
+			// 	return [...(useStore().state.UploadFilesModule.moodboardFiles),
-				...(useStore().state.UploadFilesModule.generateFiles),
+			// 	...(useStore().state.UploadFilesModule.generateFiles),
-				...(useStore().state.UploadFilesModule.MaterialFiles)]
+			// 	...(useStore().state.UploadFilesModule.MaterialFiles)]
-			}),
+			// }),
-			layoutListaa:[
-				{
-					id_:1,
-					name:'2',
-				},
-				{
-					id_:2,
-					name:'2',
-				},
-				{
-					id_:3,
-					name:'2',
-				},
-			],
 			moodb : moodb.moodb_,
 			moodbList:{},
 			moodbClassName:[],
+			setabsolute:false,
         };
     },
 
@@ -131,44 +139,382 @@ export default defineComponent({
 		
     },
 	directives:{
+		//操作移动
 		layout:{
-			mounted (el,layout) {
+			mounted (el,layout:any,binding) {
-				// console.log(el,layout);
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
-				layout.value.style = {
+					e.stopPropagation()
-					rotate:'',
+					el.parentElement.children.forEach((v:any) => {
-					left:'',
+						v.style.left = v.offsetLeft+'px'
-					top:'',
+						v.style.top = v.offsetTop+'px'
-					width:'',
+
-					height:'',
+					});
+					el.parentElement.children.forEach((v:any) => {
+						v.classList.add('active')
+					});
+					el.style.zIndex = GO.zIndex++
+					let left = el.style.left? el.style.left.replace(/px/g,'') : 0
+					let top = el.style.top? el.style.top.replace(/px/g,'') : 0
+					let mouseX = e.offsetX //鼠标点击位置到domleft距离
+					let mouseY = e.offsetY
+					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
+					let domY = e.clientY - e.offsetY - Number(top)
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							el.style.left = e.x-mouseX - domX+'px'
+							el.style.top = e.y-mouseY - domY+'px'
+							if(el.offsetLeft <=0){
+								el.style.left = 0+'px'
 							}
+							if(el.offsetTop <=0){
+								el.style.top = 0+'px'
+							}
+							if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
+								el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'px'
+							}
+							if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
+								el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'px'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+						// document.onmousemove = false;
+					}
+				})
 			},
 			updated (el,layout) {
 				
 			}
+		},
+		//操作大小
+		compile:{
+			mounted (el,compile) {
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
+					e.stopPropagation()
+					let elParent = el.parentNode.parentNode
+					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
+						v.style.left = v.offsetLeft+'px'
+						v.style.top = v.offsetTop+'px'
+					});
+					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
+						v.classList.add('active')
+					});
+					if(compile.value == 'right'){
+						
+					}else if(compile.value == 'left'){
+						elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
+						elParent.style.left = 'auto'
+					}else if(compile.value == 'top'){
+						elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
+						elParent.style.top = 'auto'
+					}else if(compile.value == 'bottom'){
+						
+					}
+					
+					let gpsXY:any
+					let parent:any
+					if(compile.value == 'left' || compile.value == 'right'){
+						gpsXY = e.x
+						parent = elParent.offsetWidth
+					}else{
+						parent = elParent.offsetHeight
+						gpsXY = e.y
+					}
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							if(compile.value == 'left'){
+								elParent.style.width = parent + gpsXY - e.x + 'px' 
+							}else if(compile.value == 'right'){
+								elParent.style.width = parent + e.x - gpsXY + 'px' 
+							}else if(compile.value == 'top'){
+								elParent.style.height = parent + gpsXY - e.y + 'px' 
+							}else if(compile.value == 'bottom'){
+								elParent.style.height = parent + e.y - gpsXY + 'px' 
+
+							}
+						
+						
+							if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
+								elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
+							}
+							if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
+								elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
+							}
+							
+							if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
+								elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
+							}
+							if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
+								elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+					}
+				})
+			}
+		},
+		//操作旋转
+		rotote:{
+			mounted(el){
+				let mouse = true;
+				let angle :any = 0
+				let num:any
+				let elParent = el.parentNode.parentNode
+
+				if(document.defaultView){
+					num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
+				}
+				// 添加鼠标按下事件监听器
+				el.addEventListener('mousedown', (e:MouseEvent) => {
+					e.stopPropagation()
+					mouse = true;
+					let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
+					let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
+					document.addEventListener('mousemove', (e:MouseEvent) => {
+					if (mouse) {
+						let X = eX 
+						let Y = eY
+						let x:any = e.pageX - X
+						let y:any = Y - e.pageY
+						angle = Math.atan2(x,y)*(180 / Math.PI)
+						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
+					}
+					});
+
+					// 添加鼠标松开事件监听器
+					document.addEventListener('mouseup', () => {
+						mouse = false;
+					});
+				});
+				//缩放
+				let timeSwitch = true
+				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
+					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
+						if(timeSwitch){
+							timeSwitch = false
+							if((e as WheelEvent).deltaY > 0){
+								if(num <= 1){
+									num -= 0.05
+								}else{
+									num -= 0.1
+								}
+							}else{
+								//放大
+								if(num <= 1){
+									num += 0.05
+								}else{
+									num += 0.1
+								}
+							}
+							if(num >= 3){
+								num = 3
+							}else if (num < .2){
+								num = .2
+							}
+							setTimeout(() => {
+								timeSwitch = true
+							}, 100);
+							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						}
+						
+						
+					});
+				});
+			}
+			
+		},
+		angle:{
+			mounted(el,angle){
+				let mouse = false;
+				el.addEventListener('mousedown', (e:MouseEvent) => {
+					e.stopPropagation()
+					
+					el.parentNode.children.forEach((v:any) =>{
+						v.classList.add('eventNode')
+					})
+					mouse = true;
+					let elParent = el.parentNode.parentNode
+					let eX:any
+					let eY:any
+					let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
+					el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
+					if (mouse) {
+						if(angle.value == 'right'){
+							eX = elParent.offsetWidth - e.offsetX
+							eY = elParent.offsetHeight - e.offsetY
+						}else if(angle.value == 'top'){
+							eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
+							eY = elParent.offsetHeight - e.offsetY
+						}else if(angle.value == 'left'){
+							eX = elParent.offsetWidth - e.offsetX
+							eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
+						}else if(angle.value == 'bottom'){
+							eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
+							eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
+						}
+						let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
+						// el.style.left = e.offsetX /2 +'px'
+						// el.style.top = e.offsetY /2+'px'
+						if(100 - 100 * mouseSide/elParentSide <= 50){
+							if(angle.value == 'right'){
+								
+								el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'top'){
+								el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.left = 'auto'
+								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'bottom'){
+								el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = 'auto'
+								el.style.left = 'auto'
+								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'left'){
+								el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = 'auto'
+								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}
+						}else{
+							if(angle.value == 'right'){
+								el.parentNode.style.borderTopLeftRadius = 50+'%'
+								elParent.style.borderTopLeftRadius = 50+'%'
+							}else if(angle.value == 'top'){
+								el.parentNode.style.borderTopRightRadius = 50+'%'
+								elParent.style.borderTopRightRadius = 50+'%'
+							}else if(angle.value == 'bottom'){
+								el.parentNode.style.borderBottomRightRadius = 50+'%'
+								elParent.style.borderBottomRightRadius = 50+'%'
+							}else if(angle.value == 'left'){
+								el.parentNode.style.borderBottomLeftRadius = 50+'%'
+								elParent.style.borderBottomLeftRadius = 50+'%'
+							}
+						}
+					}
+					});
+					// 添加鼠标松开事件监听器
+					document.addEventListener('mouseup', () => {
+						mouse = false;
+						el.parentNode.children.forEach((v:any) =>{
+							v.classList.remove('eventNode')
+						})
+					});
+					
+				});
+					
+				
+			}
+		},
+		//移动图片
+		translate:{
+			mounted (el,layout:any,binding) {
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
+					e.stopPropagation()
+					let elParent = el.parentNode.parentNode
+					el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
+					el.style.top =  (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
+					let left = el.style.left? el.style.left.replace(/%/g,'') : 0
+					let top = el.style.top? el.style.top.replace(/%/g,'') : 0
+					let mouseX = e.offsetX //鼠标点击位置到domleft距离
+					let mouseY = e.offsetY
+					let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
+					let domY = e.clientY - e.offsetY - el.offsetTop
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
+							let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
+							el.style.left = left
+							el.style.top = top;
+							el.previousSibling.style.top = top
+							el.previousSibling.style.left = left
+							elParent.firstChild.style.top = top
+							elParent.firstChild.style.left = left
+							if(el.offsetLeft <=0){
+								el.style.left = 0+'%'
+								el.previousSibling.style.left = 0+'%'
+								elParent.firstChild.style.left = 0+'%'
+							}
+							if(el.offsetTop <=0){
+								el.style.top = 0+'%'
+								el.previousSibling.style.top = 0+'%'
+								elParent.firstChild.style.top = 0+'%'
+							}
+							// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
+							// 	// el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'%'
+							// 	console.log(2);
+							// }
+							if(el.style.left.replace(/%/g,'')>=100){
+								el.style.left = 100+'%'
+								el.previousSibling.style.left = 100+'%'
+								elParent.firstChild.style.left = 100+'%'
+							}
+							// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
+							// 	el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'%'
+							// }
+							if(el.style.top.replace(/%/g,'')>=100){
+								el.style.top = 100+'%'
+								el.previousSibling.style.top = 100+'%'
+								elParent.firstChild.style.top = 100+'%'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+					}
+				})
+			},
 		}
 	},
     methods: {
 		init(){
 			this.layout = !this.layout
-			let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
+			let layoutList = this.store.state.UploadFilesModule.moodboard
-				...this.store.state.UploadFilesModule.generateFiles,
+			this.layoutList.forEach((v:any)=>{
-				...this.store.state.UploadFilesModule.MaterialFiles]
+				v.setPitch = false
-			console.log(this.moodb[layoutList.length]);
+			})
+			this.layoutList = layoutList
+			
 			this.moodbList = this.moodb[layoutList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
+		setpitch(item:any){
+			this.layoutList.forEach((v:any)=>{
+				v.setPitch = false
+			})
+			item.setPitch = true
+		},
 		setmoodb(item:any){
-			console.log(item);
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
+			if(this.content){
+				for (item of (this.content as any)) {
+					item.classList.remove('active')
+					item.style.top = ''
+					item.style.left = ''
+					item.style.right = ''
+					item.style.bottom = ''
+					item.style.width = ''
+					item.style.height = ''
+				}
+			}
 		},
 		//开始拖拽事件
-		onStart(){
+		layoutBtnTop(){
-			this.drag=true;
+
-		},
-		//拖拽结束事件
-		onEnd() {
-			this.drag=false;
 		},
 		// setmoodbClassName(){
 		// },
@@ -196,7 +542,6 @@ export default defineComponent({
 		// 			document.body.appendChild(img);
 		// 			var w = img.offsetWidth;
 		// 			var h = img.offsetHeight;
-		// 			console.log(w,h);
 		// 			img.remove()
 		// 		})
 
@@ -214,15 +559,6 @@ export default defineComponent({
         // },
       
 
-        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 });
@@ -246,12 +582,24 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
+		
         //提交模板
         submitTemplate() {
-            this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
+            // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
-            this.store.commit("setMoodboardFile", this.fileList);
+            // this.store.commit("setMoodboardFile", this.fileList);
-            this.store.commit("setMoodTemplateId", this.moodTemplateId);
+            // this.store.commit("setMoodTemplateId", this.moodTemplateId);
-            this.changeTemplateModal();
+            // this.changeTemplateModal();
+			this.layoutList.forEach((v:any)=>{
+				v.setPitch = false
+			})
+			let layoutCentent = document.getElementById('layoutCentent')
+			console.log(layoutCentent);
+			setTimeout(() => {
+			console.log(domTurnImg(layoutCentent));
+			this.layout = false
+
+			}, 0);
+			
         },
     },
 });
@@ -259,10 +607,11 @@ export default defineComponent({
 
 <style lang="less">
 .layout_modal {
-	width: 80% !important;
+	max-width: 1150px;
     .ant-modal-body {
         padding: 0;
-		height: calc(60vh - 6.4rem);
+		// height: calc(65vh - 6.4rem);
+		height: 60rem;
     }
 	.ant-modal-content{
 		border-radius: 1rem;
@@ -295,6 +644,13 @@ export default defineComponent({
 			display: flex;
 			margin-top: 2rem;
 			justify-content: center;
+			.active{
+				img{
+					border: 2px solid;
+					border-radius: 2px;
+					box-sizing: border-box;
+				}
+			}
 			img{
 				width:5rem;
                 cursor: pointer;
@@ -303,54 +659,166 @@ export default defineComponent({
 		}
 		.layout_centent{
 			display: flex;
-			height: 60%;
+			height: 55%;
+			// height: 60%;
 			flex-direction: column;
 			flex-wrap: wrap;
 			align-content: space-around;
 			width: 50%;
-			margin: auto;
+			margin: 3rem auto;
-			padding: 3rem 0;
+			overflow: hidden;
+			// padding: 3rem 0;
 			justify-content: space-between;
-			>div{
+			position: relative;
-				// width: 100%;
+			user-select:none
-				// height: 100%;
-				// display: flex;
-				// flex-direction: column;
-				// flex-wrap: wrap;
-				// align-content: space-around;
-				// margin: auto;
-				// justify-content: space-between;
-			}
 			&.active{
 				flex-direction: row;
-
+			}
-				// >div{
+			.layout_btn{
-				// }
+				list-style: none;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				box-sizing: border-box;
+				border: 2px solid rgb(20, 188, 255);
+				padding: 0;
+				-webkit-user-drag: none;
+				user-select:none;
+				li{
+					cursor: pointer;
+					// border-radius: 50%;
+					width: 1rem;
+					height: 1rem;
+					background-color: rgb(20, 188, 255);
+					position: absolute;
+					z-index: 1049;
+				}
+				.layout_btn_top,.layout_btn_bottom{
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: n-resize;
+				}
+				.layout_btn_top{
+					top: 0;
+				}
+				.layout_btn_bottom{
+					top: 100%;
+				}
+				.layout_btn_left,.layout_btn_right{
+					top: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: e-resize;
+				}
+				.layout_btn_left{
+					left: 0;
+				}
+				.layout_btn_right{
+					left: 100%;
+				}
+				.layout_rotote{
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+					width: 0;
+					height: 0;
+				}
+				.layout_rotote::after{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					width: 2px;
+					height: 30px;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+				}
+				.layout_rotote::before{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					top: calc(50% - 30px);
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					width: 1.5rem;
+					height: 1.5rem;
+					border-radius: 50%;
+				}
+				.layout_translate{
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: crosshair;
+					cursor: move;
+				}
+				.layout_angle_tr{
+					right: 0%;
+					top: 0;
+				}
+				.layout_angle_tl{
+					left: 0%;
+					top: 0;
+				}
+				.layout_angle_br{
+					right: 0%;
+					bottom: 0%;
+				}
+				.layout_angle_bl{
+					left: 0%;
+					bottom: 0%;
+				}
+				.eventNode{
+					pointer-events: none;
+				}
 			}
 			.layout_centent_bor{
 				
 			}
 			.modal_imgItem{
 				position: relative;
-				img{
+				// >div{
+				// 	position: absolute;
+				// 	width: 100%;
+				// 	height: 100%;
+				// }
+				overflow: hidden;
+				&.active{
 					position: absolute;
-					object-fit: cover;
-					width: 100%;
-					height: 100%;
 				}
+				img{
+					// object-fit: cover;
+					// width: 100%;
+					// height: 100%;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%) scale(1);
+				}
+				::selection {
+						// background: rgba(0,0,0,0);
+						// background: yellow;
+					}
+			
 			}
 		}
 		.wh1{
 				width: 23%;
 				height: 48%;
+				
 			}
 			.wh4{
 				width: 48.5%;
 				height: 100%;
+				
 			}
 			.w1h2{
 				width: 23%;
 				height: 100%;
+				
 			}
 			.w2h1{
 				width: 48.5%;
@@ -360,7 +828,7 @@ export default defineComponent({
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
-			left: 0;
+			left: 2rem;
 			overflow-x: hidden;
 			// background-color: #000;
 			width: 8%;

src/store/uploadFile/moodboard.ts

@@ -0,0 +1,76 @@
+import {Module} from 'vuex'
+import {RootState} from '../index'
+import { message } from "ant-design-vue";
+import UploadFile  from './uploadFile'
+
+interface UploadList{
+    moodboardList:any,
+	generateList:any,
+	MaterialList:any,
+}
+
+const Moodboard : Module<UploadList,RootState> = {
+    state:{
+        moodboardList:[],
+		generateList:[],
+		MaterialList:[],
+    },
+    mutations:{
+        setMoodboardFile(state,files){
+			state.moodboardList = files;
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+    
+		addGenerateMaterialFils(state,data){
+			let file
+			let arr = [...state.generateList,...state.MaterialList,...state.moodboardList]
+			if(data.type_ == 'generate'){
+				file = state.generateList
+			}else{
+				file = state.MaterialList
+			}
+			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.generateList = file
+			}else{
+				state.MaterialList = file
+			}
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+		setGenerateFils(state,files){
+            state.generateList = files
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+    },
+    actions:{
+
+    }
+}
+
+export default Moodboard

src/store/uploadFile/uploadFile.ts

@@ -3,14 +3,19 @@ import {RootState} from '../index'
 import { message } from "ant-design-vue";
 
 interface UploadFiles{
+	moodboard:any,
     moodboardFiles:any,
+	moodboardGenerateFiles:any,
+	moodboardMaterialFiles:any,
+	sketchboard:any,
+    sketchboardFiles:any,
+	sketchGenerateFiles:any,
+	sketchMaterialFiles:any,
+	printboard:any,
     printboardFiles:any,
-    generatePrintFiles:any,
+	printGenerateFiles:any,
-	generateFiles:any,
+	printMaterialFiles:any,
-	MaterialFiles:any,
-	generateList:any,
     colorBoards:any,
-    skecthboardFiles:any,
     marketingSketchFiles:any,
     allBoardData:any, //备份的所有数据，点finish之后备份
     moodTemplateId:any,
@@ -18,35 +23,50 @@ interface UploadFiles{
 
 const UploadFilesModule : Module<UploadFiles,RootState> = {
     state:{
+		moodboard:[],
         moodboardFiles:[],
+		moodboardGenerateFiles:[],
+		moodboardMaterialFiles:[],
+		sketchboard:[],
+        sketchboardFiles:[],
+		sketchGenerateFiles:[],
+		sketchMaterialFiles:[],
+		printboard:[],
         printboardFiles:[],
-        generatePrintFiles:[],
+		printGenerateFiles:[],
-		generateFiles:[],
+		printMaterialFiles:[],
-		MaterialFiles:[],
-		generateList:[],
         colorBoards:[],
-        skecthboardFiles:[],
         marketingSketchFiles:[],
         allBoardData:{},
         moodTemplateId:'',
+		
     },
     mutations:{
+		
         setMoodboardFile(state,files){
 			state.moodboardFiles = files
-        },
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
-        setPrintboardFile(state,files){
-            state.printboardFiles = files
-        },
-        setGeneratePrintFile(state,files){
-            state.generatePrintFiles = files
         },
 		addGenerateMaterialFils(state,data){
 			let file
-			let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
+			let arr = state.moodboard
-			if(data.type_ == 'generate'){
+			if(data.type_.type1 == 'generate'){
-				file = state.generateFiles
+				
+				if(data.type_.type2 == 'Moodboard'){
+					file = state.moodboardGenerateFiles
+				}else if(data.type_.type2 == 'Sketchboard'){
+					file = state.sketchGenerateFiles
+				}else if(data.type_.type2 == 'Printboard'){
+					file = state.printGenerateFiles
+				}
 			}else{
-				file = state.MaterialFiles
+				if(data.type_.type2 == 'Moodboard'){
+					file = state.moodboardMaterialFiles
+				}else if(data.type_.type2 == 'Sketchboard'){
+					file = state.sketchMaterialFiles
+				}else if(data.type_.type2 == 'Printboard'){
+					file = state.printGenerateFiles
+				}
 			}
 			if(file.length == 0){
 				if(arr.length >= 8){
@@ -75,35 +95,51 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 					file = file.filter((v:any)=> v.id_ != data.id_)
 				}
 			}
-			if(data.type_ == 'generate'){
+			if(data.type_.type1 == 'generate'){
-				state.generateFiles = file
+				if(data.type_.type2 == 'Moodboard'){
-			}else{
+					state.moodboardGenerateFiles = file 
-				state.MaterialFiles = file
+				}else if(data.type_.type2 == 'Sketchboard'){
+					state.sketchGenerateFiles = file 
+				}else if(data.type_.type2 == 'Printboard'){
+					state.printGenerateFiles = file
 				}
-        },
+			}else{
-		getGenerateList(state,list){
+				if(data.type_.type2 == 'Moodboard'){
-            state.generateList = list
+					state.moodboardMaterialFiles = file 
-        },
+				}else if(data.type_.type2 == 'Sketchboard'){
-		// setGenerateFils(state,files){
+					state.sketchMaterialFiles = file 
-        //     state.generateFiles = files
+				}else if(data.type_.type2 == 'Printboard'){
-        // },
+					state.printMaterialFiles = state.printMaterialFiles
-        setColorboardList(state,colorBoards){
+				}
-            state.colorBoards = colorBoards
+			}
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
         },
 		setSketchboardFile(state,files){
-            state.skecthboardFiles = files
+            state.sketchboardFiles = files
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
+
+        },
+		setPrintboardFile(state,files){
+            state.printboardFiles = files
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
+        },
+
+
+		
+        setColorboardList(state,colorBoards){
+            state.colorBoards = colorBoards
         },
         setMarketingSketchFile(state,files){
             state.marketingSketchFiles = files
         },
         setAllBoardData(state){
             state.allBoardData = {
-                moodboardFiles:state.moodboardFiles,
+                moodboardFiles:state.moodboard,
                 printboardFiles:state.printboardFiles,
-                generatePrintFiles:state.generatePrintFiles,
-                generateFiles:state.generateFiles,
                 colorBoards:state.colorBoards,
-                skecthboardFiles:state.skecthboardFiles,
+                sketchboardFiles:state.sketchboard,
                 marketingSketchFiles:state.marketingSketchFiles,
                 moodTemplateId:state.moodTemplateId,
             }
@@ -112,13 +148,19 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
             state.allBoardData = data
         },
         clearAllData(state){
+            state.moodboard = []
             state.moodboardFiles = []
+            state.moodboardGenerateFiles = []
+            state.moodboardMaterialFiles = []
+            state.sketchboard = []
+			state.sketchboardFiles = []
+            state.sketchGenerateFiles = []
+            state.sketchMaterialFiles = []
+			state.printboard = []
 			state.printboardFiles = []
-            state.generatePrintFiles=[]
+            state.printGenerateFiles = []
-            state.generateFiles = []
+            state.printMaterialFiles = []
-            state.MaterialFiles = []
 			state.colorBoards = []
-            state.skecthboardFiles = []
             state.marketingSketchFiles = []
             state.moodTemplateId = ''
         },

src/tool/GO.ts

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

src/tool/domTurnImg.js

@@ -0,0 +1,24 @@
+import html2canvas from "html2canvas";
+const getJpeg = dom =>{
+	return new Promise(resolve =>{
+		html2canvas(dom,{useCORS: true,}).then(canvas =>{
+			const jpeg = canvas.toDataURL('image/jpeg',1.0);
+			resolve(base64ToFile(jpeg))
+			console.log(jpeg);
+		})
+	})
+}
+const base64ToFile = urlData =>{
+	const arr = urlData.split(',');
+	const mime = arr[0].match(/:(.*?);/)[1]
+	const bytes = atob(arr[1])
+	let n = bytes.length;
+	const ia = new Uint8Array(n)
+	while (n--){
+		ia[n] = bytes.charCodeAt(n);
+	}
+	console.log(new File([ia],'jpeg',{type:mime}));
+	return new File([ia],'jpeg',{type:mime})
+
+}
+export default getJpeg

src/tool/https.js

@@ -20,7 +20,7 @@ import { message } from 'ant-design-vue';
 // 	axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 // }
 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
-
+console.log(process.env.VUE_APP_BASE_URL);
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
     //在发送请求之前做某件事
@@ -78,7 +78,7 @@ export const Https = {
         designCollection:'/api/design/designCollection', //设计 Conllection
         reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
         countDesignProcess:'/api/design/countDesignProcess', //统计design进度
-        getRgbByHsvBatch:'/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
+        getRgbByHsvBatch:'http://192.168.1.6:10086/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
         designLike:'/api/design/like', //Design Like
         designDislike: '/api/design/dislike', //Design Dislike
         queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
@@ -99,7 +99,8 @@ export const Https = {
         saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
         libraryModelsDot:'/api/library/modelsDot',//Models打点预览
         pythonChatStream:'/api/python/chatStream',//机器人助力
-        workspaceDetail:'http://192.168.1.5:10086/api/workspace/detail',//用户习惯详情
+        workspaceDetail:'http://192.168.1.6:10086/api/workspace/detail',//用户习惯详情
+        sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
 
     },
 

vue.config.js

@@ -19,7 +19,7 @@ module.exports = defineConfig({
 	// 	target: process.env.VUE_APP_BASE_URL,
     //     changeOrigin: true, //是否允许跨越
     //   }
-		'http://192.168.1.5:10086/api':{
+		'/api':{
 			target:'http://18.167.251.121:5567',
 			changeOrigin:true,
 		}