[Feature] 前端实现在线地图场景分类截图上传功能 (#24)

Co-authored-by: yibaikuai <[email protected]@qq.com> Co-authored-by: Terayco <[email protected]>
PaddleCV-SIG · Sep 27, 2022 · 17df815 · 17df815
1 parent dfcb189
commit 17df815
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 22 deletions.
diff --git a/frontend/src/components/MyVueCropper.vue b/frontend/src/components/MyVueCropper.vue
@@ -123,7 +123,7 @@ export default {
       default:0
     },
   },
-  emits: ["finish", "cut-changed"],
+  emits: ["finish", "cut-changed",'child-refresh'],
 
   data() {
     return {
@@ -261,17 +261,14 @@ export default {
               this.fileList = [];
               hideFullScreenLoading("#load");
               this.$message.success("上传成功！");
-              setTimeout(() => {
-                     this.getUploadImg("地物分类");
-              }, 200);
-         
+              this.$emit('child-refresh')
             });
           } else if (funtype === "目标检测") {
             this.detectTargetsUpload(this.uploadSrc).then((res) => {
               this.fileList = [];
               hideFullScreenLoading("#load");
               this.$message.success("上传成功！");
-              this.getUploadImg("目标检测");
+              this.$emit('child-refresh')
             });
           }
           else if (funtype === "场景分类") {
@@ -281,7 +278,7 @@ export default {
               this.fileList = [];
               hideFullScreenLoading("#load");
               this.$message.success("上传成功！");
-              this.getUploadImg("场景分类");
+              this.$emit('child-refresh')
             });
           }
           this.$emit("cut-changed", false);

diff --git a/frontend/src/views/mainfun/Classify.vue b/frontend/src/views/mainfun/Classify.vue
@@ -413,6 +413,7 @@
         :child-prehandle="uploadSrc.prehandle"
         :child-denoise="uploadSrc.denoise"
         @cut-changed="notvisible"
+        @child-refresh="getMore"
       />
     </el-dialog>
     <ImgShow

diff --git a/frontend/src/views/mainfun/ClassifyScene.vue b/frontend/src/views/mainfun/ClassifyScene.vue
@@ -167,6 +167,7 @@
         :child_prehandle="uploadSrc.prehandle"
         :child_denoise="uploadSrc.denoise"
         @cut-changed="notvisible"
+        @child-refresh="getMore"
       />
     </el-dialog>
 
@@ -211,7 +212,7 @@
                   :src="beforeList[index]"
                   :fit="fit"
                   :lazy="true"
-                  class="gobig"
+                  class="gobig custom-pic"
                   :preview-src-list="[beforeList[index]]"
                   :preview-teleported="true"
                 />
@@ -463,4 +464,8 @@ export default {
   font-weight: 500;
   font-family: Microsoft JhengHei UI, sans-serif;
 }
+.custom-pic{
+  width: 256px;
+  height: 256px;
+}
 </style>
diff --git a/frontend/src/views/mainfun/DetectTargets.vue b/frontend/src/views/mainfun/DetectTargets.vue
@@ -354,6 +354,7 @@
         :child_prehandle="uploadSrc.prehandle"
         :child_denoise="uploadSrc.denoise"
         @cut-changed="notvisible"
+        @child-refresh="getMore"
       />
     </el-dialog>
     <ImgShow

diff --git a/frontend/src/views/mainfun/OnlineMap.vue b/frontend/src/views/mainfun/OnlineMap.vue
@@ -45,6 +45,13 @@
         >
           地物分类
         </el-radio>
+        <el-radio
+          v-model="funtype"
+          class="choose-item"
+          label="场景分类"
+        >
+          场景分类
+        </el-radio>
       </el-row>
       <el-row>
         <el-button
@@ -65,10 +72,70 @@
       top="6%"
     >
       <ImgShow
+        v-show="funtype!=='场景分类'"
         :before-img="beforeImg"
         :after-img="afterImg"
         :funtype="funtype"
       />
+      <el-row v-if="funtype==='场景分类'">
+        <el-col>
+          <el-card style="margin-bottom: 10px">
+            <el-row
+              :gutter="10"
+              justify="center"
+            >
+              <el-col
+                :lg="5"
+                :xl="5"
+              >
+                <div
+                  class="img-index hidden-sm-and-down"
+                  :style="{ height: 301 + 'px' }"
+                >
+                  <div>第<span class="index-number">1</span>组</div>
+                </div>
+              </el-col>
+              <el-col
+                :xs="20"
+                :sm="10"
+                :md="6"
+                :lg="6"
+                :xl="6"
+              >
+                <div
+                  style="position: relative;"
+                >
+                  <el-image
+                    ref="tableTab"
+                    :src="beforeList[0]"
+                    :fit="fit"
+                    :lazy="true"
+                    class="gobig custom-pic"
+                    :preview-src-list="[beforeList[0]]"
+                    :preview-teleported="true"
+                  />
+
+                  <div class="img-infor">
+                    <span>原图</span>
+                  </div>
+                  <span class="index-number hidden-md-and-up">{{ sceneKey[0][0] }}:<span>{{ scene[0][sceneKey[0][0]] }}</span></span>
+                </div>
+              </el-col>
+              <el-col
+                :lg="5"
+                :xl="5"
+              >
+                <div
+                  class="img-index hidden-sm-and-down"
+                  :style="{ height: 301 + 'px' }"
+                >
+                  <span class="index-number ">{{ Object.keys(scene[0])[0] }}:{{ scene[0][Object.keys(scene[0])[0]] }}</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
       <el-row justify="center">
         <el-button
           type="primary"
