增加药材智能识别界面

bsw215583320

2023-12-20 275159e04e6aaf5b487c726550a2c95afad509bf

增加药材智能识别界面

 src/views/dry/identify/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,161 @@
<template>
  <div>
    <div class="app">
      <div class="dragger">
        <a-upload-dragger
    v-model:fileList="fileList"
    name="file"
    accept="image/png, image/jpeg"
    :multiple="false"
    action="/herb/dry/real/identify"
    :beforeUpload="beforeUpload"
    @change="handleChange"
    @drop="handleDrop"
  >
    <p class="ant-upload-drag-icon">
      <inbox-outlined></inbox-outlined>
    </p>
    <p class="ant-upload-text">点击选择图片，或将图片拖到此区域内上传</p>
    <p class="ant-upload-hint">
      ä»…支持单个图片
    </p>
  </a-upload-dragger>

      </div>

      <div class="card">


        <a-row :gutter="10" style="width: 100%;">
          <a-col :span="12">
        <div >
          <a-card title="识别图像" >
            <div class="img">
              <div v-if="previewUrl" style="display: flex; justify-content: center;">
              <!-- <a-image
                :width="200"
                :src="previewUrl"
              /> -->
              <img :src="previewUrl" alt="预览图片" style="max-height: 500px; max-width: 100%;" />
            </div>
            </div>


          </a-card>
        </div>
      </a-col>
      <a-col :span="12">
        <div >
          <a-card title="识别结果">
            <div class="res">
              <a-table :columns="columns" :data-source="results" :pagination="false">
                </a-table>
            </div>
            </a-card>
          </div>
        </a-col>
        </a-row>
      </div>
     
    </div>
  </div>


</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
const fileList = ref([]);
const previewUrl = ref()
const results = ref([])
const columns = [
  {
    title: '品种',
    dataIndex: 'className',
    key: 'className',
  },
  {
    title: '可信度',
    dataIndex: 'probability',
    key: 'probability',
  },
]
const handleChange = (info: UploadChangeParam) => {
 // console.log("图片",info.file);
  // let reader = new FileReader()
  //       reader.readAsDataURL(info.file.originFileObj) // æ–‡ä»¶è½¬æ¢
  //       reader.onloadend = function () {
  //         let src = this.result

  //         console.log("src::", src)

  //       }

  const status = info.file.status;
  if (status !== 'uploading') {
    console.log(info.file, info.fileList);
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`);
    console.log("done",info.file.response.result)
    results.value = info.file.response.result
  } else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`);
  }
};
function handleDrop(e: DragEvent) {
  console.log(e);
}

function beforeUpload(file) {
  console.log("before",file)
  previewUrl.value =  URL.createObjectURL(file)

  console.log("pre",previewUrl.value)
}





// DOM挂载完成后渲染图表
onMounted(() => {
  

});

onUnmounted(() => {

});
</script>

<style lang="less" scoped>
.app {
  width: 100%;


  .dragger {
    margin:10px;
    height: 200px;
    background-color: white; 
  }

  .card {
    margin-left: 10px;
    display: flex;
    .img {
      height: 500px;
    }
    .res {
      height: 500px;
    }
  }
}




</style>