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" accept=".zip"  id="files" @change="uploadPic">
                            </div>

                        </div>

                    </div>
                    <div class="tipText">
                        操作说明<br /> 1. 下载默认平面图，支持.png文件下载；<br /> 2. 解压下载的压缩包，替换压缩包中的图片文件；<br /> （文件名，图片大小、格式需与原图保持一致）
                        <br /> 3. 上传平面图<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.4dkankan.com/'
            }
        },
        methods: {
            downloadMap() {
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/download`).then(res => {
                    console.log(this.downloadUrl + res.data.msg)
                    window.location.href = this.downloadUrl + res.data.msg
                }).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()
                    this.getDetaile()
                    IV.api.AuthenticationService.sendAuthenticationChanged()
                }).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 => {
                    this.$parent.hideLoading()
                    IV.api.AuthenticationService.sendAuthenticationChanged()
                }).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 => {
                    this.$message({
                        message: '上传成功',
                        type: 'success',
                        duration: 2000,
                    });
                    this.$parent.hideLoading()
                    this.getDetaile()
                    IV.api.AuthenticationService.sendAuthenticationChanged()
                }).catch(err => {
                    this.$parent.hideLoading()
                    this.$message({
                        message: '上传失败',
                        type: 'error',
                        duration: 2000,
                    });

                })

            },
            back() {
                this.$parent.showType = 0
            },
            getDetaile() {
                axios.get(`/indoor/${sceneNum}/api/tiled_maps/detail`).then(res => {
                    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
                    }
                }).catch(err => {
                    this.$message({
                        message: err.data.msg,
                        type: 'error',
                        duration: 1000,
                    });

                })
            }

        },
        computed: {

        },
        destroyed() {

        },
        mounted() {
            this.getDetaile()
        },
    })
})();