合并画布，部分样式调整

2025-06-26 15:41:08 +08:00
parent fd05c70937
commit fc6d8d4c8d
75 changed files with 1772 additions and 672 deletions
--- a/src/component/DetailCopy/detailLeft/colorBox/index.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/index.vue
@@ -1,10 +1,10 @@
 <template>
    <div class="color">
-		<div class="detailText">Current color</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentColor')}}</div>
 		<div class="pallet">
 			<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
 		</div>
-		<div class="detailText">Color pelette</div>
+		<div class="detailText">{{$t('DesignPrintOperation.Colorpelette')}}</div>
 		<div class="colorBox">
 			<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
 				<div v-if="item" class="box">
@@ -15,18 +15,18 @@
 				</div>
 			</div>
 		</div>
-		<div class="detailText">Choose color from image</div>
+		<div class="detailText">{{$t('DesignPrintOperation.Colorfromimage')}}</div>
 		<div class="uploadImage">
 			<upload @selectUplpadColor="selectUplpadColor"></upload>
 		</div>
-		<div class="detailText">Color Code</div>
+		<div class="detailText">{{$t('DesignPrintOperation.ColorCode')}}</div>
 		<div class="colorCode">
 			<div class="generalModel_state">
 				<div class="generalModel_state_item">
 					<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
 				</div>
 			</div>
-			<div class="getTcxColorBtn" @click="getTcxColor">Extract Color</div>
+			<div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div>
 		</div>
    </div>
    
