update frontend

frontend/src/router/index.js

@@ -0,0 +1,38 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+// import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    // component: Home
+  },
+  {
+    path: '/static',
+    name: 'Static',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/static/Static.vue')
+  },
+  {
+    path: '/dynamic',
+    name: 'Dynamic',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/dynamic/Dynamic.vue')
+    
+  },
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

frontend/src/util/request.js

@@ -0,0 +1,6 @@
+export const requestUrl = 'http://106.15.1.178:8090/'
+export const httpUrl = 'http://106.15.1.178:8001'
+export default{
+    requestUrl,
+    httpUrl
+}

frontend/src/views/dynamic/Dynamic.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-card id="dynamic-content">
+    <el-steps
+      direction="horizontal"
+      :active="active_step"
+      finish-status="success"
+      align-center
+    >
+      <el-step title="上传视频"> </el-step>
+      <el-step title="获取分析结果"></el-step>
+      <!-- <el-step title="获取分析建议"></el-step> -->
+    </el-steps>
+    <uploader v-show="active_step===0" />
+    <visualizer v-show="active_step===1" />
+    
+    <!-- <display /> -->
+    <div id="button_group">
+      <el-button size="small" style="margin: 10px 5px 10px 0" @click="back_step"
+        >上一步</el-button
+      >
+      <el-button
+        size="small"
+        style="margin: 10px 0 10px 5px"
+        @click="forward_step"
+        >下一步</el-button
+      >
+    </div>
+  </el-card>
+</template>
+<script>
+import uploader from "./components/uploadCard.vue";
+// import display from "./components/display.vue";
+import visualizer from "./components/visualize.vue";
+
+
+export default {
+  name: "Dynamic",
+  components: {
+    uploader,
+    // display,
+    visualizer
+  },
+  data() {
+    return {
+      active_step: 0,
+    };
+  },
+  methods: {
+    forward_step() {
+      if (this.active_step < 2) {
+        this.active_step++;
+      }
+    },
+    back_step() {
+      if (this.active_step > 0) {
+        this.active_step--;
+      }
+    },
+    
+  },
+};
+</script>
+
+<style>
+#dynamic-content {
+  /* width: 500px; */
+  margin: 20px 10% 20px 10%;
+}
+#button_group {
+  float: right;
+}
+</style>

frontend/src/views/dynamic/components/analyze.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="analyzeCard">
+      analyze
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'analyzer',
+    components: {
+        
+    }
+}
+</script>
+
+<style>
+
+</style>

