2023-11-22-1

This commit is contained in:
X1627315083
2023-11-22 09:37:30 +08:00
parent 4271d5ecf8
commit 91d93484de
23 changed files with 303 additions and 40 deletions

11
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"ant-design-vue": "^3.2.12",
"axios": "^1.4.0",
"core-js": "^3.8.3",
"driver.js": "^1.3.1",
"element-plus": "^2.4.2",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
@@ -5445,6 +5446,11 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
},
"node_modules/driver.js": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
"integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
},
"node_modules/duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -16565,6 +16571,11 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
},
"driver.js": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/driver.js/-/driver.js-1.3.1.tgz",
"integrity": "sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ=="
},
"duplexer": {
"version": "0.1.2",
"resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",

View File

@@ -15,6 +15,7 @@
"ant-design-vue": "^3.2.12",
"axios": "^1.4.0",
"core-js": "^3.8.3",
"driver.js": "^1.3.1",
"element-plus": "^2.4.2",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",

View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4292253 */
src: url('iconfont.woff2?t=1700017557054') format('woff2'),
url('iconfont.woff?t=1700017557054') format('woff'),
url('iconfont.ttf?t=1700017557054') format('truetype');
src: url('iconfont.woff2?t=1700554220413') format('woff2'),
url('iconfont.woff?t=1700554220413') format('woff'),
url('iconfont.ttf?t=1700554220413') format('truetype');
}
.iconfont {
@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bingji:before {
content: "\e620";
}
.icon-bingji1:before {
content: "\e668";
}
.icon-biaoqian:before {
content: "\e603";
}

Binary file not shown.

Binary file not shown.

View File

@@ -127,7 +127,7 @@ li {
--el-cascader-tag-background: #e1d9ec;
--el-fill-color: #e1d9ec;
height: 80%;
width: 80% !important;
width: 90% !important;
flex-wrap: nowrap;
overflow: hidden;
}
@@ -159,7 +159,8 @@ li {
--el-cascader-menu-selected-text-color: #000;
}
.el-popper .el-cascader-panel .el-scrollbar {
min-width: 18rem;
min-width: 19rem;
max-width: 19rem;
}
.el-popper .el-cascader-panel .el-scrollbar .el-cascader-menu__wrap {
height: 24.4rem;

View File

@@ -141,7 +141,7 @@ ul,li{
--el-cascader-tag-background:#e1d9ec;
--el-fill-color:#e1d9ec;
height: 80%;
width: 80% !important;
width: 90% !important;
flex-wrap: nowrap;
overflow: hidden;
.el-tag--light{
@@ -173,7 +173,8 @@ ul,li{
.el-cascader-panel{
--el-cascader-menu-selected-text-color: #000;
.el-scrollbar{
min-width: 18rem;
min-width: 19rem;
max-width: 19rem;
.el-cascader-menu__wrap{
height: 24.4rem;
.el-cascader-menu__list{

View File

@@ -39,14 +39,14 @@
<a-dropdown @click.stop="setOpenType('sex')">
<a-button>
<UserOutlined />
{{ workspaceItem.sex }}
{{ workspaceItem.sex.label }}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_sex_show" v-fade="openType.sex">
<ul class="habit_model_list">
<li v-for="item,index in sex">
<div @click.stop="setSex(item.value)">{{ item.label }}</div>
<div @click.stop="setSex(item)">{{ item.label }}</div>
</li>
</ul>
</div>
@@ -334,7 +334,7 @@ export default defineComponent({
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
value:item.key,
label:item.name,
}
arr.push(obj)
@@ -548,7 +548,8 @@ export default defineComponent({
},
setSex(v:any){
this.openType.sex = false
this.workspaceItem.sex = v
this.workspaceItem.sex.value = v.value
this.workspaceItem.sex.label = v.label
this.getMannequins()
this.setMannequinsSex()
this.getPosition('sex')
@@ -563,11 +564,11 @@ export default defineComponent({
// this.workspaceItem.mannequinId = item.id
// this.workspaceItem.mannequinType = str
// this.workspaceItem.mannequinUrl = item.presignedUrl
if(this.workspaceItem.sex == 'Female'){
if(this.workspaceItem.sex.value == 'FEMALE'){
this.workspaceItem.femalePresignedUrl = item.presignedUrl
this.workspaceItem.mannequinFemaleType = str
this.workspaceItem.mannequinFemaleId = item.id
}else if(this.workspaceItem.sex == 'Male'){
}else if(this.workspaceItem.sex.value == 'MALE'){
this.workspaceItem.malePresignedUrl = item.presignedUrl
this.workspaceItem.mannequinMaleType = str
this.workspaceItem.mannequinMaleId = item.id
@@ -577,11 +578,11 @@ export default defineComponent({
this.workspaceItem.mannequinId = item.id
},
setMannequinsSex(){
if(this.workspaceItem.sex == 'Female'){
if(this.workspaceItem.sex.value == 'FEMALE'){
this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
}else if(this.workspaceItem.sex == 'Male'){
}else if(this.workspaceItem.sex.value == 'MALE'){
this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId

View File

@@ -18,7 +18,7 @@
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
class="switch_type_item Guide_1_4"
:class="[openClick == 3 ? 'select_swtich' : '']"
>
<span>{{ $t('MoodboardUpload.Generate') }}</span>

View File

@@ -1,6 +1,6 @@
<template>
<div v-if="showCollectionModal">
<a-modal class="modal_component collection_modal"
<a-modal class="modal_component collection_modal Guide_1_2"
v-model:visible="showCollectionModal"
:footer="null"
width="65%"

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'导出文件失败。',
},
LibraryPage:{
Organize:'喜欢',
Upload:'上传',
Generate:'生成',
Delete:'删除',
Rename:'重命名',
inputContent1:'输入名字进行搜索',
intersection:'交集',
unionSet:'并集',
all:'全选',
ImageOnly:'图片',
TextOnly:'文字',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'Failed to export the file',
},
LibraryPage:{
Organize:'Organize',
Upload:'Upload',
Generate:'Generate',
Delete:'Delete',
Rename:'Rename',
inputContent1:'Search by your style code',
intersection:'intersection',
unionSet:'union set',
all:'all',
ImageOnly:'Image Only',
TextOnly:'Text Only',
@@ -201,7 +204,7 @@ export default {
Delete:'Delete',
Maximum:'Maximum 8 images can be uploaded, Maximum 2M per image',
Thumbnail:'Thumbnail preview of selected moodboard',
layout:'layout',
layout:'Layout',
jsContent1:'You can select up to 8 images',
jsContent2:"upload failed",
jsContent3:"You can only upload Image file!",

View File

@@ -56,11 +56,14 @@ export default {
jsContent3:"Échec de l'exportation du fichier",
},
LibraryPage:{
Organize:'Organiser',
Upload:'Télécharger',
Generate:'Générer',
Delete:'Supprimer',
Rename:'Renommer',
inputContent1:'Recherchez par votre code de style',
intersection:'intersection',
unionSet:"ensemble d'unions",
all:'tout',
ImageOnly:'Image uniquement',
TextOnly:'Texte seulement',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'Impossibile esportare il file',
},
LibraryPage:{
Organize:'Organizzare',
Upload:'Caricamento',
Generate:'creare',
Delete:'Eliminare',
Rename:'Rinominare',
inputContent1:'Search by your style code',
intersection:'intersezione',
unionSet:'insieme di unione',
all:'Tutto',
ImageOnly:'Solo immagine',
TextOnly:'Solo testo',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'ファイルのエクスポートに失敗しました',
},
LibraryPage:{
Organize:'編成',
Upload:'アップロード',
Generate:'生成する',
Delete:'消去',
Rename:'名前の変更',
inputContent1:'スタイルコードで検索',
intersection:'交差点',
unionSet:'ユニオンセット',
all:'全て',
ImageOnly:'画像のみ',
TextOnly:'テキストのみ',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'파일을 내보내지 못했습니다.',
},
LibraryPage:{
Organize:'구성',
Upload:'업로드',
Generate:'생성하다',
Delete:'삭제',
Rename:'이름 바꾸기',
inputContent1:'스타일 코드로 검색',
intersection:'교차로',
unionSet:'결합 세트',
all:'모두',
ImageOnly:'이미지만',
TextOnly:'텍스트만',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'Не удалось экспортировать файл',
},
LibraryPage:{
Organize:'Организовать',
Upload:'Загрузить',
Generate:'Генерировать',
Delete:'Удалить',
Rename:'Переименовать',
inputContent1:'Поиск по коду вашего стиля',
intersection:'пересечение',
unionSet:'набор объединений',
all:'all',
ImageOnly:'Только изображение',
TextOnly:'Только текст',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'ล้มเหลวในการส่งออกไฟล์',
},
LibraryPage:{
Organize:'จัดระเบียบ',
Upload:'อัปโหลด',
Generate:'กำเนิด',
Delete:'ลบ',
Rename:'เปลี่ยนชื่อ',
inputContent1:'ค้นหาตามรหัสสไตล์ของคุณ',
intersection:'แยก',
unionSet:'ชุดยูเนี่ยน',
all:'ทั้งหมด',
ImageOnly:'รูปภาพเท่านั้น',
TextOnly:'ข้อความเท่านั้น',

View File

@@ -55,11 +55,14 @@ export default {
jsContent3:'Không xuất được tệp',
},
LibraryPage:{
Organize:'Tổ chức',
Upload:'Tải lên',
Generate:'Phát ra',
Delete:'Xóa bỏ',
Rename:'Đổi tên',
inputContent1:'Tìm kiếm theo mã kiểu của bạn',
intersection:'ngã tư',
unionSet:'bộ đoàn',
all:'tất cả',
ImageOnly:'Chỉ hình ảnh',
TextOnly:'Chỉ văn bản',

41
src/tool/guide.js Normal file
View File

@@ -0,0 +1,41 @@
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
//版本一
const driverObj__ = driver({
steps: [
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
],
// showProgress: true,//控制总页数和当前页数是否显示
allowClose:false,
showButtons:false,
stagePadding:10,//切口到元素的距离
stageRadius:5,//切口圆弧度
allowKeyboardControl:true,//控制是否可以键盘控制下一步
disableActiveInteraction:false,//是否禁用显示元素的交互
// overlay: true,
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
console.log(popover,options);
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 3){
popover.footer.style.display = 'block'
}else{
popover.footer.style.display = 'none'
}
},
});
const openGuide = () =>{
// driverObj__.drive();
driverObj__.moveNext();
driverObj__.movePrevious();
}
export{
openGuide,
driverObj__,
}

View File

@@ -14,7 +14,7 @@
class="home_null_icon"
src="@/assets/images/homePage/null_img.png"
/> -->
<div class="new_collection_button" @click="startNewCollection()">
<div id="Guide_1_1" class="new_collection_button" @click="startNewCollection()">
{{ $t('HomeView.GetStarted') }}
</div>
</div>
@@ -205,7 +205,7 @@
</template>
<script lang="ts">
import { defineComponent, h, ref, computed ,inject,provide} from "vue";
import { defineComponent, h, ref, computed ,inject,provide,nextTick} from "vue";
import HeaderComponent from "@/component/HomePage/Header.vue";
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
@@ -217,6 +217,7 @@ import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { Https } from "@/tool/https";
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
import { openGuide,driverObj__ } from "@/tool/guide";
import { LoadingOutlined } from "@ant-design/icons-vue";
import draggable from 'vuedraggable'
import JSZip from "jszip";
@@ -330,6 +331,10 @@ export default defineComponent({
};
},
mounted() {
// if(JSON.parse( getCookie('isFirst') as any)){
openGuide()
// }
let userInfo:any = getCookie("userInfo")
this.userInfo = JSON.parse(userInfo);
this.store.dispatch('get_clothingType')
@@ -432,6 +437,9 @@ export default defineComponent({
let collectionModal: any = this.$refs.collectionModal;
this.store.commit("clearAllData");
collectionModal.changeCollectionModal(true);
nextTick().then(()=>{
driverObj__.moveNext();
})
},
//recollection

View File

@@ -30,19 +30,8 @@
<div class="library_body_right">
<div class="library_right_header">
<div class="library_header_left">
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
<a-upload
v-show="uploadGenerate == 'Upload'"
:before-upload="beforeUpload"
:customRequest="customRequest "
:multiple="selectCode != 'Models'"
:maxCount="15"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div>{{ $t('LibraryPage.Upload') }}</div>
</a-upload>
<div v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
<div>{{ $t('LibraryPage.Organize') }}</div>
</div>
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
</div>
@@ -84,6 +73,19 @@
<div class="content_body_header">
<div class="content_body_header_left">
<div class="content_body_header_right">
<div :class="['header_operate_item' , 'fontSize','active']">
<a-upload
v-show="uploadGenerate == 'Upload'"
:before-upload="beforeUpload"
:customRequest="customRequest "
:multiple="selectCode != 'Models'"
:maxCount="15"
accept=".jpg,.png,.jpeg,.bmp"
@change="fileUploadChange"
>
<div>{{ $t('LibraryPage.Upload') }}</div>
</a-upload>
</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">{{ $t('LibraryPage.Rename') }}</div>
</div>
@@ -117,17 +119,18 @@
:max-collapse-tags=3
:props="props"
:collapse-tags-tooltip="true"
clearable
ref="cascader"
popper-class="libraryPageCascader"
@visible-change="dropdownVisibleChange"
>
</el-cascader>
</div>
<div class="intersection">
<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
</div>
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div>
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
@@ -325,7 +328,6 @@
:max-collapse-tags=6
:props="props"
:collapse-tags-tooltip="true"
clearable
>
</el-cascader>
<div class="rename_button_list">
@@ -458,7 +460,7 @@ export default defineComponent({
value:'id',
label:'classificationName',
}
let intersection = ref(1)
let isTest = ref()
@@ -496,6 +498,7 @@ export default defineComponent({
options,
t,
props,
intersection,
isTest,
}
},
@@ -981,6 +984,7 @@ export default defineComponent({
modelSex:this.sex?this.sex:'',
pictureName:this.searchPictureName,
size:this.pageSize,
intersection:this.intersection,
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
@@ -1341,7 +1345,7 @@ export default defineComponent({
color: #C2C2C2;
font-size: 1.6rem;
.ant-upload{
font-size: 1.6rem;
// font-size: 1.6rem;
// font-weight: 900;
}
.ant-upload-list-text{
@@ -1395,7 +1399,8 @@ export default defineComponent({
}
}
.search_cascader{
width: 60%;
// width: 53%;
width: 38rem;
display: flex;
position: relative;
@@ -1416,6 +1421,10 @@ export default defineComponent({
color: #FFFFFF;
}
}
.intersection{
margin-left: 3rem;
cursor: pointer;
}
}
@@ -1547,6 +1556,7 @@ export default defineComponent({
cursor: no-drop;
}
}
.generage_btn{
margin: 0 3rem;
}

View File

@@ -0,0 +1,154 @@
<template>
<div class="move_page">
<div class="move_click">
<div class="move_click_dian" v-for="i in moveDian" :key="i" :style="{'background':i}" @mousedown="AddDian(i)"></div>
</div>
<div class="img_block" ref="imgbox" @mousemove="startMove($event)">
<img ref="img" src="https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF" />
<!-- <div class="img_mark"></div> -->
<div class="img_click_dian" v-for="item in imgDian" :key="item" :style="{'background':item.color,left:item.left+'px', top:item.top+'px'}" @mousedown="getMouseDown($event,item)" @mousemove="startMove($event)"></div>
</div>
</div>
</template>
<script>
import { defineComponent,h,ref} from "vue";
export default defineComponent({
data(){
return{
moveDian:['red','yellow'],
imgDian:[],
intObj:null,
startDian:false,
currentSign:{},
imgBox:{},
moveOriginal:{posX: 0, posY: 0}
}
},
mounted(){
this.imgBox = {
left : this.$refs.imgbox.offsetLeft,
top:this.$refs.imgbox.offsetTop,
scrollTop:this.$refs.scrollTop || 0,
}
},
methods:{
AddDian(color){
this.startDian = true
this.intObj = {
color:color
}
},
startMove(event){
let scrollTop = this.$refs.imgbox.scrollTop;
if(this.intObj){
this.currentSign.color = this.intObj.color
this.currentSign.left = event.clientX - this.imgBox.left
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
this.imgDian.push(this.currentSign)
this.intObj = null
}else{
if(this.startDian){
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
document.addEventListener('mouseup', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
}
}
},
// 在边界上的签名域处理
setBoundarySign() {
let height = this.$refs.imgbox.offsetHeight + this.$refs.imgbox.scrollTop;
// 2 为签名域的边框
let maxPosHeight = height - 30
// console.log(height,maxPosHeight,this.currentSign.pos_params.height)
let maxPosWidth = this.$refs.imgbox.clientWidth - 30 //+ this.signBox.paddLeft;
if (this.currentSign.top <= 0) {
this.currentSign.top = 0
} else if (this.currentSign.top >= maxPosHeight ) {
this.currentSign.top = maxPosHeight;
}
if (this.currentSign.left <= 0) {
this.currentSign.left = 0
} else if (this.currentSign.left >= maxPosWidth) {
this.currentSign.left = maxPosWidth;
}
},
getMouseDown(event,item){
this.currentSign = item
// 计算出鼠标在签名域上的偏移
this.moveOriginal.posX = event.offsetX
// this.moveOriginal.posY = mousedownParam.event.clientY - this.currentSign.pos_params.top - this.signBox.boxTop;
this.moveOriginal.posY = event.offsetY // 1为边框
this.startDian = true
},
getMouseOver(){
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
document.removeEventListener('touchend', this.getMouseOver);
}
}
})
</script>
<style scoped>
.move_page{
display: flex;
}
.move_click{
width: 60px;
}
.move_click_dian{
width: 30px;
height: 30px;
border-radius: 50%;
margin-bottom: 60px;
cursor: pointer;
user-select:none; /* CSS3属性 */
}
.img_block{
position: relative;
user-select:none;
-moz-user-select:none;
overflow-y: auto;
background: green;
}
.img_mark{
width: 1200px;
height: 600px;
background: #ccc;
/* width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; */
}
img{
user-select:none;
-moz-user-select:none;
width: 700px;
}
.img_click_dian{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
cursor: pointer;
}
</style>