feat：实例化添加数据集页面

components/upload-Pointclound/index.js

@@ -31,13 +31,13 @@
                         <ul class="sceneList">
                             <li class="sceneItem" v-for="i in hasList">
                                 <div class="sceneName">
-                                    <p class="code">{{i.sceneNum}}</p>
+                                    <p class="code">{{i.mergeCode}}</p>
                                     <span class="name">来自场景：{{i.title}}</span>
                                 </div>
                                 <div class="scene_control">
                                    
 
-                                    <el-popconfirm placement="top" title="是否要删除该数据集？" :hide-icon="true" @confirm="delConfirm(i.id)">
+                                    <el-popconfirm placement="top" title="是否要删除该数据集？" :hide-icon="true" @confirm="delConfirm(i.mergeCode)">
                                         <el-button class="delBtn" title="删除" slot="reference"></el-button>
                                     </el-popconfirm>
                                     <!-- <div class="delBtn" title="删除"></div> -->
@@ -126,14 +126,14 @@
                     if (res.data.code == 0) {
                         this.getHasSceneList()
                         this.$message({
-                            message: '数据集添加成功',
+                            message: '数据集添加成功,请点击左侧【数据集】查看',
                             type: 'success',
                             duration: 2000,
                         });
                         IV.api.AuthenticationService.sendAuthenticationChanged()
                     } else {
                         this.$message({
-                            message: '数据集添加失败',
+                            message: '数据集添加失败，请重试',
                             type: 'error',
                             duration: 2000,
                         });
@@ -143,7 +143,7 @@
                     this.value = ''
                     this.$parent.hideLoading()
                     this.$message({
-                        message: '数据集添加失败',
+                        message: '数据集添加失败，请重试',
                         type: 'error',
                         duration: 2000,
                     });
@@ -152,10 +152,10 @@
 
 
             },
