2023-11-22-1
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
154
src/views/versions1Guide.vue
Normal file
154
src/views/versions1Guide.vue
Normal 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>
|
||||
Reference in New Issue
Block a user