app-AgricultureSmart/vue/src/views/manager/AI/PestAnalysis.vue

<template>

  <div class="container">

    <div class="result-container">
<!--      <span style="width: 400px;height: 300px">自定义</span>-->
      <el-skeleton style="width:600px;height: 300px" :loading="isLoading" animated>
        <template slot="template">
          <el-skeleton-item
              variant="image"
              style="width: 600px; height: 300px;"
          />
<!--          <div style="padding: 14px;">-->
<!--            <el-skeleton-item variant="h3" style="width: 50%;" />-->
<!--            <div-->
<!--                style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"-->
<!--            >-->
<!--              <el-skeleton-item variant="text" style="margin-right: 16px;" />-->
<!--              <el-skeleton-item variant="text" style="width: 30%;" />-->
<!--            </div>-->
<!--          </div>-->
        </template>
        <template>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
            <img
                :src="resPic"
                class="image"
                width="auto"
                height="300px"
            />
            <div style="padding: 14px;">
              <span>检测结果</span>

            </div>
          </el-card>
        </template>
      </el-skeleton>

<!--      <el-card style="width: 700px;height: 300px">-->
<!--&lt;!&ndash;      &ndash;&gt;-->
<!--      <el-image  :src="resPic" v-if="resPic!=null">-->
<!--        <div slot="placeholder" class="image-slot">-->
<!--          加载结果<span class="dot">...</span>-->
<!--        </div>-->
<!--      </el-image>-->
<!--    </el-card>-->
    </div>

    <div class="upload-container">
      <el-upload
          class="avatar-uploader"
          :action="$baseUrl + '/files/upload'"
          :headers="{ token: user.token }"
          list-type="picture"
          :on-success="handleUploadSuccess"
      >
        <el-button type="primary">上传商品害虫图片</el-button>
      </el-upload>
    </div>


  </div>

</template>

<script>

export default {
  name: "PestAnalysis",
  data() {
    return {
      user :JSON.parse(localStorage.getItem('xm-user') || '{}'),
      uploadResult: null,
      returnResult: null,
      flaskBaseUrl: '', // Flask地址
      resPic:null,
      isLoading:false,
    };
  },
  methods: {
    handleUploadSuccess(file) {
      this.isLoading = true;
      setTimeout(()=>{
        this.resPic = require("/src/assets/imgs/query_result.png")
        this.isLoading = false; // 加载完成
      },2000)
      var fileReader = new FileReader();
      return file
    },
    uploadImg(){

    },
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/imgs/bg.jpg");
  background-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
}

.upload-container, .result-container {
  text-align: center;
  margin-top: 50px;

}

.result-container {
  margin-top: 20px; /* 调整上方间距 */
}
</style>