feat:更新平面图

components/upload-titlemap/index.js

@@ -0,0 +1,208 @@
+(() => {
+    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="!info.status || info.status==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=" info.status==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: {},
+                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
+                    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()
+        },
+    })
+})();

locat/addDataSet.html

@@ -43,9 +43,9 @@
                         添加数据集
                     </div>
 
-                    <!-- <div class="editBtn pointClound" @click="showType=3">
+                    <div class="editBtn pointClound" @click="showType=3">
                         平面图
-                    </div> -->
+                    </div>
 
 
 
@@ -59,9 +59,9 @@
                             <i class="backIcon" @click="showType=0"></i>
                             <p class="headerTitle">修改控制点</p>
                         </div>
-                        <p style="padding-left: 32px;" class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
                     </div>
                     <div class="scrollBox">
+                        <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
 
                         <!-- <h4>修改控制点 </h4>
                         <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p> -->
@@ -188,70 +188,10 @@
 
 
                 <upload-pointClound v-if="showType==2" />
-                <div id="planePic" v-if="showType==3">
-                    <div class="headerBack">
-                        <div class="topBox">
-                            <i class="backIcon" @click="showType =0"></i>
-                            <p class="headerTitle">平面图</p>
-                        </div>
-                    </div>
-                    <div class="defaultPic itemBox 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 ">
-                        <div class="ctrlBox">
-
-                            <p class="ctrlTitle">自定义平面图</p>
-                            <div class="btnBox">
-                                <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>
-
-                                <div class="ctrlBtn">
-                                    <i class="ctrlIcon downloadIcon"></i>
-                                    <p class="ctrlText">下载</p>
-
-                                </div>
-                                <div class="ctrlBtn" lable="files">
-                                    <i class="ctrlIcon uploadIcon"></i>
-                                    <p class="ctrlText">上传</p>
 
-                                </div>
-                                <input type="file" id="files" @change="uploadPic">
-                            </div>
+                <upload-titlemap v-if="showType==3" />
 
-                        </div>
 
-                    </div>
-                    <div class="tipText">
-                        操作说明<br/> 1. 下载默认平面图，支持.png文件下载；<br /> 2. 解压下载的压缩包，替换压缩包中的图片文件；<br /> （文件名，图片大小、格式需与原图保持一致）
-                        <br /> 3. 上传平面图<br />
-                    </div>
-                </div>
             </div>
 
         </div>
@@ -267,7 +207,8 @@
     <!-- <script src="./js/proj4.js"></script>
     <script src="./js/three.js"></script> -->
     <!-- <script src="./components/image-transform/index.js"></script> -->
-    <script src="./components/upload-pointClound/index.js"></script>
+    <script src="../components/upload-pointClound/index.js"></script>
+    <script src="../components/upload-titleMap/index.js"></script>
     <script type="text/javascript">
         //输入经纬度就可以定位
     </script>
@@ -362,7 +303,8 @@
                         blat: '22',
                         balt: ''
                     },
-                    token: null
+                    token: null,
+
 
                 }
             },
@@ -611,7 +553,9 @@
                     this.blat = this.showData.blat
                 },
                 showLoading(str) {
-                    $('body').append(' <div id="upload-loading"><img class="icon" src="../img/icon/loading.png" alt=""><span class="text">' + str + '</span></div>');
+                    $('body').append(
+                        ' <div id="upload-loading"><img class="icon" src="../img/icon/loading.png" alt=""><span class="text">' +
+                        str + '</span></div>');
                 },
                 hideLoading() {
                     $('#upload-loading').remove()
@@ -634,28 +578,7 @@
                         obj.selectionStart = obj.selectionEnd = len;
                     }
                 },
-                refreshConfirm() {
-                    console.log('refreshConfirm')
-                },
-                delConfirm() {
-                    console.log('delConfirm')
-                },
-                uploadPic(e) {
-                    let file = e.target.files[0]
-                    let params = new FormData()
-                    params.append('file', file)
-                    axios.post(`/api/${sceneNum}/uploadPic`, params).then(res => {
 
-                    }).catch(err => {
-                        this.$message({
-                            message: '上传失败',
-                            type: 'error',
-                            duration: 2000,
-                        });
-
-                    })
-
-                }
 
 
 

style.css

@@ -71,7 +71,7 @@ body {
     height: 100%;
     overflow-y: scroll;
     box-sizing: border-box;
-    padding: 95px 57px 80px;
+    padding: 70px 57px 80px;
 }
 
 
@@ -748,6 +748,9 @@ input::-webkit-input-placeholder {
     top: 0;
     left: 0;
     z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .topBox {
@@ -832,6 +835,10 @@ input::-webkit-input-placeholder {
     margin-right: 10px;
 }
 
+label.ctrlBtn {
+    margin-bottom: 0px;
+}
+
 #files {
     position: absolute;
     width: 100%;
@@ -839,6 +846,7 @@ input::-webkit-input-placeholder {
     opacity: 0;
     z-index: 10;
     cursor: pointer;
+    display: none;
 }
 
 .ctrlBox .el-button {