refactor send_form and get_result interface

frontend/src/App.vue

@@ -5,7 +5,7 @@
     </header>
     <div id="content">
       <div id="image-upload">
-        <uploadCard @infor="getInfor"/>
+        <uploadCard/>
       </div>
       <div id="info-display">
         <displayCard ref="dCard"/>
@@ -35,9 +35,9 @@ export default {
     displayCard
   },
   methods:{
-    getInfor() {
-      this.$refs.dCard.getInfor()
-    }
+    // getInfor(id) {
+    //   this.$refs.dCard.getInfor(id)
+    // }
   }
 }
 </script>

frontend/src/components/display/displayCard.vue

@@ -3,6 +3,21 @@
     <div slot="header" class="clearfix">
       <span>Correction Analysis</span>
     </div>
+    <el-input
+      id="search_bar"
+      placeholder="Enter your analysis ID"
+      v-model="correction_id"
+      style="width: 250px"
+    >
+      <el-button
+        slot="suffix"
+        icon="el-icon-search"
+        circle
+        @click="getInfor"
+        size="small"
+        style="margin-top:3px"
+      ></el-button>
+    </el-input>
     <div id="corrected-image-container">
       <div class="corrected-image-group">
         <el-image
@@ -49,9 +64,18 @@
     </div>
     <div id="information-container">
       <div id="level-desc">
-        <p class="level-item" :style="{'background-color':level_color[0]}">Normal</p>
-        <p class="level-item" :style="{'background-color':level_color[1]}">Warning</p>
-        <p class="level-item" :style="{'background-color':level_color[2]}">Danger</p>
+        <p class="level-item" :style="{ 'background-color': level_color[0] }">
+          Normal
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[1] }">
+          Mild
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[2] }">
+          Moderate
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[3] }">
+          Severe
+        </p>
       </div>
       <div v-for="item in information" :key="item.index" class="text-item">
         <div class="item-title">{{ item.title }}</div>
@@ -70,7 +94,7 @@
               'background-color': level_color[detail.level],
               color: 'white',
               'border-radius': '2px',
-              'padding': '2px 4px 2px 4px'
+              padding: '2px 4px 2px 4px',
             }"
           >
             {{ detail.value }}
@@ -97,18 +121,24 @@
 /* .box-card {
   width: 480px;
 } */
+#search_bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 5%;
+}
 .box-card {
   margin-left: 10%;
   margin-right: 10%;
   height: 520px;
   overflow: auto;
 }
-#level-desc{
+#level-desc {
   display: flex;
   justify-content: baseline;
   align-items: center;
 }
-.level-item{
+.level-item {
   color: white;
   margin-left: 3%;
   border-radius: 3px;
@@ -127,7 +157,6 @@
   width: 45%;
   text-align: center;
   padding: 8px 10px 5px 10px;
-  
 }
 .corrected-image {
   height: 200px;
@@ -167,27 +196,33 @@ export default {
   mounted() {},
   data() {
     return {
-      information: [
-      ],
+      information: [],
       images: {
-        "front-correction":
-          "",
-        "right-correction":
-          "",
+        "front-correction": "",
+        "right-correction": "",
       },
-      level_color: ["#67C23A", "#E6A23C", "#F56C6C"],
+      level_color: ["#67C23A", "#CDDC39", "#E6A23C", "#F56C6C"],
+      correction_id: "",
     };
   },
   props: {},
   methods: {
     getInfor() {
+      let id = this.correction_id;
       let _this = this;
-      axios.get("http://172.17.244.191:8090/get_result").then((response) => {
-        const data = response.data;
-        _this.information = JSON.parse(data.data);
-        _this.images["front-correction"] = "data:image/jpg;base64,"+data.front;
-        _this.images["right-correction"] = "data:image/jpg;base64,"+data.right;
-      });
+      let formData = new FormData();
+      formData.append("id", id);
+      axios
+        .post("http://114.212.245.120:8090/get_result", formData)
+        .then((response) => {
+          const data = response.data;
+          _this.information = JSON.parse(data.data);
+          _this.images["front-correction"] =
+            "data:image/png;base64," + data.front;
+          _this.images["right-correction"] =
+            "data:image/png;base64," + data.right;
+          console.log(_this.information);
+        });
     },
     downloadImage(name) {
       // let _this  = this;

frontend/src/components/upload/uploadCard.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>Pose Upload</span>
     </div>
-    <uploadForm @infor="infor"/>
+    <uploadForm/>
     <div id="upload-rules">
       <p style="color:deepskyblue;font-weight: bold; font-size: 14px">Upload Rules</p>
       <div v-for="item in rules" :key="item.index" class="rule">
@@ -50,7 +50,7 @@ export default {
     return {
       rules: [
         {"index":1,"content":"Image must be png/jpg format."},
-        {"index":2,"content":"File name must be front/right, e.g: front.png."},
+        {"index":2,"content":"File name must be x-front/right, e.g: 1-front.png."},
         {"index":3,"content":"Height is measured in centimeter."},
         {"index":4,"content":"Must upload 2 images (front and right) of only 1 person at a time."}
       ],
@@ -60,8 +60,8 @@ export default {
     uploadForm,
   },
   methods: {
-    infor() {
-      this.$emit("infor")
+    infor(id) {
+      this.$emit("infor",id)
     }
   },
 };

frontend/src/components/upload/uploadForm.vue

@@ -2,7 +2,7 @@
   <el-form ref="form" :model="form" label-width="120px">
     <div id="form-content">
       <el-form-item label="Pose" class="image-container">
-        <imageUpload @fileList="getFileList"/>
+        <imageUpload @fileList="getFileList" />
       </el-form-item>
 
       <el-form-item label="Height" id="height">
@@ -26,6 +26,20 @@
       >
       <el-button class="form-button" disabled size="small">Cancel</el-button>
     </el-form-item>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <span>Your analysis ID is {{correction_id}}.</span>
+      <span slot="footer" class="dialog-footer">
+        <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
+        <el-button type="primary" @click="dialogVisible = false"
+          >确认</el-button
+        >
+      </span>
+    </el-dialog>
   </el-form>
 </template>
 <style scoped>
@@ -51,8 +65,7 @@
 import imageUpload from "./imageUpload.vue";
 import axios from "axios";
 export default {
-  mounted() {
-  },
+  mounted() {},
   data() {
     return {
       form: {
@@ -60,6 +73,8 @@ export default {
         poseList: [{ name: "front" }, { name: "side" }],
         displayFlag: false,
       },
+      dialogVisible: false,
+      correction_id: 0
     };
   },
   components: {
@@ -70,22 +85,26 @@ export default {
       this.height = value;
     },
     getFileList(fileList) {
-      this.form.fileList = fileList
+      this.form.fileList = fileList;
     },
     onSubmit() {
       // let _this = this;
-      let data = new FormData()
-      data.append('height',this.height);
-      Object.entries(this.form.fileList).forEach(file=>{
-        data.append('images'+file[1].name,file[1].raw)
-      })
+      let data = new FormData();
+      data.append("height", this.height);
+      Object.entries(this.form.fileList).forEach((file) => {
+        data.append("images" + file[1].name, file[1].raw);
+      });
       axios
-        .post("http://172.17.244.191:8090/send_form", data)
-        .then(response => {
-          console.log(response.data)
-          this.$emit("infor")
+        .post("http://114.212.245.120:8090/send_form", data)
+        .then((response) => {
+          this.correction_id = response.data.id;
+          this.dialogVisible = true;
+          // this.$emit("infor", response.data.id);
         });
     },
+    handleClose(done) {
+      done();
+    },
   },
 };
 </script>