@@ -81,31 +148,31 @@
     </el-dialog>
   </div>
 </template>
- 
+
 <script>
 import global from "@/global";
 import html2canvas from "html2canvas";
 import ImgShow from "@/components/ImgShow";
 import {
   createSrc,
   classifyUpload,
-  detectTargetsUpload,
+  detectTargetsUpload, sceneClassifyUpload,
 } from "@/api/upload";
 import { getUploadImg } from "@/utils/getUploadImg";
 import { showFullScreenLoading, hideFullScreenLoading } from "@/utils/loading";
 import { historyGetPage } from "@/api/history";
 
 export default {
   name: "Onlinemap",
-
   components: {  ImgShow },
   data() {
     return {
       beforeImg: [],
+      beforeList:[],
       afterImg: [],
       isShow: false,
       tmpFile: "",
-   
+
       choose: false,
       funtype: "目标检测",
       address_detail: null, //详细地址
@@ -115,6 +182,8 @@ export default {
       lat: "",
       htmlUrl: "",
       uploadSrc: { list: [], prehandle: 0, denoise: 0 },
+      scene:[],
+      sceneKey:[]
     };
   },
   mounted() {
@@ -125,10 +194,10 @@ export default {
     map.setMapType(BMAP_HYBRID_MAP);
     // map.centerAndZoom：第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。第二个参数是地图缩放级别，最大为19，最小为0
     map.addControl(
-      //添加地图类型控件
-      new BMap.MapTypeControl({
-        mapTypes: [BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
-      })
+        //添加地图类型控件
+        new BMap.MapTypeControl({
+          mapTypes: [BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
+        })
     );
     map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
     map.enableScrollWheelZoom(true);
@@ -155,11 +224,11 @@ export default {
         //鼠标点击下拉列表后的事件
         let _value = e.item.value;
         myValue =
-          _value.province +
-          _value.city +
-          _value.district +
-          _value.street +
-          _value.business;
+            _value.province +
+            _value.city +
+            _value.district +
+            _value.street +
+            _value.business;
         th.address_detail = myValue;
         setPlace();
       });
@@ -194,13 +263,14 @@ export default {
     createSrc,
     classifyUpload,
     detectTargetsUpload,
+    sceneClassifyUpload,
     getUploadImg,
     showFullScreenLoading,
     hideFullScreenLoading,
     historyGetPage,
     goUpload(type) {
       showFullScreenLoading("#load");
-  
+
       let formData = new FormData();
       formData.append("files", this.tmpFile);
       formData.append("type", type);
@@ -209,6 +279,8 @@ export default {
           return item.src;
         });
         if (type === "目标检测") {
+          this.uploadSrc.prehandle = 0
+          this.uploadSrc.denoise = 0
           this.detectTargetsUpload(this.uploadSrc).then((res) => {
             hideFullScreenLoading("#load");
             this.$message.success("上传成功！");
@@ -228,6 +300,8 @@ export default {
           });
         }
         if (type === "地物分类") {
+          this.uploadSrc.prehandle = 0
+          this.uploadSrc.denoise = 0
           this.classifyUpload(this.uploadSrc).then((res) => {
             hideFullScreenLoading("#load");
             this.$message.success("上传成功！");
@@ -246,6 +320,23 @@ export default {
             });
           });
         }
+        if (type === "场景分类") {
+          delete(this.uploadSrc.denoise)
+          delete (this.uploadSrc.prehandle)
+          this.sceneClassifyUpload(this.uploadSrc).then((res) => {
+            hideFullScreenLoading("#load");
+            this.$message.success("上传成功！");
+            this.choose = false;
+            this.historyGetPage(1, 1, "场景分类").then((res) => {
+              this.beforeList=res.data.data.map((item)=>{
+                return global.BASEURL + item.before_img
+              })
+              this.scene = res.data.data.map(item=>item.data)     //场景键值对数组,[{'a':0.8},{‘b’:0.6},{'c':0.8}]
+              this.sceneKey = this.scene.map(item=>Object.keys(item))  //构成场景键数组的数组，[['a'],['b'],['c']]
+              this.isShow = true;
+            });
+          });
+        }
       });
     },
     // 页面元素转图片
@@ -319,4 +410,31 @@ export default {
 .choose-item {
   font-size: 25px;
 }
+.img-index {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+.index-number {
+  font-family: Yu Gothic Medium;
+  font-style: oblique;
+  font-size: 30px;
+
+}
+.img-infor {
+  text-align: center;
+  font-size: 25px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  width: 256px;
+  height: 30px;
+  font-weight: 500;
+  font-family: Microsoft JhengHei UI, sans-serif;
+}
+.custom-pic{
+  width: 256px;
+  height: 256px;
+}
 </style>