frontend/src/views/dynamic/components/display.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="dynamic-display">
+    <visualizer />
+    <analyzer />
+  </div>
+</template>
+
+<script>
+import visualizer from "./visualize.vue";
+import analyzer from "./analyze.vue";
+
+export default {
+  components: {
+    visualizer,
+    analyzer,
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/views/dynamic/components/uploadCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-form ref="dynamicForm" class="dynamic_uploader">
+    <el-form-item class="dynamic_form_item">
+      <el-select
+        class="action-selector"
+        v-model="actionValue"
+        filterable
+        placeholder="请选择运动类型"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item class="dynamic_form_item">
+      <el-upload
+        class="video-uploader"
+        drag
+        :action="video_upload_url"
+        :auto-upload="false"
+        :file-list="fileList"
+        :data="{ filename: filename }"
+        :on-change="handleChange"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将视频文件拖到此处，或<em>点击上传</em>
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item class="dynamic_form_item">
+      <el-button
+        type="primary"
+        size="small"
+        style="margin-top: 10px"
+        @click="doSubmit"
+        >确认提交视频</el-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+
+<style>
+.text {
+  font-size: 14px;
+}
+
+.dynamic_form_item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/* .box-card {
+  width: 480px;
+} */
+.dynamic_uploader {
+  margin-top: 20px;
+  margin-left: 30%;
+  margin-right: 30%;
+  height: 330px;
+  /* text-align: center; */
+}
+
+.video-uploader {
+  margin-top: 10px;
+  /* width: 300px; */
+  margin: auto;
+}
+</style>
+<script>
+// import uploadForm from "./uploadForm.vue";
+import {requestUrl} from "@/util/request.js";
+import axios from "axios";
+
+export default {
+  name: "dynamic-uploader",
+  data() {
+    return {
+      options: [
+        {
+          value: "jump",
+          label: "立定跳远",
+        },
+        {
+          value: "juanfu",
+          label: "卷腹",
+        },
+        {
+          value: "pingban",
+          label: "平板支撑",
+        },
+        {
+          value: "gaotaitui",
+          label: "高抬腿",
+        },
+        {
+          value: "shendun",
+          label: "深蹲",
+        },
+      ],
+      actionValue: "",
+      video_upload_url: requestUrl + "get_videoid",
+      fileList: [],
+      filename: '',
+    };
+  },
+  components: {
+    // uploadForm,
+  },
+  methods: {
+    handleChange(file,fileList){
+      let _this = this;
+      console.log(file)
+      _this.fileList = fileList
+      // this.filename = file.name
+      // this.$emit('fileList',this.fileList);
+    },
+    doSubmit() {
+      let data = new FormData();
+      // let _this = this;
+      data.append("mode", this.actionValue);
+      console.log(this.fileList[0])
+      data.append("video", this.fileList[0].raw);
+      console.log(requestUrl + "get_videoid");
+      axios.post(requestUrl + "get_videoid", data).then((response) => {
+        console.log(response)
+        this.$message({
+          showClose: true,
+          message: "您的视频分析ID为: " + response.data.id,
+          type: 'success'
+        });
+      });
+    },
+  },
+};
+</script>

frontend/src/views/dynamic/components/visualize.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="video-container">
+    <el-input
+      id="video_search_bar"
+      placeholder="输入您的视频分析ID"
+      v-model="video_id"
+      style="width: 300px; margin-bottom: 20px"
+    >
+      <el-button
+        slot="suffix"
+        round
+        plain
+        @click="getVideoAnalysis"
+        size="small"
+        style="margin-top: 4px"
+      >
+        获取分析结果
+      </el-button>
+    </el-input>
+    <el-card id="video_visualizer" class="video_result">
+      <div slot="header" class="clearfix" style="float: left">
+        <span>1. 运动3D还原</span>
+      </div>
+      <video
+        id="reconstructed_video"
+        controls
+        style="display: block; margin: auto; width: 1000px; height: 400px"
+        v-show="video_3d_analyze_status"
+      ></video>
+    </el-card>
+    <el-card id="video_analyze" class="video_result">
+      <div slot="header" class="clearfix" style="float: left">
+        <span>2. 运动分析结果</span>
+      </div>
+      <div class="video_analyze_content">
+        <el-card
+          id="capability_container"
+          style="width: 100%; height: 300px; margin-right:20px"
+        >
+          <span style="float: left">
+            <i class="el-icon-data-analysis"></i>
+            运动能力评估
+            </span>
+        </el-card>
+        <el-card
+          id="advice_container"
+          style="width: 100%; height: 300px; margin: auto"
+        >
+          <span style="display: block; text-align: left; margin-bottom: 6px"
+            >
+            <i class="el-icon-s-order"></i>
+            运动建议
+            </span
+          >
+          <div
+            id="advice"
+            v-show="show_advice"
+            style="
+              display: block;
+              text-align: left;
+              border-radius: 4px;
+              height: 200px;
+            "
+          >
+          <i class="el-icon-s-order"></i>
+          </div>
+        </el-card>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { httpUrl, requestUrl } from "@/util/request.js";
+import axios from "axios";
+import DataSet from "@antv/data-set";
+import { Chart } from "@antv/g2";
+
+export default {
+  name: "visualizer",
+  data() {
+    return {
+      requestUrl: requestUrl,
+      httpUrl: httpUrl,
+      video_id: "",
+      analyzed_data: [
+        { item: "Design", a: 70 },
+        { item: "Development", a: 60 },
+        { item: "Marketing", a: 50 },
+        { item: "Users", a: 40 },
+        { item: "Test", a: 60 },
+        { item: "Language", a: 70 },
+        { item: "Technology", a: 50 },
+        { item: "Support", a: 30 },
+        { item: "Sales", a: 60 },
+        { item: "UX", a: 50 },
+      ],
+      video_3d_analyze_status: false,
+      show_advice: false,
+      advice: "",
+    };
+  },
+  mounted() {
+    this.show_advice = false
+  },
+  methods: {
+    draw_chart() {
+      const { DataView } = DataSet;
+      const dv = new DataView().source(this.analyzed_data);
+      dv.transform({
+        type: "fold",
+        fields: ["a"], // 展开字段集
+        key: "user", // key字段
+        value: "score", // value字段
+      });
+
+      const chart = new Chart({
+        container: "capability_container",
+        autoFit: true,
+        // height: 500,
+        // width: 500,
+      });
+      chart.data(dv.rows);
+      chart.scale("score", {
+        min: 0,
+        max: 4,
+      });
+      chart.coordinate("polar", {
+        radius: 0.8,
+      });
+      chart.tooltip({
+        shared: true,
+        showCrosshairs: true,
+        crosshairs: {
+          line: {
+            style: {
+              lineDash: [4, 4],
+              stroke: "#333",
+            },
+          },
+        },
+      });
+      chart.axis("item", {
+        line: null,
+        tickLine: null,
+        grid: {
+          line: {
+            style: {
+              lineDash: null,
+            },
+          },
+        },
+      });
+      chart.axis("score", {
+        line: null,
+        tickLine: null,
+        grid: {
+          line: {
+            type: "line",
+            style: {
+              lineDash: null,
+            },
+          },
+        },
+      });
+
+      chart.line().position("item*score").color("user").size(1);
+      chart
+        .point()
+        .position("item*score")
+        .color("user")
+        .shape("circle")
+        .size(4)
+        .style({
+          stroke: "#fff",
+          lineWidth: 1,
+          fillOpacity: 1,
+        });
+      chart.area().position("item*score").color("user");
+      chart.render();
+    },
+    async getVideoAnalysis() {
+      let id = this.video_id;
+      let _this = this;
+      let formData = new FormData();
+      formData.append("id", id);
+      // _this.draw_chart();
+      await axios.post(requestUrl + "query_3D", formData).then((response) => {
+        const data = response.data;
+        // _this.information = JSON.parse(data.data);
+        //   // if (data.status == "processing") {
+        //   //   this.$message({
+        //   //     showClose: true,
+        //   //     message: "您的视频仍在分析中，请稍等...",
+        //   //   });
+        //   //   _this.video_3d_analyze_status = false;
+
+        //   // } else {
+        let video_obj = document.getElementById("reconstructed_video");
+        video_obj.src = data.url;
+        _this.video_3d_analyze_status = true;
+        // }
+      });
+      // _this.draw_chart();
+      await axios
+        .post(requestUrl + "query_video", formData)
+        .then((response) => {
+          const data = response.data;
+          console.log(response.data);
+          _this.analyzed_data = data["analyzed_data"];
+          _this.draw_chart();
+          let ad_obj = document.getElementById("advice");
+          ad_obj.innerText = data["advice"];
+          _this.show_advice = true;
+        });
+    },
+  },
+};
+</script>
+
+<style>
+/* #video_visualizer{
+  display: grid;
+  grid-template-columns: 1fr;
+} */
+#video_search_bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.video_analyze_content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.video_result {
+  /* width: 700px; */
+  margin-bottom: 20px;
+}
+</style>

frontend/src/views/static/Static.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="app">
+    <router-view/>
+    <header id="header">
+      <!-- <h1>Pose Correction</h1> -->
+    </header>
+    <div id="static-content">
+      <div id="image-upload">
+        <uploadCard @infor="getInfor"/>
+      </div>
+      <div id="info-display">
+        <displayCard ref="dCard"/>
+      </div>
+    </div>
+    <!-- <footer id="footer">
+      Nanjing University, Software Institute
+    </footer> -->
+  </div>
+</template>
+
+<script>
+import uploadCard from '@/views/static/components/upload/uploadCard.vue'
+import displayCard from '@/views/static/components/display/displayCard.vue'
+
+export default {
+  mounted(){
+  },
+  data() {
+    return {
+      // displayFlag: false
+    }
+  },
+  name: 'Static',
+  components: {
+    uploadCard,
+    displayCard
+  },
+  methods:{
+    getInfor(id) {
+      console.log(id)
+      this.$refs.dCard.getInfor(id)
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  /* margin-top: 60px; */
+}
+#header{
+  margin-top: 1%;
+  height: 10px;
+}
+#static-content{
+  display: grid;
+  height: 500px;
+  grid-template-columns: 1fr 1fr;
+}
+#footer{
+  margin-top: 20px;
+  padding-top: 30px;
+}
+</style>

