drawFloor.vue 5.08 KB
<template>
    <el-dialog
      title="绘制楼层店铺"
      width="1200px"
      class="manage-dialog draw-dialog"
      :visible.sync="drawDialogVisible"
      :close-on-click-modal="false"
      @close="drawDialogClose">
        <div class="dheader">
            <div class="action">
                <el-upload class="upload"
                    action=""
                    :show-file-list="false" 
                    :auto-upload="false"
                    :on-change="handlePreview"
                >
                    <el-button size="mini">点击上传</el-button>
                </el-upload>
                <el-button size="mini" type="danger" @click="clearPainter">清空画布</el-button>
                
                <!-- <input @change="imgChoose" class="none" type="file" accept="image/*"> -->
            </div> 
            <div class="btns">
                <el-button size="mini" type="primary" @click="saveData">保存楼层图</el-button>
            </div>
        </div>
        <div class="dView">
            <div class="dWrap" ref="dWrap">
                <img :src="uploadImgUrl" class="fimg" @load="resizePainter">
                <!-- 绘制区域 S -->
                <Painter ref="painter" @zoneClick="zoneClick" @zoneRight="zoneRight" @zoneMove="zoneMove" :isEdit="true"></Painter>
                <!-- 绘制区域 E -->
            </div>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="drawDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
            <el-button type="primary" @click="drawSubmit" class="dialog-btn dialog-confirm-btn">{{$t('dialog.confirm')}}</el-button>
        </div> -->
    </el-dialog>
</template>

<script>
import Painter from '@/components/Floormap/index';
export default {
    components:{
       Painter
    },
    data() {
        return {
            drawDialogVisible: false,
            uploadImgUrl:'',
            mallList: [],
            isIe: null,
            floorId:'',
        }
    },
    mounted() {
        this.$nextTick(()=>{
            // this.dialogInit();
        })
        
    },
    methods: {
        zoneClick(data){
            console.info('zoneClick',data)
        },
        zoneRight(data){
            console.info('zoneRight',data)
        },
        zoneMove(data){
            console.info('zoneMove',data)
        },
        handlePreview(file){
            this.uploadImgUrl = URL.createObjectURL(file.raw);
        },
        resizePainter(){
            let client = this.$refs.dWrap.getBoundingClientRect();
            this.$refs.painter.resizePainter(client);
        },
        dialogInit(floorId) {
            /*******************************************************/
            this.floorId = floorId;
            this.drawDialogVisible = true;
            this.$api.management.getFloorCanvas(this.floorId).then(res=>{
                this.$nextTick(()=>{
                    let floorData = {};
                    if(res.data&&res.data.data&&res.data.data.svg){
                        let fdata = JSON.parse(res.data.data.svg);
                        if(fdata&&fdata.list&&fdata.list.length){
                            floorData = fdata;
                        }
                    }
                    floorData.floorId = this.floorId;
                    this.$refs.painter.setPainter(floorData);
                    //this.uploadImgUrl = data.floorPlan?window._vionConfig.picUrl+data.floorPlan:'';
                    this.timer = setInterval(()=>{
                        if(this.$refs.painter){
                            this.$refs.painter.saveLocal();
                        }else{
                             clearInterval(this.timer); 
                        }
                    },3000);
                })
            })
            
        },
        clearPainter(){
            this.$refs.painter.clearPainter();
        },
        saveData() {
			let that = this,floorData = this.$refs.painter.getPainterData();
            if(!floorData.list||floorData.list.length==0){
                // return  that.$message({
                //             showClose: true,
                //             type: "error",
                //             message: '请绘制店铺图再保存'
                //         });
            }
            this.$api.management.saveFloorCanvas({
                floorId:floorData.floorId,
                svg:JSON.stringify(floorData)
            }).then(res=>{
                that.$message({
                    showClose: true,
                    type: "success",
                    message: res.data.msg,
                    onClose(){
                       that.drawDialogClose(); 
                       that.drawDialogVisible = false;
                    }
                });
                that.$emit('update');
            })
		},
        drawDialogClose() {
			clearInterval(this.timer);
            this.clearPainter();
            this.uploadImgUrl = '';
            localStorage.removeItem('floorcanvas'+this.floorId);
        }
           
    }
}
</script>
<style scoped>
.header{
    background: #000;
}
</style>