feat:实例化场景接口和平面图页面

components/upload-Pointclound/index.js

@@ -3,7 +3,13 @@
         props: [],
         name: 'uploadPointclound',
         template: `<div id="uploadBox" >
-                    <h4>添加数据集 </h4>
+                    <div class="headerBack">
+                        <div class="topBox">
+                            <i class="backIcon" @click="back"></i>
+                            <p class="headerTitle">添加数据集</p>
+                        </div>
+                    </div>
+                    
                     <div class="selectBox">
                         <el-select v-model="value" filterable @click.native="options = dataList" :filter-method="searchScene" placeholder="请选择">
                             <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id">
@@ -69,13 +75,22 @@
         methods: {
 
             getSceneData() {
+
+
                 let params = {
                     "pageNum": 0,
-                    "pageSize": 12,
+                    "pageSize": 999,
                     "searchKey": "",
-                    "userId": 477
                 }
-                axios.post(`/indoor/scene/list`, params).then(res => {
+
+                axios({
+                    headers: {
+                        'X-Authorization': this.$parent.token
+                    },
+                    method: 'post',
+                    url: '/indoor/scene/list',
+                    data: params
+                }).then(res => {
                     console.log(res)
                     this.dataList = res.data.data.content
                     this.options = res.data.data.content
@@ -97,7 +112,7 @@
             openUpload() {
                 // 
 
-                this.$parent.showLoading()
+                this.$parent.showLoading('上传中...')
 
                 axios.post(`/indoor/${sceneNum}/api/merge/${this.value}`).then(res => {
                     this.$parent.hideLoading()
@@ -133,6 +148,9 @@
             delConfirm() {
                 console.log(1)
             },
+            back() {
+                this.$parent.showType = 0
+            }
 
         },
         computed: {

index.html

@@ -23,8 +23,8 @@
 <script type="text/javascript">
     const ossPrefix = 'https://laser.4dkankan.com/data/';
     const ossPrefixDep = 'https://laser.4dkankan.com/public/';
-    const sceneNum = '@replace';
-    // const sceneNum = 't-vZkqRV8';
+    // const sceneNum = '@replace';
+    const sceneNum = 't-vZkqRV8';
     // const sceneNum = 't-iksBApb';
 </script>
 <script src="./bus/bus.js"></script>

locat/addDataSet.html

@@ -33,16 +33,18 @@
             </div> -->
             <div id="plane">
 
-                <div class="main" v-if="!isEdit && !isUpload">
+                <div class="main" v-if="showType==0">
                     <!-- <div class="title">定位</div> -->
                     <p class="desc">提示：当前控制点坐标为系统提供的默认值，请将控制点坐标调整为真实的地理坐标。</p>
                     <div class="editBtn" @click="openEdit">修改控制点</div>
 
 
-                    <div class="editBtn pointClound" @click="isUpload=true">
+                    <div class="editBtn pointClound" @click="showType=2">
                         添加数据集
-                        <!-- <input id="file" multiple="multiple" accept=".e57, .pts, .ptx, .ply, .xyz, .las" @change="upLoadPointClound" type="file"> -->
-                        <!-- <input id="file" multiple="multiple" accept=".las" @change="upLoadPointClound($event)" type="file"> -->
+                    </div>
+
+                    <div class="editBtn pointClound" @click="showType=3">
+                        平面图
                     </div>
 
 
@@ -51,11 +53,18 @@
 
 
                 </div>
-                <div class="control_box" v-if="isEdit">
+                <div class="control_box" v-if="showType==1">
+                    <div class="headerBack">
+                        <div class="topBox">
+                            <i class="backIcon" @click="showType=0"></i>
+                            <p class="headerTitle">修改控制点</p>
+                        </div>
+                        <p style="padding-left: 32px;" class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
+                    </div>
                     <div class="scrollBox">
 
-                        <h4>修改控制点 </h4>
-                        <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p>
+                        <!-- <h4>修改控制点 </h4>
+                        <p class="desc">通过两个控制点坐标确定点云在地图上的位置</p> -->
                         <p class="itemTitle">EPSG 坐标系 </p>
                         <div class="formItem">
                             <div class="allIpt">
@@ -169,7 +178,7 @@
                     <button id="clear">取消</button> -->
                         <!-- <div id="clear" @click="getImageTransform">提交地图信息</div> -->
                         <!-- <div id="clear" @click="clearMap">取消</div> -->
-                        <div id="clear" @click="isEdit=false">取消</div>
+                        <div id="clear" @click="showType=0">取消</div>
                         <div class="submitBtn" @click="commit()">
                             保存
                         </div>
@@ -178,8 +187,56 @@
                 </div>
 
 
-                <upload-pointClound v-if="isUpload" />
-                <!-- <image-tranform ref="imageTranform" /> -->
+                <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">
+                            <p class="ctrlTitle">默认平面图</p>
+                            <div class="ctrlBtn">
+                                <i class="ctrlIcon refreshIcon"></i>
+                                <p class="ctrlText">更新</p>
+                                <div class="tipBox" title="修改点云或数据集后，请更新平面图"></div>
+
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="diyPic itemBox ">
+                        <div class="ctrlBox">
+
+                            <p class="ctrlTitle">自定义平面图</p>
+                            <div class="btnBox">
+                                <div class="ctrlBtn">
+                                    <i class="ctrlIcon disableIcon "></i>
+                                    <p class="ctrlText">删除</p>
+
+                                </div>
+                                <div class="ctrlBtn">
+                                    <i class="ctrlIcon downloadIcon"></i>
+                                    <p class="ctrlText">下载</p>
+
+                                </div>
+                                <div class="ctrlBtn">
+                                    <i class="ctrlIcon uploadIcon"></i>
+                                    <p class="ctrlText">上传</p>
+
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+                    <div class="tipText">
+                        操作说明<br/> 1. 下载默认平面图，支持.png文件下载；<br /> 2. 解压下载的压缩包，替换压缩包中的图片文件；<br /> （文件名，图片大小、格式需与原图保持一致）
+                        <br /> 3. 上传平面图<br />
+                    </div>
+                </div>
             </div>
 
         </div>
@@ -232,8 +289,7 @@
                     status: 0,
                     showImageTranform: true,
                     showImageTranform1: true,
-                    isEdit: false,
-                    isUpload: false,
+                    showType: 0,
                     pointLayerArray: [],
                     map: null,
                     gaodeMapLayer: {},
@@ -291,6 +347,7 @@
                         blat: '22',
                         balt: ''
                     },
+                    token: null
 
                 }
             },
@@ -299,7 +356,10 @@
             },
 
             mounted() {
-                // alert(sceneNum)
+                const origin = window.location.origin + window.location.pathname
+                const tokenKry = 'ls.' + origin + '#JWT'
+                this.token = localStorage.getItem(tokenKry)
+                    // alert(sceneNum)
                 this.getContorlPoint()
                     // this.sceneNum = window.location.pathname.split('/')[2]
                     // this.$nextTick(() => {
@@ -528,7 +588,7 @@
 
                 },
                 openEdit() {
-                    this.isEdit = true
+                    this.showType = 1
                     this.ax = this.showData.ax
                     this.ay = this.showData.ay
                     this.bx = this.showData.bx
@@ -538,29 +598,13 @@
                     this.blon = this.showData.blon
                     this.blat = this.showData.blat
                 },
-                showLoading() {
-                    $('body').append(' <div id="upload-loading"><img class="icon" src="../img/icon/loading.png" alt=""><span class="text">上传中...</span></div>');
+                showLoading(str) {
+                    $('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()
                 },
-                upLoadPointClound(e) {
-                    const files = e.target.files[0];
-                    console.log(files)
-                    var formData = new FormData();
-                    formData.append("file", files);
-
-                    axios.post('/indoor/' + sceneNum + '/api/controlPoint/test', formData).catch(err => {
-                        // alert(1)
-                        this.showLoading()
-                        setTimeout(() => {
-                            this.hideLoading()
-                            IV.api.AuthenticationService.sendAuthenticationChanged()
-                                // IV.SidebarMenuService.goToItem(IV.SidebarMenuService.items[1])
-
-                        }, 2000);
-                    })
-                },
+
                 limtInput(value) {
                     this[value] = this[value].replace(/[^\-?\d.]/g, '')
                 },

style.css

@@ -71,7 +71,7 @@ body {
     height: 100%;
     overflow-y: scroll;
     box-sizing: border-box;
-    padding: 20px 57px 80px;
+    padding: 95px 57px 80px;
 }
 
 
@@ -467,6 +467,7 @@ input::-webkit-input-placeholder {
     cursor: pointer;
     margin-bottom: 10px;
     position: relative;
+    color: #15BEC8;
 }
 
 .editBtn:hover {
@@ -531,7 +532,7 @@ input::-webkit-input-placeholder {
     height: 100%;
     overflow-y: scroll;
     box-sizing: border-box;
-    padding: 20px 57px 20px;
+    padding: 70px 57px 20px;
 }
 
 #uploadBox .selectBox {
@@ -668,7 +669,7 @@ input::-webkit-input-placeholder {
 .scene_control {}
 
 .scene_control .delBtn {
-    background: url(../img/icon/icon_del.png?4)no-repeat;
+    background: url(./img/icon/icon_del.png?4)no-repeat;
     background-size: 100% 100%;
     width: 14px;
     height: 14px;
@@ -735,4 +736,176 @@ input::-webkit-input-placeholder {
 
 .el-popconfirm__action button.el-button--text {
     color: #fff !important;
+}
+
+.headerBack {
+    height: auto;
+    width: 100%;
+    background: #141414;
+    padding: 0 52px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+}
+
+.topBox {
+    height: 60px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.headerBack .backIcon {
+    width: 24px;
+    height: 24px;
+    background: url(./img/icon/icon_back.png)no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+
+.headerBack .headerTitle {
+    font-size: 18px;
+    color: #fff;
+    margin-bottom: 0;
+}
+
+#planePic {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    box-sizing: border-box;
+    padding: 60px 47px 20px;
+}
+
+.itemBox {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 10px 0 10px 14px;
+    position: relative;
+}
+
+.itemBox.active {
+    background: #143537;
+}
+
+.itemBox.active::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: url(./img/icon/selectBtn.png)no-repeat;
+    background-size: 100% 100%;
+    top: 8px;
+    right: 10px;
+}
+
+.itemBox .ctrlBox {}
+
+.itemBox .ctrlBox .ctrlTitle {
+    font-style: 18px;
+    color: #fff;
+}
+
+.btnBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.ctrlBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #15BEC8;
+    padding: 3px 5px;
+    border-radius: 4px;
+    cursor: pointer;
+    position: relative;
+    margin-right: 10px;
+}
+
+.ctrlBtn.none {
+    border: 1px solid #cdcdcd;
+}
+
+.ctrlIcon {
+    width: 12px;
+    height: 12px;
+    margin-right: 5px;
+}
+
+.refreshIcon {
+    background: url(./img/icon/refreshBtn.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.disableIcon {
+    background: url(./img/icon/disable-1.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.ctrlBtn.none .disableIcon {
+    background: url(./img/icon/disable-2.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.downloadIcon {
+    background: url(./img/icon/download-1.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.ctrlBtn.none .downloadIcon {
+    background: url(./img/icon/download-2.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.uploadIcon {
+    background: url(./img/icon/upload-1.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.ctrlBtn.none .uploadIcon {
+    background: url(./img/icon/upload-2.png)no-repeat;
+    background-size: 100% 100%;
+}
+
+.ctrlText {
+    font-size: 14px;
+    color: #15BEC8;
+    margin-bottom: 0;
+}
+
+.ctrlBtn.none .ctrlText {
+    color: #cdcdcd;
+    cursor: no-drop;
+}
+
+.tipBox {
+    width: 18px;
+    height: 18px;
+    background: url(./img/icon/tipBtn.png)no-repeat;
+    background-size: 100% 100%;
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    right: -30px;
+    transform: translateY(-50%);
+}
+
+#planePic .tipText {
+    font-size: 12px;
+    color: #999;
+    line-height: 20px;
+    padding: 5px 15px;
+    box-sizing: border-box;
+    background: #000;
+    margin-top: 10px;
+    border-radius: 4px;
 }