frontend/src/views/static/components/display/displayCard.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>姿势矫正分析</span>
+    </div>
+    <el-input
+      id="search_bar"
+      placeholder="输入您的图片分析ID"
+      v-model="correction_id"
+      style="width: 250px"
+    >
+      <el-button
+        slot="suffix"
+        icon="el-icon-search"
+        circle
+        @click="getAnalysis"
+        size="small"
+        style="margin-top:4px"
+      ></el-button>
+    </el-input>
+    <div id="corrected-image-container">
+      <div class="corrected-image-group">
+        <el-image
+          :src="images['front-correction']"
+          class="corrected-image"
+          id="front-correction"
+        >
+          <div slot="placeholder" class="image-slot">
+            图片正在分析中...
+          </div>
+        </el-image>
+        <div class="corrected-text-group">
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            class="correction-download"
+            @click="downloadImage('front-correction')"
+            >下载</el-button
+          >
+        </div>
+      </div>
+      <div class="corrected-image-group" style="margin-left: 3%">
+        <el-image
+          :src="images['right-correction']"
+          class="corrected-image"
+          id="right-correction"
+        >
+          <div slot="placeholder" class="image-slot">
+            图片正在分析中...
+          </div>
+        </el-image>
+        <div class="corrected-text-group">
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            class="correction-download"
+            @click="downloadImage('right-correction')"
+            >下载</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <div id="information-container">
+      <div id="level-desc">
+        <p class="level-item" :style="{ 'background-color': level_color[0] }">
+          正常
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[1] }">
+          轻度
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[2] }">
+          中度
+        </p>
+        <p class="level-item" :style="{ 'background-color': level_color[3] }">
+          重度
+        </p>
+      </div>
+      <div v-for="item in information" :key="item.index" class="text-item">
+        <div class="item-title">{{ item.title }}</div>
+        <div
+          v-for="detail in item.detail"
+          :key="detail.index"
+          class="detail-item"
+          :style="{ 'margin-top': '3%' }"
+        >
+          <div>
+            {{ detail.name }}
+          </div>
+          <div
+            class="detail-value"
+            :style="{
+              'background-color': level_color[detail.level],
+              color: 'white',
+              'border-radius': '2px',
+              padding: '2px 4px 2px 4px',
+            }"
+          >
+            {{ detail.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/* .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 {
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
+}
+.level-item {
+  color: white;
+  margin-left: 3%;
+  border-radius: 3px;
+  font-size: 14px;
+  padding: 2px 4px 2px 4px;
+}
+#corrected-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid lightblue;
+  border-radius: 5px;
+  margin-bottom: 5%;
+}
+.corrected-image-group {
+  width: 45%;
+  text-align: center;
+  padding: 8px 10px 5px 10px;
+}
+.corrected-image {
+  height: 200px;
+  text-align: center;
+  width: 100%;
+}
+.corrected-text-group {
+  text-align: center;
+}
+/* .corrected-text-group .correction-download {
+  float: right;
+} */
+
+#information-container {
+  overflow: auto;
+  border: 1px solid lightblue;
+  border-radius: 5px;
+}
+.text-item {
+  margin-bottom: 10px;
+  padding: 5px 8px 5px 5px;
+}
+.item-title {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+}
+
+.detail-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+</style>
+<script>
+import axios from "axios";
+import {requestUrl} from '@/util/request.js'
+export default {
+  mounted() {},
+  data() {
+    return {
+      information: [],
+      images: {
+        "front-correction": "",
+        "right-correction": "",
+      },
+      level_color: ["#67C23A", "#CDDC39", "#E6A23C", "#F56C6C"],
+      correction_id: "",
+    };
+  },
+  props: {},
+  methods: {
+    getInfor(id){
+      console.log(id)
+      this.correction_id = id;
+    },
+    getAnalysis() {
+      let id = this.correction_id;
+      let _this = this;
+      let formData = new FormData();
+      formData.append("id", id);
+      axios
+        .post(requestUrl+"/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;
+      const url = this.images[name];
+      let a = document.createElement("a");
+      a.download = "";
+      a.href = url;
+      a.click();
+    },
+  },
+};
+</script>

frontend/src/views/static/components/upload/imageUpload.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-upload
+    class="upload-demo"
+    :action="url"
+    :on-change="handleChange"
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+    multiple
+    :auto-upload="false"
+    :limit="2"
+    :on-exceed="handleExceed"
+    :file-list="fileList"
+    :data="{filename:filename}"
+    ref="upload"
+  >
+    <el-button size="small" type="primary" icon="el-icon-upload2">点击上传</el-button>
+  </el-upload>
+</template>
+<script>
+import {requestUrl} from '@/util/request.js'
+export default {
+  data() {
+    return {
+      fileList: [
+      ],
+      filename: '',
+      url: requestUrl+"send_form"
+    };
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `您上传了 ${
+          files.length
+        } 张图片, 最多一次只能上传 ${files.length + fileList.length} 图片`
+      );
+    },
+    handleChange(file,fileList){
+      console.log(fileList)
+      this.fileList = fileList
+      this.filename = file.name
+      this.$emit('fileList',this.fileList);
+    }
+  },
+};
+</script>

