aida_front/src/component/LibraryPage/ModelPlacement.vue

<template>
    <div  v-show="placementShow">
        <a-modal class="models_placement_component" 
            v-model:visible="placementShow" 
            :footer="null" 
            width="111.5rem"
            :maskClosable="false"
            :centered="true"
        >
            <template #closeIcon>
                <div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
            </template>
            <div class="models_placement_body" >
                <div class="palcement_modal_header">
                    <div class="models_placement_title">{{ $t('ModelPlacement.Registration') }}</div>
                    <div class="placement_operate_list">
                        <div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
                            <div class="icon iconfont icon-baocun1 operate_icon"></div>
                            <div class="operate_item_des">{{ $t('ModelPlacement.Submit') }}</div>
                        </div>
                        <div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
                            <div class="icon iconfont icon-shengchengyulan operate_icon"></div>
                            <div class="operate_item_des">{{ $t('ModelPlacement.Preview') }}</div>
                        </div>
                        <div class="operate_item" v-show="perviewUrl" @click="backPreview">
                            <div class="icon iconfont icon-fanhui1 operate_icon"></div>
                            <div class="operate_item_des">{{ $t('ModelPlacement.Back') }}</div>
                        </div>
                        <div class="operate_item" @click="restoreLocationList">
                            <div class="icon iconfont icon-huifu operate_icon"></div>
                            <div class="operate_item_des">{{ $t('ModelPlacement.Restore') }}</div>
                        </div>
                    </div>
                </div>
				<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
					<div style="display: flex;   align-items: center;">
						<div style="display: flex;   align-items: center;">
							<input type="checkbox" model="false" @click="()=>{modelType = 'System'}">
							{{ $t('ModelPlacement.System') }}
						</div>
						<div style="display: flex;   align-items: center;">
							<input type="checkbox" model="false" @click="()=>{modelType = 'Library'}">
							{{ $t('ModelPlacement.Library') }}
						</div>
					</div>
				</div>
                <div class="models_placement_content">
                    <div class="plcaement_point_content">
						<div class="select_block">
							<a-select
								ref="select"
								v-model:value="sex"
								:options="sexList"
							>
								<template #suffixIcon
									><span
										class="icon iconfont icon-xiala"
										style="color: #343579"
									></span
								></template>
							</a-select>
						</div>
                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  >
                            <div class="ponit_title">{{point.title}}</div>
                            <div class="point_list">
                                <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
                            </div>
                        </div>
						<div class="placement_point_item placement_point_item_btn">
							<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
						</div>
                    </div>
					
                    <div class="placement_content_operate_list">
                        <div class="placement_content_operate_item" @click="changeRemoveStatus">
                            <div class="placement_remove_point_block"></div>
                            <div class="placement_content_operate_des">{{ $t('ModelPlacement.RemovePoint') }}</div>
                        </div>
                    </div>

                    <div class="placement_tip_content">{{ $t('ModelPlacement.mannequinHint') }}</div>

                    <div class="img_preview_block"  >
                        <div class="perview_mark_loading" v-show="isShowMark">
                            <a-spin size="large" />
                        </div>
                        <div class="img_content_block" ref="imgbox">
							
							<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
								<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)"  @mousemove="startMove($event)">
									<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
									<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
								</div>
							</div>
							<vue-cropper
								ref="cropper"
								:img="option.img"
								:outputSize="option.outputSize"
								:outputType="option.outputType"
								:info="option.info"
								:canScale="option.canScale"
								:autoCrop="option.autoCrop"
								:fixed="option.fixed"
								:fixedNumber="option.fixedNumber"
								:full="option.full"
								:fixedBox="option.fixedBox"
								:canMove="option.canMove"
								:canMoveBox="option.canMoveBox"
								:original="option.original"
								:centerBox="option.centerBox"
								:height="option.height"
								:infoTrue="option.infoTrue"
								:limitMinSize="option.limitMinSize"
								:enlarge="option.enlarge"
								@real-time="realTime"
								:autoCropArea="1"
								:autoCropHeight="option.autoCropHeight"
								:autoCropWidth="option.autoCropWidth"
								:mode="option.mode">
							</vue-cropper>
                            <!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
                           
                        </div>
                        
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,nextTick} from 'vue'
import { Https } from "@/tool/https";
import {dataURLtoFile,base64toFile} from "@/tool/util"
import { getCookie } from "@/tool/cookie";
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
	components:{
        VueCropper,
    },
    setup() {
        const store = useStore()
        let oldLocationList:any = ref([])
        let locationList:any = ref([])
        let printObject:any = ref({})
        let imgBox:any = ref({})
        let intObj:any = ref(null)
        let currentSign:any = ref({})
        let oldPointList:any = ref([]) //备份点
        let pointList:any = ref([])
        let isSubmit:any = ref(false) //判断历史是否有提交过
		let manager:any = ref(false)
		let userInfo:any = ref()

		let cropperTime:any = ref()

		let {t} = useI18n()
        return {
            store,
            oldLocationList,
            locationList,
            printObject,
            imgBox,
            intObj,
            currentSign,
            oldPointList,
            pointList,
            isSubmit,
			manager,
			userInfo,

			cropperTime,

			t
        }
    },
    data(){
        return{
            placementShow:false,
            collectionIndex:0,
            startDian:false,
            moveOriginal:{posX: 0, posY: 0},
            isRemoveStatus:false,
            placement_sacle:30,
            perviewUrl:'',//预览的图片地址
            isShowMark:false,
			modelType:'Library',
			sex:'Male',
			sexList: [
               
            ],
			option:{
				img: '',             //裁剪图片的地址
				outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
				outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
				info: false,          //图片大小信息
				canScale: true,      //图片是否允许滚轮缩放
				autoCrop: true,      //是否默认生成截图框
				autoCropWidth: '0',  //默认生成截图框宽度
				autoCropHeight: '0', //默认生成截图框高度
				fixed: true,         //是否开启截图框宽高固定比例
				fixedBox: true,      //固定截图框大小，不允许改变
				fixedNumber: [1, 2.125], //截图框的宽高比例
				full: false,         //false按原比例裁切图片，不失真
				canMove: true,      //上传图片是否可以移动
				canMoveBox: false,    //截图框能否拖动
				original: false,     //上传图片按照原始比例渲染
				centerBox: false,    //截图框是否被限制在图片里面
				height: true,        //是否按照设备的dpr 输出等比例图片
				infoTrue: true,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
				maxImgSize:'2000',    //限制图片最大宽度和高度
				enlarge: 7,          //图片根据截图框输出比例倍数
				mode: 'auto 90%',  //图片默认渲染方式
				limitMinSize:'100%'
			},
        }
    }, 
	mounted(){
		let userInfo:any = getCookie("userInfo")
        this.userInfo = JSON.parse(userInfo);
		this.getSex()
	},
	watch: {
		sex:{
			handler(newVal:any,oldVal:any){
				// let imgbox:any = this.$refs.imgbox
				// let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
				// if(imgBoxSizeBG){
				// 	if(newVal == 'Male'){
				// 		imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
				// 	}else{
				// 		imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
				// 	}
				// }

			},
		},
	},
    methods:{
        formatter(value:number){
            return `${value}%`;
        },
        showPlacementModal(data:any){
			
            this.placementShow = true
            this.printObject = {
                ...data
            }
			this.option.img = this.printObject.url
			
            setTimeout(()=>{
				nextTick().then(()=>{
					let image:any = new Image()
					image.src = this.option.img
					let imgbox:any = this.$refs.imgbox
					let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
					let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
					let divTop:any = document.createElement('div');
					let divBottom:any = document.createElement('div');
					let divCenter:any = document.createElement('div');
					if(imgbox.getElementsByClassName('cropper-view-box-Bg').length >= 1){
					}else{
						divTop.classList.add('cropper-view-box-Bg')
						divBottom.classList.add('cropper-view-box-Bg')
						divCenter.classList.add('cropper-view-box-Bg')
						divTop.classList.add('cropper-view-box-Top')
						divBottom.classList.add('cropper-view-box-Bottom')
						divCenter.classList.add('cropper-view-box-Center')

						imgBoxSizeBG.appendChild(divTop)
						imgBoxSizeBG.appendChild(divBottom)
						imgBoxSizeBG.appendChild(divCenter)
						// imgBoxSizeBG.appendChild(div)

					}
					// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'

					let cropper:any = this.$refs.cropper
					cropper.cropH = cropper.scale*cropper.trueHeight
					cropper.cropW = cropper.cropH/2.125
					cropper.cropOffsertX = cropper.getImgAxis().x1+(cropper.scale*cropper.trueWidth/2-cropper.cropW/2)
					cropper.cropOffsertY = cropper.getImgAxis().y1
					imgBoxSize.addEventListener('mousemove',this.startMove)
					this.setImageSize()
					this.getDefaultPointList(this.imgBox,' ')
					
				})
				
            },800)
        },
		realTime(data:any) {
			clearTimeout(this.cropperTime)
			this.cropperTime = setTimeout(()=>{
				this.setImageSize()
			},1000)
			
        },
		setImageSize(){
			let imgbox:any = this.$refs.imgbox
			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
			let position = imgBoxSize.getBoundingClientRect()
			let position1 = imgbox.getBoundingClientRect()
			let cropper:any = this.$refs.cropper
			this.imgBox = {
				width:cropper.cropW,
				height:cropper.cropH,
				left : position1.left,
				top:position1.top,
				scrollTop:imgBoxSize.scrollTop || 0,
				x:cropper.getCropAxis().x1,
				y:cropper.getCropAxis().y1,
			}
		},
		getSex(){
			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
				if (rv) {
					let arr:any = []
					rv.forEach((item:any) => {
						arr.push({
							value:item.name,
							label:item.value,
						})						
					});
					this.sex = arr[0].value
					this.sexList = arr
				}
			})
		},
		//截屏框移动
		setMove(){
			
		},
        //初始化可以使用的点位
        getDefaultPointList(imgBox:any,str:any){
            this.isSubmit = false
			this.locationList=[]
            this.pointList = [
                {
                    title:this.t('ModelPlacement.SHOULDER'),
                    pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
                },
                {
                    title:this.t('ModelPlacement.WAISTBAND'),
                    pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
                },
                {
                    title:this.t('ModelPlacement.HAND'),
                    pointList:[{type:'handLeft',color:'#d88e8e',show:true,field:'hand'},{type:'handRight',color:'#d88e8e',show:true,field:'hand'}]
                },
            ]
			for(let ponit of this.pointList){
				for(let pointItem of ponit.pointList){
					if(this.printObject[pointItem.type]?.length){
						pointItem.show = false
						let data = {
							left:this.printObject[pointItem.type][0] * imgBox.width - 12,
							top:this.printObject[pointItem.type][1] * imgBox.height - 12,
							color:pointItem.color,
							type:pointItem.type,
							field:pointItem.field,
						}
						this.locationList.push(data)
					}
				}
			}
            if(str != 'setPoint'){//编辑
                this.isSubmit = true
				// this.option.canScale = false
				// this.option.canMove = false
            
                this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
				this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
            }else{
				this.option.canScale = true
				// this.option.fixedBox = false
				this.option.canMove = true
				// this.option.canMoveBox = true
			}
           
        },
		setPoint(){
			let file = this.printObject.file
			let url = this.printObject.url
			this.printObject = {
				"shoulderLeft": [
					0.3338,
					0.1858
				],
				"shoulderRight": [
					0.6644,
					0.1858
				],
				"waistbandLeft": [
					0.3758,
					0.364
				],
				"waistbandRight": [
					0.6103,
					0.364
				],
				"handLeft": [
					0.3277,
					0.4687
				],
				"handRight": [
					0.6764,
					0.4715
				],
				file:file,
				url:url
			}
			this.getDefaultPointList(this.imgBox,'setPoint')
		},
        AddDian(point:any){
            if(!point.show){
                return
            }
            this.startDian = true 
            this.isRemoveStatus = false
            this.intObj = point
        },

        changeRemoveStatus(){
            this.isRemoveStatus = true
        },

        startMove(event:any){
            if(this.isRemoveStatus){
                return
            }
            let imgbox:any = this.$refs.imgbox
			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
            let scrollTop = imgBoxSize.scrollTop;
            if(this.intObj){
                this.currentSign.left = event.clientX - this.imgBox.left
                this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top 
                this.currentSign.color = this.intObj.color
                this.currentSign.type= this.intObj.type
                this.currentSign.field = this.intObj.field
                this.locationList.push(this.currentSign)
                this.intObj.show = false
                this.intObj = null
            }else{
				//鼠标移动
                if(this.startDian){
                    this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
                    this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
                    document.addEventListener('mouseup', this.getMouseOver);
                    this.$forceUpdate()
                    this.setBoundarySign()
					
                }
            }
        },

      

         // 在边界上的签名域处理
         setBoundarySign() {
            let imgbox:any = this.$refs.imgbox
			let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
			let top = (this.$refs.cropper as any).getCropAxis().y1
			let left = (this.$refs.cropper as any).getCropAxis().x1
            let height = imgBoxSize.offsetHeight;
            // let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
            // 2 为签名域的边框
            let maxPosHeight = height - 24
            let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
            if (this.currentSign.top+top <= 0) {
                this.currentSign.top = 0
            } else if (this.currentSign.top >= maxPosHeight+top ) {
                this.currentSign.top = maxPosHeight+top;
            }
            if (this.currentSign.left+left <= 0) {
                this.currentSign.left = 0
            } else if (this.currentSign.left >= maxPosWidth+left) {
                this.currentSign.left = maxPosWidth+left;
            }
        },

        getMouseDown(event:any,item:any,index:number){
            if(this.isRemoveStatus){
				//删除
                for(let itemPoint of this.pointList){
                    for(let point of itemPoint.pointList){
                        if(item.type == point.type){
                            point.show = true
                            break
                        }
                    }
                }
                this.locationList.splice(index,1)
            }else{
                this.currentSign = item
                // 计算出鼠标在签名域上的偏移
                // this.moveOriginal.posX = event.offsetX
                // this.moveOriginal.posY = event.offsetY // 1为边框
				this.moveOriginal.posX = 0
                this.moveOriginal.posY = 0 // 1为边框

                this.startDian = true
            }
            
        },
     
        getMouseOver(){//鼠标抬起
            this.startDian = false
            this.currentSign = {}
            document.removeEventListener('mouseup', this.getMouseOver);
        },

        closeModal(){
            let _this = this
            if(!this.isSubmit){
                Modal.confirm({
                    title: this.t('ModelPlacement.jsContent1'),
                    icon: createVNode(ExclamationCircleOutlined),
                    okText: 'Yes',
                    cancelText: 'No',
					mask:false,
                    centered:true,
                    onOk() {
                        // _this.getDefaultPointList(_this.imgBox)
                        _this.oldLocationList = []
                        _this.locationList = []
                        _this.intObj = null
                        _this.currentSign = {}
                        _this.isRemoveStatus = false
                        _this.placementShow = false
                        _this.perviewUrl = ''
                    }
                });
            }else{
                // _this.getDefaultPointList(_this.imgBox)
                _this.oldLocationList = []
                _this.locationList = []
                _this.intObj = null
                _this.currentSign = {}
                _this.isRemoveStatus = false
                _this.placementShow = false
                _this.perviewUrl = ''
            }
        },

        restoreLocationList(){
			this.locationList = []
            this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
            this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
        },

        submitPlacement(){
			// let cropper:any = this.$refs.cropper,
            //     that = this
				
            // cropper.getCropData((data:any) => {
            // // 转换为File对象
            //     let file = base64toFile(data,this.cropperFileData.name);
            //     this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
            // })
			let cropper:any = this.$refs.cropper,
                that = this
			if(this.modelType == 'System' && this.userInfo.userId == 88 || this.userInfo.userId == 83){
				if(this.printObject.templateId){
					this.printObject.id = this.printObject.relationId
					this.confrimSubmit()
				}else{
					this.customRequest().then((rv:any)=>{
						this.isShowMark = false
						this.printObject.id = rv.id
						this.confrimSubmit()
					}).catch((res:any)=>{
						this.isShowMark = false
					})
				}
			}else{
				cropper.getCropData(async (value:any) => {
				// 转换为File对象
					if(this.printObject.templateId){
						this.printObject.id = this.printObject.relationId
						this.confrimSubmit()
					}else{
						let file:any = base64toFile(value,this.printObject.file.name);
						file.uid = this.printObject.file.uid
						this.printObject.file = file
						this.customRequest().then((rv:any)=>{
							this.isShowMark = false
							this.printObject.id = rv.id
							this.confrimSubmit()
						}).catch((res:any)=>{
							this.isShowMark = false
						})
					}
				})
			}
           
        },

        confrimSubmit(){
			
            let param = {
                libraryId:this.printObject.id,
                templateId:this.printObject.templateId || null,
				modelType:'Library',
				checkMd5:1,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
                ...this.getPrintLocation()
            }
			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
				param.modelType = this.modelType
			}
			
            this.isShowMark = true
            Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
                (rv: any) => {
                    this.isShowMark = false
                    this.isSubmit = true
                    this.$emit('submitModelPlacement')
                    this.closeModal()
                }
            ).catch(res=>{
                this.isShowMark = false
            });
        },

        customRequest(){
            let new_data = {
                file:this.printObject.file,
                level1Type:'Models',
                level2Type:'',
				checkMd5:1,
				sex:this.sex,
				modelType:'Library',
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
			if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
				new_data.modelType = this.modelType
				new_data.sex = this.sex
			}
            this.isShowMark = true
            return new Promise((resolve,reject)=>{
                Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                    (rv: any) => {
						if(!rv.checkMd5){
							resolve(this.affirmCstomRequest(new_data))
						}else{
							resolve(rv)
						}
                    }
                ).catch((res)=>{
                    reject(res)
                });
            })
            
        },
		affirmCstomRequest(data:any){
			let _this = this
			return new Promise((resolve,reject)=>{
				Modal.confirm({
					title: this.t('ModelPlacement.jsContent2'),
					icon: createVNode(ExclamationCircleOutlined),
					okText: 'Yes',
					cancelText: 'No',
					centered:true,
					mask:false,
					onOk() {
						data.checkMd5 = 0
						Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
							(rv: any) => {
								_this.isShowMark = false
								resolve(rv)
							}
						).catch((res)=>{
							reject(res)
						});
					},
					onCancel(){
						_this.isShowMark = false
					}
				});
			})
		},
        getPrintLocation(){
            let {width , height} = this.imgBox
            let locationData:any = {}
            let returnData:any = {}
            let newLocationList = JSON.parse(JSON.stringify(this.locationList))
            //进行字段归类
            for(let item of newLocationList){
                locationData[item.field] = locationData[item.field] || []
                locationData[item.field].push(item)
            }
            for(let key in locationData){
                locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
                locationData[key].forEach((v:any,index:any) => {
                    v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
                    v.left = ((v.left + 12) / width).toFixed(4)
                    v.top = ((v.top + 12) / height).toFixed(4)
                    returnData[v.type] = [v.left, v.top]
                });
            }
            return returnData
        },

        sortBy(field:any) {
            return function(a:any,b:any) {
                return a[field] - b[field];
            }
        },

        printPreview(){
            let file = this.printObject.templateId ? null :this.printObject.file,
                models = {
                    libraryId:this.printObject.libraryId || null,
                    templateId:this.printObject.templateId || null,
                    timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
                    ...this.getPrintLocation()
                }
            let formData = new FormData();
                formData.append('file', file);
                formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
            if(this.isShowMark){
                return
            }
            this.isShowMark = true
            Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
                (rv: any) => {
                    this.perviewUrl = rv
                    this.isShowMark = false
                }
            ).catch(res=>{
                this.isShowMark = false
            });
        },

        backPreview(){
            this.perviewUrl = ''
        }
    }
})
</script>
<style lang="less">
.models_placement_component{

    .ant-modal-close{
        width: 3.6rem;
        height: 3.6rem;
        position: absolute;
        top: -1.8rem;
        right: -1.8rem;
    }

    .ant-modal-header{
        display: none;
    }

    .ant-modal-body{
        background: #F2F3FB;
        min-height: 72rem;
        overflow-y: hidden;
        padding: 0;
    }

    .close_icon{
        width: 3.6rem;
        height: 3.6rem;
        background: #000000;
        border-radius: 50%;
        line-height: 3.6rem;
        text-align: center;

        .icon-guanbi{
            font-size: 2rem;
            color: #ffffff;
        }
    }

    .models_placement_body{
        width: 100%;
        height: 100%;

        .palcement_modal_header{
            position: relative;
            height: 6.6rem;
            width: 100%;
            background: #F7F7F7;

            .models_placement_title{
                position: absolute;
                height: 100%;
                line-height: 6.6rem;
                left: 3.7rem;
                top: 0;
                font-size: 1.8rem;
                color: #030303;
            }
            .placement_operate_list{
                display: flex;
                align-items: center;
                margin:0 auto;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                height: 100%;

                .operate_item{
                    margin-right: 4rem;
                    text-align: center;
                    cursor: pointer;

                    .operate_icon{
                        font-size: 2.1rem;
                        color: #64686D;
                    }

                    .operate_item_des{
                        height: 1.2rem;
                        font-size: 1.3rem;
                        color: #64686D;
                    }
                    &:last-child{
                        margin-right: 0;
                    }
                }
            }
        }

        .models_placement_content{
            position: relative;
            height: calc(100% - 6.6rem);
            width: 100%;
            padding: 1.1rem 0;

            .plcaement_point_content{
                width: 22rem;
                background: #EBECF4;
                position: absolute;
                left: 0;
                top:18.4rem;
                padding: 3rem 2.7rem 0 1.4rem;
				.select_block{
					// background: #FFFFFF;
                    margin-bottom: 3rem;
					color: #1A1A1A !important;
					.ant-select{
						width: 100%;
						.ant-select-selector{
							padding: 0;
							width: 100%;
							margin: 0;
							background: rgba(0, 0, 0, 0);
							font-size: 1.3rem;
							color: #64686D;
							-webkit-user-select: none;
							-moz-user-select: none;
							user-select: none;
							height: 3rem;
							.ant-select-selection-item, .select_block .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
								font-weight: 300 !important;
								line-height: 1.5715 !important;
								width: 100%;
								display: block;
								position: relative;
								padding: 0;
							}
							
						}
					}
					.icon-xiala{
						color: #1A1A1A !important;
					}
				}
                .placement_point_item{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 3rem;

                    .ponit_title{
                        font-size: 1.3rem;
                        color: #64686D;
                        user-select:none; /* CSS3属性 */
                    }

                    .point_list{
                        display: flex;
                        align-items: center;
                        width: 6.2rem;
                        justify-content: space-between;

                        .point_item{
                            width: 2.4rem;
                            height: 2.4rem;
                            border-radius: 50%;
                            border:solid 0.2rem transparent;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            -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属性 */


                            .point_block{
                                width: 0.4rem;
                                height: 0.4rem;
                                border-radius: 50%;
                            }
                        }
                    }
					&.placement_point_item_btn{
						display: flex;
						justify-content: center;
						.started_btn{
						}
					}
					
                }
            }

            .placement_content_operate_list{
                width: 10.6rem;
                background: #EBECF4;
                position: absolute;
                right: 0;
                top:18.4rem;

                .placement_content_operate_item{
                    padding: 1.5rem 0;
                    text-align: center;
                    cursor: pointer;


                    .placement_content_operate_des{
                        width: 100%;
                        font-size: 1.3rem;
                        color: #64686D;
                        -moz-user-select:none;
                        user-select:none
                    }

                    .print_scale_value{
                        height: 1.1rem;
                        font-size: 1.2rem;
                        text-align: center;
                        margin-bottom: 0.3rem;
                        color: #64686D;
                    }

                    .ant-tooltip-placement-top{
                        top: -37px !important;
                    }

                    .ant-slider-track{
                        background: #343579;
                    }
                    .ant-slider-handle{
                        border-color: #343579;
                    }

                    .placement_remove_point_block{
                        width: 2.4rem;
                        height: 2.4rem;
                        border: 2px solid #000000;
                        border-radius: 50%;
                        margin: 0 auto 0.4rem;
                    }
                }
            }

            .placement_tip_content{
                position: absolute;
                right: 2rem;
                bottom: 2rem;
                width: 30rem;
                font-size: 1.3rem;
                color: #64686D;
            }

            .img_preview_block{
                width: 40.8rem;
                background: #ffffff;
                margin: 0 auto;
                position: relative;
                user-select:none;
                -moz-user-select:none;
                position: relative;
				height: 57.6rem;
                .img_content_block{
                    width: 40.8rem;
                    height: 100%;
                    max-height: 63.2rem;
                    overflow-y: auto;
                    -ms-overflow-style: none;
                    overflow: -moz-scrollbars-none;
                    position: relative;

                    &::-webkit-scrollbar { width: 0 !important }
					.cropper-view-box-Bg{
						width: 100%;
						position: absolute;
					}
					.cropper-view-box-Top{
						// border-top: 1px dashed;
						/*虚线2 css*/
						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
						height: 1rem;
						opacity: .4;
						top: 6%;
					}
					.cropper-view-box-Bottom{
						bottom: 6%;
						// border-top: 1px dashed;
						height: 1rem;
						opacity: .4;
						background: linear-gradient(to left,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 10px 1px;background-repeat: repeat-x;
					}
					.cropper-view-box-Center{
						// border-left: 1px dashed;
						left: 50%;
						opacity: .4;
						background: linear-gradient(to bottom,transparent 0%,transparent 50%,#646464 50%,#646464 100%);background-size: 1px 10px;background-repeat: repeat-y;
						top: 0;
						width: 1rem;
						height: 100%;
					}
                }

                .perview_mark_loading{
                    position: absolute;
                    left: 0;
                    height: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.2);
                    z-index: 9;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                }

                .placement_img{
                    width: 100%;
                    user-select:none;
                    -moz-user-select:none;
                }

                .ponit_click{
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    border: 2px solid transparent;
                    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;
					z-index: 22;
                    &.remove_point_click{
                        border-color: transparent;
                        background: #EF3C3C;
                    }

                    .placement_add_point_content{
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #6E70FF;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                    }

                    .icon-guanbi{
                        font-size: 20px;
                        line-height: 20px;
                        color:#ffffff;
                    }
                }
            }
        }
    }
}

</style>