-            delConfirm(id) {
+            delConfirm(mergeCode) {
                 axios({
                     // url: `/indoor/${sceneNum}/api/merge/exist`,
-                    url: `/indoor/${sceneNum}/api/merge/remove/${id}`,
+                    url: `/indoor/${sceneNum}/api/merge/remove/${mergeCode}`,
                     method: 'get',
                 }).then(res => {
                     if (res.data.code == 0) {

locat/components/upload-Pointclound/index.js

@@ -1,126 +0,0 @@
-(() => {
-    Vue.component('uploadPointclound', {
-        props: [],
-        name: 'uploadPointclound',
-        template: `<div id="uploadBox" >
-                    <h4>添加数据集 </h4>
-                    <div class="selectBox">
-                        <el-select v-model="value" filterable :filter-method="searchScene" placeholder="请选择">
-                            <el-option v-for="item in options" :key="item.code" :label="item.code" :value="item.code">
-                                <div class="sceneName">
-                                    <p class="code">{{item.code}}</p>
-                                    <span class="name">来自场景：{{item.name}}</span>
-                                </div>
-
-                            </el-option>
-                        </el-select>
-
-                    </div>
-                    <div class="uploadBtn" @click="openUpload" :class="{disabled:value==''}">
-                        <i class="fa fa-plus ng-scope"></i>&nbsp;&nbsp;添加到场景
-                    </div>
-
-                    <p class="itemTitle">已添加的数据集 </p>
-                    <div class="listBox">
-                        <ul class="sceneList">
-                            <li class="sceneItem" v-for="i in 10">
-                                <div class="sceneName">
-                                    <p class="code">t-iksBApb</p>
-                                    <span class="name">来自场景：港2</span>
-                                </div>
-                                <div class="scene_control">
-                                   
-
-                                    <el-popconfirm placement="top" title="是否要删除该数据集？" :hide-icon="true" @confirm="delConfirm">
-                                        <el-button class="delBtn" title="删除" slot="reference"></el-button>
-                                    </el-popconfirm>
-                                    <!-- <div class="delBtn" title="删除"></div> -->
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-
-                </div>`,
-        data() {
-            return {
-                options: [{
-                    id: 1,
-                    name: "港2",
-                    code: 't-iksBApb'
-                }, {
-                    id: 2,
-                    name: "港2",
-                    code: 't-iksBA2pb'
-                }, {
-                    id: 3,
-                    name: "港2",
-                    code: 't-iksBA3pb'
-                }, {
-                    id: 4,
-                    name: "港2",
-                    code: 't-iksBA4pb'
-                }, {
-                    id: 5,
-                    name: "港2",
-                    code: 't-iksBA5pb'
-                }, {
-                    id: 6,
-                    name: "港2",
-                    code: 't-iksBA6pb'
-                }],
-                value: '',
-            }
-        },
-        methods: {
-            searchScene() {
-                let t = setTimeout(() => {
-                    console.log(1)
-
-                    clearTimeout(t)
-                }, 3000);
-            },
-            openUpload() {
-                this.$parent.showLoading()
-                setTimeout(() => {
-                    this.value = ''
-                    this.$parent.hideLoading()
-                    this.$message({
-                        message: '数据集添加成功',
-                        type: 'success',
-                        duration: 2000,
-                    });
-                    IV.api.AuthenticationService.sendAuthenticationChanged()
-                        // IV.SidebarMenuService.goToItem(IV.SidebarMenuService.items[1])
-
-                }, 2000);
-                // this.$confirm('此操作将永久删除该文件, 是否继续?', {
-                //     confirmButtonText: '确定',
-                //     cancelButtonText: '取消',
-                //     center: true
-                // }).then(() => {
-                //     // this.$message({
-                //     //     type: 'success',
-                //     //     message: '删除成功!'
-                //     // });
-                // }).catch(() => {
-                //     // this.$message({
-                //     //     type: 'info',
-                //     //     message: '已取消删除'
-                //     // });
-                // });
-            },
-            delConfirm() {
-                console.log(1)
-            }
-        },
-        computed: {
-
-        },
-        destroyed() {
-
-        },
-        mounted() {
-
-        },
-    })
-})();

locat/style.css

@@ -60,12 +60,18 @@ body {
     position: relative;
 }
 
+.control_box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
 .scrollBox {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     box-sizing: border-box;
-    padding: 20px 57px 80px;
+    padding: 95px 57px 80px;
 }
 
 
@@ -461,6 +467,7 @@ input::-webkit-input-placeholder {
     cursor: pointer;
     margin-bottom: 10px;
     position: relative;
+    color: #15BEC8;
 }
 
 .editBtn:hover {
@@ -525,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 {
@@ -561,7 +568,7 @@ input::-webkit-input-placeholder {
 }
 
 .el-popper[x-placement^=bottom] .popper__arrow::after {
-    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
+    border-bottom-color: #141414 !important;
 }
 
 .el-select-dropdown .el-select-dropdown__item:hover {
@@ -662,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;
@@ -716,7 +723,7 @@ input::-webkit-input-placeholder {
 }
 
 .el-popper[x-placement^=top] .popper__arrow::after {
-    border-top-color: rgba(255, 255, 255, 0.4) !important;
+    border-top-color: #141414!important;
 }
 
 .el-button--primary {
@@ -729,4 +736,188 @@ 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;
+}
+
+.ctrlBox .el-button {
+    border: none;
+    background: transparent;
+    padding: 0;
+    line-height: normal;
+}
+
+.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;
+}
+
+.el-popconfirm__main {
+    max-width: 220px;
+    font-size: 14px;
 }

style.css

@@ -568,7 +568,7 @@ input::-webkit-input-placeholder {
 }
 
 .el-popper[x-placement^=bottom] .popper__arrow::after {
-    border-bottom-color: rgba(255, 255, 255, 0.4) !important;
+    border-bottom-color: #141414 !important;
 }
 
 .el-select-dropdown .el-select-dropdown__item:hover {
@@ -723,7 +723,7 @@ input::-webkit-input-placeholder {
 }
 
 .el-popper[x-placement^=top] .popper__arrow::after {
-    border-top-color: rgba(255, 255, 255, 0.4) !important;
+    border-top-color: #141414!important;
 }
 
 .el-button--primary {