frontend/src/views/static/components/upload/uploadCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>上传站姿图片</span>
+    </div>
+    <uploadForm @infor="infor"/>
+    <div id="upload-rules">
+      <p style="color:deepskyblue;font-weight: bold; font-size: 14px">上传规则</p>
+      <div v-for="item in rules" :key="item.index" class="rule">
+        <div>{{item.index}}. {{item.content}}</div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+/* .box-card {
+  width: 480px;
+} */
+.box-card {
+  margin-left: 10%;
+  margin-right: 10%;
+  height: 520px;
+  /* text-align: center; */
+}
+#upload-rules{
+  position: relative;
+  text-align: left;
+  width: 500px;
+}
+</style>
+<script>
+import uploadForm from "./uploadForm.vue";
+
+export default {
+  name: "uploadCard",
+  data() {
+    return {
+      rules: [
+        {"index":1,"content":"图片必须是.png或者.jpg的格式。"},
+        {"index":2,"content":"图片名称必须是front/right.png。"},
+        {"index":3,"content":"身高的单位为厘米。"},
+        {"index":4,"content":"一次只能上传一个人的两张姿势图片（包括正面和侧面）。"}
+      ],
+    };
+  },
+  components: {
+    uploadForm,
+  },
+  methods: {
+    infor(id) {
+      this.$emit("infor",id)
+    }
+  },
+};
+</script>

