floorImgManage.vue

<template>
    <div class="manage-container">
        <el-row class="manage-head-wrapper">
			<el-col :span="24">
				<!-- <span class="titles">阅读空间选择</span> -->
				<!-- <span style="float: left;margin-right: 10px">
					<el-select v-model="blocValue" filterable placeholder="阅读空间选择" size="mini" @change="blocChange">
						<el-option v-for="item in blocList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</span> -->
				<!-- <span class="titles">广场选择</span> -->
				<div class="manage-select-box mall-select-box">
					<el-select v-model="mallValue" filterable placeholder="广场选择" @change="changeMall">
						<el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
                <div class="manage-select-box">
                    <el-select v-model="floorVal" placeholder="请选择楼层">
                        <el-option v-for="(floorItem, floorIndex) in floorList" :key="floorItem.id" :value="floorItem.id" :label="floorItem.name"></el-option>
                    </el-select>
                </div>
				<el-button type="primary" class="search-btn" plain size="mini" @click="searchFun">{{$t('button.search')}}</el-button>
			</el-col>
		</el-row>
        <div @dblclick="clickHandle" id="svg-box">
            <simple-svg
              :filepath="svgPath"
              :fill="'#fff'"
              :stroke="'#000'"
              :width="'100%'"
              :height="'100%'"
              :id="'custom-id'"
			  @ready="onSvgReady" />
        </div>
		<edit-svg-dialog ref="editSvgRef" @saveAttr="setAttr"></edit-svg-dialog>
    </div>
</template>

