From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001 From: baoshiwei <baoshiwei@shlanbao.cn> Date: 星期一, 27 五月 2024 16:19:31 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/dry/identify/index.vue | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 170 insertions(+), 0 deletions(-) diff --git a/src/views/dry/identify/index.vue b/src/views/dry/identify/index.vue new file mode 100644 index 0000000..86e08b6 --- /dev/null +++ b/src/views/dry/identify/index.vue @@ -0,0 +1,170 @@ +<template> + <div> + <div class="app"> + <a-spin :spinning="spinning" > + <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> + </a-spin> + </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 spinning = ref(false) +const columns = [ + { + title: '鑽潗', + dataIndex: 'name', + key: 'name', + }, + { + title: '鑻辨枃鍚�', + dataIndex: 'english', + key: 'english', + }, + { + title: '鍙俊搴�', + dataIndex: 'probabily', + key: 'probabily', + }, +] +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} 璇嗗埆鎴愬姛锛侊紒`); + console.log("done",info.file.response.result) + results.value = info.file.response.result + spinning.value = false + } else if (status === 'error') { + message.error(`${info.file.name} 璇嗗埆澶辫触锛侊紒`); + } +}; +function handleDrop(e: DragEvent) { + console.log(e); +} + +function beforeUpload(file) { + console.log("before",file) + spinning.value = true + 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> -- Gitblit v1.9.3