frontend/src/views/static/components/upload/uploadForm.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-form ref="form" :model="form" label-width="120px">
+    <div id="form-content">
+      <el-form-item label="站姿图片" class="image-container">
+        <imageUpload @fileList="getFileList" />
+      </el-form-item>
+
+      <el-form-item label="身高" id="height">
+        <el-input
+          type="text"
+          placeholder="请输入您的身高: (单位：厘米)"
+          autocomplete="off"
+          v-model="form.height"
+          size="small"
+          @input="getHeight"
+        ></el-input>
+      </el-form-item>
+    </div>
+    <el-form-item id="form-button-group">
+      <el-button
+        class="form-button"
+        type="primary"
+        size="small"
+        @click="onSubmit"
+        >上传</el-button
+      >
+      <el-button class="form-button" disabled size="small">取消</el-button>
+    </el-form-item>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <span>您的姿势分析 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>
+#form-content {
+  border: 1px solid lightgrey;
+  padding: 10px 10px 10px 10px;
+  border-radius: 5px;
+}
+.image-container {
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  height: 6rem;
+}
+#form-button-group {
+  margin-top: 5%;
+  margin-left: 50%;
+  /* margin-right: -5em; */
+  /* padding-right: -10px; */
+}
+</style>
+<script>
+import imageUpload from "./imageUpload.vue";
+import axios from "axios";
+import { requestUrl } from "@/util/request.js";
+export default {
+  mounted() {},
+  data() {
+    return {
+      form: {
+        fileList: [],
+        poseList: [{ name: "front" }, { name: "side" }],
+        displayFlag: false,
+      },
+      dialogVisible: false,
+      correction_id: 0,
+    };
+  },
+  components: {
+    imageUpload,
+  },
+  methods: {
+    getHeight(value) {
+      this.height = value;
+    },
+    getFileList(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);
+      });
+      axios.post(requestUrl + "send_form", data).then((response) => {
+        this.correction_id = response.data.id;
+        // this.dialogVisible = true;
+        console.log(response.data.id);
+        this.$emit("infor", response.data.id);
+        this.$message({
+          showClose: true,
+          message: "您的图片分析ID为: " + response.data.id,
+          type: "success",
+        });
+      });
+    },
+    handleClose(done) {
+      done();
+    },
+  },
+};
+</script>