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

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>