<script>
// import localSvg from '@/assets/img/manage/defaultFloor.svg'
import localSvg from '@/assets/img/manage/defaultFloor.svg'
import editDialog from './editSvg'
// import svgpan from './svgzoom.js'
import svgZoom from 'svg-pan-zoom'
export default {
    data() {
        return {
            blocValue: null,
            mallValue: null,
			mallListForTerm: [],
            floorVal: '',
			floorList: [],
            floorPlanUrl: window._vionConfig.imagesUrl + '/images/',
            svgPath: '',
			tagetShop: {},
			svgEle: null,
        }
    },
    components: {
        'edit-svg-dialog': editDialog
    },
    created() {
		this.getAccountList();
    },
    mounted(){
	},
	beforeDestroy() {
		// console.dir(this.svgEle)
		// if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) {
		// 	window.removeEventListener('mousewheel', function(evt) { console.log(evt) }, false); // Chrome/Safari
		// } else {
		// 	window.removeEventListener('DOMMouseScroll', function(evt) { console.log(evt) }, false); // Others
		// }
		// svgpan(this.svgEle, true);
	},
    methods: {
        getTableData() {
			let tabelParams = {
				accountId: this.blocValue,
				mallId: this.mallValue,
				// _t: Date.parse(new Date()) / 1000
			}
			this.$api.base.singleFloor(this.floorVal, tabelParams)
				.then((data) => {
					let result = data.data;
                    let remotePic = result.data.floorPlan;
					this.svgPath = remotePic ? (this.floorPlanUrl + remotePic) : localSvg;
				})
				.catch((error) => { })
		},
        searchFun() {
			this.getTableData();
		},
        getAccountList() {
			// this.$api.base.account({
			// 		// _t: Date.parse(new Date()) / 1000
			// 	})
			// 	.then((data) => {
			// 		var result = data.data;
			// 		this.accountList = result.data;

			// 		this.blocValue = '';
			// 		this.blocList = result.data;
			// 		this.blocList.forEach((item, index, arr) => {
			// 			if (index == 0) {
			// 				this.blocValue = item.id
			// 			}
			// 		})
			// 		this.getMallListForTerm(this.blocValue, true)
			// 	})
			// 	.catch((error) => { })
			this.blocValue = this.$cookie.get('accountId');
			this.getMallListForTerm(this.blocValue, true);
		},
		blocChange() {
			this.getMallListForTerm(this.blocValue)
		},
		getMallListForTerm(accountId, isCheck) {
			//var accountArr='';
			// accountIds.forEach((item,index,arr)=>{
			//  accountArr+=item+','
			//})
			//accountArr=accountArr.substring(0,accountArr.length-1)
			//if(accountArr==''){
			//accountArr='-1'
			//}
            this.mallListForTerm = [];
            this.mallValue = null;
			this.$api.base.mall({
				accountId: accountId,
				// status: 1,
				status_arr: '1,3'
				// _t: Date.parse(new Date()) / 1000
			},null,true)
				.then((data) => {
					let result = data.data;
					this.mallListForTerm = result.data;
					if(this.getSessionLocal('manageMallId')) {
						this.mallValue = Number(this.getSessionLocal('manageMallId'));
					} else {
						this.mallListForTerm.forEach((item, index, arr) => {
							if (index == 0) {
								this.mallValue = item.id
							}
						})
						this.setSessionLocal('manageMallId', this.mallValue);
					}
					this.getFloorList(this.mallValue, isCheck);
				})
				.catch((error) => { })
		},
        changeMall(val) {
			this.getFloorList(val);
			this.setSessionLocal('manageMallId', val);
        },
        getFloorList(mallId, isCheck) {
			this.floorVal = '';
			this.floorList = [];
			this.$api.base.floor({
				mallId: mallId,
				status: 1,
				// _t: Date.parse(new Date()) / 1000
			})
				.then((data) => {
					var result = data.data;
					if (result.data.length > 0) {
						this.floorVal = result.data[0].id;
					}
					this.floorList = result.data;
                    if (isCheck) {
						this.getTableData();
					}
				})
				.catch((error) => { })
		},
        clickHandle(e) {
			let ev = e || window.event;
            if((ev.target.parentNode.id).indexOf('shop') > -1) {
				this.tagetShop = ev.target;
                this.$refs.editSvgRef.dialogInit(this.mallValue, this.floorVal);
            }
		},
		onSvgReady() {
			let svgDom = document.getElementById('custom-id');
			let gDom = svgDom.getElementsByTagName('g');
			if(gDom.length) {
				gDom[0].setAttribute('id', 'viewport');
			}
			this.svgEle = svgDom;
			// svgpan(svgDom)
			svgZoom('#custom-id', {
				zoomEnabled: true,
				dblClickZoomEnabled: false,
				fit: true,
			})
		},
        setAttr(attrs) {
			this.tagetShop.setAttribute('id', attrs.id)
			// console.dir(this.tagetShop.nextElementSibling)
			if(this.tagetShop.nextElementSibling.children[0].tagName === 'tspan') {
				this.tagetShop.nextElementSibling.children[0].textContent = attrs.name;
			} else if(this.tagetShop.nextElementSibling.children[0].children[0].tagName === 'tspan') {
				this.tagetShop.nextElementSibling.children[0].children[0].textContent = attrs.name;
			}
            let svgEle = document.getElementById('custom-id').parentNode;
			let svgStr = svgEle.innerHTML;
				svgStr = svgStr.replace(/\stransform\=\"[a-z]*\(\d*\.\d*\,\d+\,\d+\,\-?\d*\.\d*\,\-?\d+\.\d*\,\-?\d*\.\d*\)\"/ig, '');
            
			this.$api.base.markFloorImage({
				floorId: attrs.floorId,
                svgStr: svgStr
			})
                .then((m) => {
                    let result = m.data;
					if(result.code == 200) {
						this.$message({
							showClose: true,
							type: 'success',
							message: this.$t('message.labelSuccess')
						})
					} else {
						this.$message({
							showClose: true,
							type: 'error',
							message: this.$t('message.labelFailed') + result.msg
						})
					}
                })
                .catch(err => { 
					// console.log(err.message) 
				})
        },
    },
}
</script>

<style scoped>
	.mall-select-box .el-select {
		width: 150px;
	}
    .simple-svg-wrapper {
		height: 800px;
	}
	
	@media only screen and (max-width: 1680px) {
		.simple-svg-wrapper {
			height: 700px;
		}
	}
	@media only screen and (max-width: 1440px) {
		.simple-svg-wrapper {
			height: 600px;
		}
	}
	@media only screen and (max-width: 1366px) {
		.simple-svg-wrapper {
			height: 600px;
		}
	}
	@media only screen and (max-width: 1280px) {
		.simple-svg-wrapper {
			height: 600px;
		}
	}
</style>