laser_v1/components/upload-titlemap/index.js

(() => {
    Vue.component('uploadTitlemap', {
        props: [],
        name: 'uploadTitlemap',
        template: ` <div id="planePic"">
                    <div class="headerBack">
                        <div class="topBox">
                            <i class="backIcon" @click="back"></i>
                            <p class="headerTitle">平面图</p>
                        </div>
                        <el-switch v-model="showMapPic" @change="changeDisplay" active-color="#15BEC8" inactive-color="#999">
                        </el-switch>
                    </div>
                    <div class="defaultPic itemBox" :class="type==0 ?'active':''">
                        <div class="ctrlBox">
                            <div class="ctrlTitle">
                                默认平面图
                                <div class="tipBox" title="修改点云或数据集后，请更新平面图"></div>
                            </div>
                            <!-- <p>默认平面图</p> -->
                            <el-popconfirm placement="top" title="确认重新生成平面图？" :hide-icon="true" @confirm="refreshConfirm">
                                <el-button slot="reference">
                                    <div class="ctrlBtn">
                                        <i class="ctrlIcon refreshIcon"></i>
                                        <p class="ctrlText">重新生成</p>


                                    </div>
                                </el-button>
                            </el-popconfirm>

                        </div>

                    </div>
                    <div class="diyPic itemBox " :class=" type==1  ?'active':''">
                        <div class="ctrlBox">

                            <p class="ctrlTitle">自定义平面图</p>
                            <div class="btnBox">
                            

                                <div class="ctrlBtn" @click="downloadMap">
                                    <i class="ctrlIcon downloadIcon"></i>
                                    <p class="ctrlText">下载</p>

                                </div>
                                <label class="ctrlBtn" for="files">
                                    <i class="ctrlIcon uploadIcon"></i>
                                    <p class="ctrlText">上传</p>
                                </label>


                                <input type="file"  ref="files"  id="files" @change="uploadPic">
                            </div>

                        </div>

                    </div>
                    <div class="tipText">
                        操作说明<br /> 1. 下载默认平面图，支持.png文件下载；<br /> 2.上传时，图片需与默认平面图图片大小、格式保持一致。<br />
                    </div>
                </div>`,
        //删除
        // <el-popconfirm placement="top" title="确认删除？" :hide-icon="true" @confirm="delConfirm">
        //     <el-button slot="reference">
        //         <div class="ctrlBtn">
        //             <i class="ctrlIcon disableIcon "></i>
        //             <p class="ctrlText">删除</p>

        //         </div>
        //     </el-button>
        // </el-popconfirm>
        data() {
            return {
                showMapPic: false,
                info: {},
                type: -1,
                downloadUrl: 'https://laser-oss.4dkankan.com/'
            }
        },
        methods: {
          dataURLtoBlob(dataurl) {
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime });
            },
            downloadIamge(imgsrc, name) { //下载图片地址和图片名
                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload =  ()=> {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    a.download = name || "photo"; // 设置图片名称
                    console.log(URL.createObjectURL(this.dataURLtoBlob(url)) )
                    a.href = URL.createObjectURL(this.dataURLtoBlob(url)) // 将生成的URL设置为a.href属性
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = imgsrc;
            },
            downloadMap() {
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/download`).then(res => {
                    // console.log(res)
                    // console.log(this.downloadUrl + res.data.msg)

                    if (res.data.code == 0) {
                        var name = res.data.msg.split('/')[res.data.msg.split('/').length - 1]
                        var file = this.downloadUrl + res.data.msg+'?t='+new Date().getTime()
                        // console.log(name)
                        this.downloadIamge(file, name)
                        // window.location.href = this.downloadUrl + res.data.msg
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 2000,
                        });
                    }

                }).catch(err => {
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 2000,
                    });

                })

            },
            refreshConfirm() {
                this.$parent.showLoading('更新中...')
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/init`).then(res => {
                    // this.$parent.hideLoading()
                    if (res.data.code == 0) {
                        this.getDetaile()
                        IV.api.AuthenticationService.sendAuthenticationChanged()
                    } else {
                        this.$parent.hideLoading()
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 2000,
                        });
                    }

                }).catch(err => {
                    this.$parent.hideLoading()
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 2000,
                    });

                })
            },
            changeDisplay(val) {
                console.log(val)
                if (val) {
                    this.info.display = 1
                } else {
                    this.info.display = 0
                }
                this.$parent.showLoading('切换中...')
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/updateDisplay/${this.info.display}`).then(res => {

                    if (res.data.code == 0) {

                        IV.api.AuthenticationService.sendAuthenticationChanged()
                    } else {
                        this.$parent.hideLoading()
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 2000,
                        });
                    }


                }).catch(err => {
                    this.$parent.hideLoading()
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 2000,
                    });

                })
            },

            delConfirm() {
                console.log('delConfirm')
            },
            isZip(file) {
                return /\.(zip)$/.test(file.name)
            },
            uploadPic(e) {
                let file = e.target.files[0]
                console.log(file)
                // if (!this.isZip(file)) {
                //     this.$message({
                //         message: '请上传zip格式',
                //         type: 'error',
                //         duration: 2000,
                //     });
                //     return
                // }
                let params = new FormData()
                params.append('file', file)
                this.$parent.showLoading('上传中...')

                axios.post(`/indoor/${sceneNum}/api/tiled_maps/upload`, params).then(res => {
                    let file = this.$refs.files
                    file.value = ''
                    if (res.data.code == 0) {


                        this.$message({
                            message: '上传成功',
                            type: 'success',
                            duration: 2000,
                        });
                        this.getDetaile()
                        IV.api.AuthenticationService.sendAuthenticationChanged()
                    } else {
                        this.$parent.hideLoading()
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 2000,
                        });
                    }

                }).catch(err => {
                    let file = this.$refs.file
                    file.value = ''
                    this.$parent.hideLoading()
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 2000,
                    });

                })

            },
            back() {
                this.$parent.showType = 0
            },
            getDetaile() {
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/detail`).then(res => {
                    if (res.data.code == 0) {
                        console.log(res.data.data)
                        this.info = res.data.data
                        this.type = this.info.status || 0
                        if (this.info.display) {
                            this.showMapPic = true
                        } else {
                            this.showMapPic = false
                        }
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 1000,
                        });
                    }

                }).catch(err => {
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 1000,
                    });

                })
            },
            openMap() {
                this.$parent.hideLoading()
                if (IV.getMainView().ViewService.primaryView != 'map') {
                    IV.swapScenes()
                }
            }

        },
        computed: {

        },
        destroyed() {
            if (IV.getMainView().ViewService.primaryView == 'map') {
                IV.swapScenes()
            }
        },
        mounted() {
            this.openMap()
            window.eventBus.off('openMap', this.openMap);
            window.eventBus.on('openMap', this.openMap);

            // function openMap() {
            //       this.$parent.hideLoading()
            //     if (IV.getMainView().ViewService.primaryView != 'map') {
            //         IV.swapScenes()
            //     }
            // }
            this.getDetaile()
        },
    })
})();