@@ -91,6 +91,12 @@ export default defineComponent({
 					str:'color'
 				}
 				store.commit('DesignDetailCopy/setNewDetail',value)
+			}else{
+				let value = {
+					data:{},
+					str:'color'
+				}
+				store.commit('DesignDetailCopy/setNewDetail',value)
 			}
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
@@ -284,6 +290,9 @@ export default defineComponent({
 						font-weight: 600;
 						line-height: 2rem;
 						text-align: center;
+						white-space: nowrap;      /* 禁止换行 */
+						overflow: hidden;         /* 隐藏溢出内容 */
+						text-overflow: ellipsis;
 					}
 					> .backgroundImg{
 						width: 100%;
--- a/src/component/DetailCopy/detailLeft/colorBox/pallet.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/pallet.vue
@@ -106,7 +106,8 @@ export default defineComponent({
 					gradient.gradientList.forEach((item:any,index:any)=>{
 						let str = ','
 						if(gradient.gradientList.length == index+1)str = ''
-						gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+						let rgba = item.rgba?item.rgba:{r:255,g:255,b:255}
+						gradientStr += `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a}) ${item.left}${str}` 

 					})
 					return `${gradientStr}`
@@ -143,6 +144,7 @@ export default defineComponent({
 			},400)
 		},{deep: true })
 		const setOperate = ()=>{
+			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
 			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
@@ -258,14 +260,17 @@ export default defineComponent({
 		}
 		const openPallet = ()=>{
 			palletData.palletShow = !palletData.palletShow
+			console.log(props.selectColor,palletData.palletShow)
 			if(palletData.palletShow && props.selectColor?.rgba?.r){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{
 					palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
+					palletData.gradient.gradientShow = false
 				}
 			
 				palletData.color = JSON.parse(JSON.stringify(props.selectColor))
+			}else{
 			}
 		}
 		onMounted(()=>{
--- a/src/component/DetailCopy/detailLeft/element.vue
+++ b/src/component/DetailCopy/detailLeft/element.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="element">
-		<div class="detailText">Current Element</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentElement')}}</div>
 		<div class="select_element">
 			<img :class="{active:elementList.length == 1}" v-for="item in elementList" @click="addElement(item)" :src="item.path" alt="">
 			<!-- <img :src="selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/models.vue
+++ b/src/component/DetailCopy/detailLeft/models.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketch">
-		<div class="detailText">Current Model</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentModel')}}</div>
 		<div class="select_sketch">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="frontBack.body.path || selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/module/libraryList.vue
+++ b/src/component/DetailCopy/detailLeft/module/libraryList.vue
@@ -4,7 +4,7 @@
 			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" style="width: 40%;">
 				<a-select
 					v-model:value="designType"
-					:options="designTypeList"
+					:options="(designTypeList || catecoryList)"
 					@change="handleChange"
 					style="width:100%"
 					size="large"
--- a/src/component/DetailCopy/detailLeft/module/selectList.vue
+++ b/src/component/DetailCopy/detailLeft/module/selectList.vue
@@ -1,28 +1,32 @@
 <template>
    <div class="selectList">
-		<div class="switch_type_list" v-if="type != 'element'">
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				v-if="isUpload"
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+		<div class="selectList_header">
+			<div class="switch_type_list" v-if="type != 'element'">
+				<div
+					@click.stop="openCurrent()"
+					class="switch_type_item"
+					:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+					v-if="deReconstructionList.length == 0"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+				</div>
+				<div
+					v-if="isUpload"
+					@click.stop="openUpload()"
+					class="switch_type_item"
+					:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+				</div>
+				<div
+					@click.stop="openLibrary()"
+					class="switch_type_item"
+					:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+				</div>
 			</div>
+			<slot name="selectSex"></slot>
 		</div>
 		<div class="print_content_list">
 			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element' && deReconstructionList.length == 0">
@@ -123,6 +127,9 @@ export default defineComponent({
 			if(props.type == 'element'){
 				openLibrary()
 			}
+			if(props.deReconstructionList.length > 0){
+				detailData.selectTitle = 'upload'
+			}
 		})
        return{
 			...toRefs(detailData),
@@ -151,35 +158,39 @@ export default defineComponent({
 		height: auto;
 		display: flex;
 		flex-direction: column;
-		> .switch_type_list{
-			display: flex;
+		> .selectList_header{
 			margin-bottom: 2.5rem;
-			> .switch_type_item:last-child{
-				margin-right: 0;
-			}
-			> .switch_type_item{
-				position: relative;
-				cursor: pointer;
-				margin-right: 6.5rem;
-			}
-			> .switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.4rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: -.5rem;
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-			> .select_swtich {
-				color: #000;
-				font-weight: 600;
-			}
-			> .select_swtich::before {
-				width: 100%;
+			display: flex;
+			align-items: center;
+			> .switch_type_list{
+				display: flex;
+				> .switch_type_item:last-child{
+					margin-right: 0;
+				}
+				> .switch_type_item{
+					position: relative;
+					cursor: pointer;
+					margin-right: 6.5rem;
+				}
+				> .switch_type_item::before {
+						position: absolute;
+						content: "";
+						display: block;
+						background: #000;
+						height: calc(.4rem*1.2);
+						left: 50%;
+						transform: translateX(-50%);
+						bottom: -.5rem;
+						width: 0px;
+						transition: 0.3s all;
+					}
+				> .select_swtich {
+					color: #000;
+					font-weight: 600;
+				}
+				> .select_swtich::before {
+					width: 100%;
+				}
 			}
 		}
 		> .print_content_list{
--- a/src/component/DetailCopy/detailLeft/module/uploadModel.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadModel.vue
@@ -0,0 +1,301 @@
+<template>
+	<div class="createCloud" ref="createCloud"></div>
+	<a-modal
+	  class="createCloud_modal generalModel"
+	  v-model:visible="operationsModal"
+	  :footer="null"
+	  :get-container="() => $refs.createCloud"
+	  width="50%"
+	  :height="'77rem'"
+	  :maskClosable="false"
+	  :centered="true"
+	  :closable="false"
+	  :mask="true"
+	  wrapClassName="#app"
+	  :keyboard="false"
+	>
+	  <div class="generalModel_btn">
+		<div class="generalModel_closeIcon" @click.stop="clearData()">
+		  <svg
+			width="46"
+			height="46"
+			viewBox="0 0 46 46"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		  >
+			<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+			<rect
+			  x="32.5063"
+			  y="12"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(45 32.5063 12)"
+			  fill="#000"
+			/>
+			<rect
+			  x="34.6274"
+			  y="32.5059"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(135 34.6274 32.5059)"
+			  fill="#000"
+			/>
+		  </svg>
+		</div>
+	  </div>
+	  <div class="modal_title_text">
+		<div>Upload</div>
+	  </div>
+	  <div class="allUserPoeration_btn">
+		<div class="uploadList_box">
+			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name"/>
+					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+				</div>
+			</div>
+			<div class="upload_item">
+				<div class="upload" @click="upload">
+					<i class="fi fi-br-upload"></i>
+				</div>
+			</div>
+			<div class="mark_loading" v-show="isShowMark">
+				<a-spin size="large" />
+			</div>
+		</div>
+		<div class="gallery_btn" style="margin-left: auto;" @click="setOk">OK</div>
+	  </div>
+	</a-modal>
+  </template>
+  <script lang="ts">
+  import {
+	defineComponent,
+	computed,
+	reactive,
+	watch,
+	onMounted,
+	h,
+	nextTick,
+	toRefs,
+  } from "vue";
+  import { LoadingOutlined } from "@ant-design/icons-vue";
+  import { Https } from "@/tool/https";
+  import { getCookie, setCookie } from "@/tool/cookie";
+  import { useStore } from "vuex";
+  import { useI18n } from "vue-i18n";
+  import { getMinioUrl } from "@/tool/util";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+
+  export default defineComponent({
+	components: {sketchCategory},
+	props: {
+		deReconstructionList:{
+			type:Array,
+			default:()=>[]
+		}
+	},
+	emits: ["setUploadImgList"],
+	setup(props, { emit }) {
+	  const store = useStore();
+	  let operations = reactive({
+		operationsModal: false,
+		isShowMark:false,
+		uploadList:[],
+	  });
+	  let operationsData = reactive({
+		
+	  });
+	  const getUploadElement = () => {
+	  };
+	  let init = () => {
+		operations.operationsModal = true
+	  };
+	  const clearData = () => {
+		operations.operationsModal = false
+		emit('setUploadImgList',JSON.parse(JSON.stringify(operations.uploadList)))
+		operations.uploadList = []
+	  };
+	  let setOk = () => {
+		clearData()
+	  };
+	  const upload = ()=>{
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.accept = 'image/*';  // 只允许选择图片文件
+			input.multiple = true;     // 允许多选
+			input.addEventListener('change', (event:any) => {
+				operations.isShowMark = true; // 显示加载状态
+				const files = event?.target?.files;
+				if (!files || files.length === 0) {
+					operations.isShowMark = false; 
+					return;
+				}
+				let file = [...Array.from(files)];
+				let param = new FormData(); 
+				param.append('isPin', '0');
+				param.append('gender', store.state.Workspace.probjects.sex);
+				param.append('level1Type', 'Sketchboard');
+				param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+				file.forEach((image:any) => {
+					param.append('file', image);
+				});
+
+				let config: any = {
+					headers: {
+						'Content-Type': 'multipart/form-data',
+						'Accept': '*/*'
+					}
+				};
+
+				Https.axiosPost(Https.httpUrls.elementUpload, param, config)
+					.then((rv: any) => {
+						rv.designType = 'Upload'
+						// rv.forEach((item:any)=>{
+							rv.category = props.deReconstructionList[0].name
+							rv.categoryValue = props.deReconstructionList[0].value
+						// })
+						operations.uploadList.unshift(rv);
+						operations.isShowMark = false;
+					})
+					.catch(rv => {
+						operations.isShowMark = false;
+					});
+			});
+
+			// 触发文件选择对话框
+			input.click();
+		}
+	  return {
+		...toRefs(operations),
+		...toRefs(operationsData),
+		init,
+		setOk,
+		clearData,
+		upload,
+	  };
+	},
+	data() {
+	  return {
+		indicator: h(LoadingOutlined, {
+		  style: {
+			fontSize: "2.4rem",
+		  },
+		  spin: true,
+		}),
+	  };
+	},
+	mounted() {},
+	methods: {},
+	directives: {
+	  mousewheel: {
+		mounted(el) {
+		  el.addEventListener("mouseenter", (e) => {
+			if (el.scrollWidth > el.clientWidth) {
+			  el.parentElement.style.overflowY = "hidden";
+			}
+		  });
+  
+		  // 鼠标移出事件
+		  el.addEventListener("mouseleave", () => {
+			el.parentElement.style.overflowY = "auto";
+		  });
+		  el.addEventListener(
+			"wheel",
+			(e) => {
+			  let num = 0;
+			  if (e.deltaY > 0) {
+				num = 25;
+			  } else {
+				num = -25;
+			  }
+			  el.scrollBy(num, 0);
+			},
+			{ passive: true }
+		  );
+		},
+	  },
+	},
+  });
+  </script>
+  <style lang="less" scoped>
+  :deep(.ant-modal-mask) {
+	background: rgba(0, 0, 0, 0.2);
+  }
+  :deep(.createCloud_modal) {
+	.ant-modal-body {
+	  display: flex;
+	  flex-direction: column;
+	}
+  }
+  </style>
+  <style lang="less" scoped>
+  .createCloud_modal {
+	.closeIcon {
+	  z-index: 2;
+	}
+	.allUserPoeration_btn {
+	  display: flex;
+	  overflow-x: auto;
+	  width: auto;
+	  margin-bottom: 2rem;
+	  flex-wrap: nowrap;
+	  flex-direction: column;
+	  width: 100%;
+	  flex: 1;
+	  > .uploadList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+					margin: 1rem;
+
+					> img{
+						cursor: pointer;
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+			> .upload_item{
+				width: calc((34rem - 2rem) / 2);
+				height: calc((34rem - 2rem) / 2);
+				align-items: center;
+				justify-content: center;
+				.upload{
+					cursor: pointer;
+					width: calc(6rem * 1.2);
+					height: calc(6rem * 1.2);
+					border: calc(0.3rem * 1.2) solid #000;
+					border-radius: calc(1rem * 1.2);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					i{
+						font-size: 2rem;
+						display: flex;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+  }
+  </style>
+  
--- a/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
@@ -9,14 +9,12 @@
 				</div>
 			</div>
 			<div class="upload_item">
-				<div class="upload" @click="upload">
+				<div class="upload" @click="openUpload">
 					<i class="fi fi-br-upload"></i>
 				</div>
 			</div>
-			<div class="mark_loading" v-show="isShowMark">
-				<a-spin size="large" />
-			</div>
 		</div>
+		<uploadModel ref="uploadModel" @setUploadImgList="setUploadImgList" :deReconstructionList="deReconstructionList"></uploadModel>
    </div>
 </template>
 <script lang="ts">
@@ -28,9 +26,10 @@ import { getCookie } from "@/tool/cookie";
 import { message,Upload} from 'ant-design-vue';
 import {getUploadUrl} from '@/tool/util'
 import { useI18n } from 'vue-i18n'
+import uploadModel from "./uploadModel.vue"
 export default defineComponent({
    components:{
-		sketchCategory
+		sketchCategory,uploadModel
    },
 	props:{
 		catecoryList:{
@@ -77,7 +76,9 @@ export default defineComponent({
 			token:getCookie("token"),
 			uploadUrl:getUploadUrl(),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
-			isShowMark:false,
+		})
+		const dataDom = reactive({
+			uploadModel:null as any
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -89,57 +90,22 @@ export default defineComponent({
 			// store.commit('DesignDetailCopy/setNewDetail',file)
 			emit('selectImgItem',file)
 		}
-		const upload = ()=>{
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.accept = 'image/*';  // 只允许选择图片文件
-			input.multiple = true;     // 允许多选
-			input.addEventListener('change', (event:any) => {
-				detailData.isShowMark = true; // 显示加载状态
-				const files = event?.target?.files;
-				if (!files || files.length === 0) {
-					detailData.isShowMark = false; 
-					return;
-				}
-				let file = [...Array.from(files)];
-				let param = new FormData(); 
-				param.append('id', '');
-				let segmentationType:any = props.segmentationType
-				param.append('type', segmentationType);
-				file.forEach((image:any) => {
-					param.append('file', image);
-				});
-
-				let config: any = {
-					headers: {
-						'Content-Type': 'multipart/form-data',
-						'Accept': '*/*'
-					}
-				};
-
-				Https.axiosPost(Https.httpUrls.imageSegmentation, param, config)
-					.then((rv: any) => {
-						rv.forEach((item:any)=>{
-							item.category = props.deReconstructionList[0].name
-							item.categoryValue = props.deReconstructionList[0].value
-						})
-						detailData.uploadList.unshift(...rv);
-						detailData.isShowMark = false;
-					})
-					.catch(rv => {
-						detailData.isShowMark = false;
-					});
-			});
-
-			// 触发文件选择对话框
-			input.click();
+		const setUploadImgList = (list:any)=>{
+			if(list.length>0){
+				detailData.uploadList.push(...list)
+			}
+		}
+		const openUpload = ()=>{
+			dataDom.uploadModel.init()
 		}
        return{
 			...toRefs(detailData),
+			...toRefs(dataDom),
 			...toRefs(getDetailListData),

 			selectImgItem,
-			upload,
+			openUpload,
+			setUploadImgList,
        }
    },
 	provide() {
--- a/src/component/DetailCopy/detailLeft/print.vue
+++ b/src/component/DetailCopy/detailLeft/print.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="print">
-		<div class="detailText">Current Print</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentPrint')}}</div>
 		<div class="select_print">
 			<img :class="{active:printList.length == 1}" v-for="item in printList" @click="addElement(item)" :src="item.path" alt="">
 			<!-- <img :src="selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/sketch.vue
+++ b/src/component/DetailCopy/detailLeft/sketch.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketch">
-		<div class="detailText">Current Sketch</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentSketch')}}</div>
 		<div class="select_sketch" v-if="selectDetail.id">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="selectDetail.sketchString || selectDetail.path" alt="">