From 275159e04e6aaf5b487c726550a2c95afad509bf Mon Sep 17 00:00:00 2001
From: bsw215583320 <baoshiwei121@163.com>
Date: 星期三, 20 十二月 2023 16:04:50 +0800
Subject: [PATCH] 增加药材智能识别界面
---
src/views/dry/identify/index.vue | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 161 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..e8ccc73
--- /dev/null
+++ b/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>
--
Gitblit v1.9.3