新模块<蚕茧识别模块V2>发布

This commit is contained in:
BBIT-Kai
2025-11-10 18:06:29 +08:00
parent 7be4c70629
commit 12b459b717
14 changed files with 456 additions and 16 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

+1
View File
@@ -1,4 +1,5 @@
export * from './iva';
export * from './license';
export * from './sca';
export * from './sca2';
export * from './ticket';
+2 -2
View File
@@ -4,7 +4,7 @@ import { pyRequestClient } from '#/api/request';
* 获取已分析的图片列表
*/
export async function refreshLicenseImageList(page = 1, pageSize = 10) {
return pyRequestClient.get('/llm/getLicenseImageList', {
return pyRequestClient.get('/cv/getLicenseImageList', {
params: { page, page_size: pageSize },
});
}
@@ -13,7 +13,7 @@ export async function refreshLicenseImageList(page = 1, pageSize = 10) {
* 上传图片分析任务
*/
export async function createLicenseImageTask(formData: FormData) {
return pyRequestClient.post('/llm/createLicenseImageTask', formData, {
return pyRequestClient.post('/cv/createLicenseImageTask', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
+25
View File
@@ -0,0 +1,25 @@
import { pyRequestClient } from '#/api/request';
/**
* 获取已分析的图片列表
*/
export async function refreshImageListV2(name = '', page = 1, pageSize = 9) {
return pyRequestClient.get('/cv/getSilkwormCocoonAnalysisTasks', {
params: { name, page, page_size: pageSize },
});
}
/**
* 上传图片分析任务
*/
export async function createImageTaskV2(formData: FormData) {
return pyRequestClient.post(
'/cv/createSilkwormCocoonAnalysisTask',
formData,
{
headers: {
'Content-Type': 'multipart/form-data',
},
},
);
}
+2 -2
View File
@@ -4,14 +4,14 @@ import { pyRequestClient } from '#/api/request';
* 获取已分析的图片列表
*/
export async function refreshTicketImageList() {
return pyRequestClient.get('/llm/getTicketImageList');
return pyRequestClient.get('/cv/getTicketImageList');
}
/**
* 上传图片分析任务
*/
export async function createTicketImageTask(formData: FormData) {
return pyRequestClient.post('/llm/createTicketImageTaskV2', formData, {
return pyRequestClient.post('/cv/createTicketImageTaskV2', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
const baseAddress = '10.0.4.22';
const baseAddress = '10.10.12.101';
const routes: RouteRecordRaw[] = [
{
@@ -7,7 +7,7 @@ const routes: RouteRecordRaw[] = [
{
meta: {
icon: 'ic:round-remove-red-eye',
authority: ['iva', 'sca', 'ysa', 'ticket', 'license'],
authority: ['iva', 'sca', 'sca2', 'ysa', 'ticket', 'license'],
keepAlive: true,
order: 2,
title: $t('计算机视觉'),
@@ -37,6 +37,17 @@ const routes: RouteRecordRaw[] = [
},
component: () => import('#/views/cv/sca/index.vue'),
},
{
name: 'SCA2',
path: '/cv/sca2',
meta: {
authority: ['sca2'],
icon: 'mdi:ice-pop',
title: '蚕茧仪评分析V2',
keepAlive: false,
},
component: () => import('#/views/cv/sca2/index.vue'),
},
{
name: 'YSA',
path: '/cv/ysa',
@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
const baseAddress = '10.0.4.22';
const baseAddress = '10.10.12.101';
const routes: RouteRecordRaw[] = [
{
+6 -1
View File
@@ -353,7 +353,12 @@ function onListItemClick(video: any) {
<div class="flex w-64 flex-col border-r bg-white p-4">
<!-- 按钮组 -->
<div class="mb-4 flex justify-between space-x-2">
<Button type="primary" @click="createTask" class="flex-1">
<Button
type="primary"
@click="createTask"
class="flex-1"
:disabled="true"
>
新建任务
</Button>
<Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
@@ -13,9 +13,8 @@ const selectedItem = ref<any>(null);
async function loadList() {
error.value = null;
const res =
(await api.refreshLicenseImageList(page.value, pageSize.value)) || [];
list.value = res.items;
const res = await api.refreshLicenseImageList(page.value, pageSize.value);
list.value = res.items || [];
total.value = res.total;
}
@@ -97,7 +96,7 @@ function refreshLineChart() {
文件大小: `${data.size} MB`,
分辨率: data.resolution,
证件类型:
data.type === -1 ? '未知证件' : data.type === 0 ? '身份证' : '银行卡',
data.type === -1 ? '未知证件' : (data.type === 0 ? '身份证' : '银行卡'),
};
showInfoStr2.value = translateKeys(data.content, keyMap);
}
@@ -198,7 +197,6 @@ function handleFileChange(event: Event) {
</Form.Item>
</Form>
</Modal>
<BaseModal />
<div class="flex h-full w-full bg-gray-50">
<!-- 左侧筛选 + 列表 -->
<div class="flex w-64 flex-col border-r bg-white p-4">
@@ -1,7 +1,10 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Form, Input, message } from 'ant-design-vue';
import { createVideoTask } from '#/api/cv/iva';
const projectName = ref('');
+6 -2
View File
@@ -67,7 +67,6 @@ function refreshLineChart() {
最高置信度: data.max_confidence,
最低置信度: data.min_confidence,
平均置信度: data.average_confidence,
分析时长: data.processing_time,
};
renderEcharts1({
@@ -166,7 +165,12 @@ onActivated(() => {
<div class="flex w-64 flex-col border-r bg-white p-4">
<!-- 按钮组 -->
<div class="mb-4 flex justify-between space-x-2">
<Button type="primary" @click="createTask" class="flex-1">
<Button
type="primary"
@click="createTask"
class="flex-1"
:disabled="true"
>
新建任务
</Button>
<Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
@@ -0,0 +1,386 @@
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
import {
computed,
onActivated,
onDeactivated,
onMounted,
ref,
watch,
} from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { Button, Form, Input, message } from 'ant-design-vue';
import * as api from '#/api';
import { createImageTaskV2 } from '#/api';
const list = ref<any[]>([]);
const error = ref<null | string>(null);
const filterKeyword = ref('');
const selectedItem = ref<any>(null);
async function loadList() {
error.value = null;
const res = await api.refreshImageListV2(
filterKeyword.value,
page.value,
pageSize.value,
);
list.value = res.items || [];
total.value = res.total;
}
function refreshList() {
filterKeyword.value = '';
loadList();
message.success('列表加载完成');
}
function createTask() {
modalApi.open();
}
async function selectItem(item: any) {
selectedItem.value = item;
refreshLineChart();
}
// 监听关键词变化,调用防抖接口
watch(filterKeyword, () => {
loadList();
});
watch(selectedItem, () => {});
onMounted(() => {
loadList();
});
const showInfoStr = ref<Record<string, number | string>>({});
const chartRef1 = ref<EchartsUIType>();
const { renderEcharts: renderEcharts1 } = useEcharts(chartRef1);
const chartRef2 = ref<EchartsUIType>();
const { renderEcharts: renderEcharts2 } = useEcharts(chartRef2);
function refreshLineChart() {
const data = selectedItem.value;
showInfoStr.value = {
项目名: data.name,
项目上传时间: data.upload_datetime,
文件名: data.file_name,
文件大小: `${data.size} MB`,
分辨率: data.resolution,
最高置信度: data.max_confidence,
最低置信度: data.min_confidence,
平均置信度: data.average_confidence,
预处理时间: `${data.preprocess_time_ms} ms`,
推理时间: `${data.inference_time_ms} ms`,
后处理时间: `${data.postprocess_time_ms} ms`,
};
renderEcharts1({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: Object.keys(data.other_info),
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '数量',
type: 'bar',
barWidth: '30%',
data: Object.values(data.other_info).map(Number),
},
],
});
renderEcharts2({
legend: { top: '5%', left: 'center' },
series: [
{
animationDelay() {
return Math.random() * 100;
},
animationEasing: 'exponentialInOut',
animationType: 'scale',
avoidLabelOverlap: false,
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
data: Object.entries(data.other_info).map(([key, val]) => ({
name: key,
value: Number(val),
})),
itemStyle: {
borderRadius: 10,
borderWidth: 3,
},
label: {
position: 'center',
show: false,
},
labelLine: {
show: false,
},
padAngle: 5,
name: '蚕茧分类',
radius: ['10%', '70%'],
type: 'pie',
},
],
tooltip: {
trigger: 'item',
},
});
}
onDeactivated(() => {
// 离开路由时清理状态
selectedItem.value = null;
showInfoStr.value = {};
});
onActivated(() => {
// 回来的时候重新刷新一次列表
loadList();
});
const projectName = ref('');
const fileName = ref('');
const selectedFile = ref<File | null>(null);
const fileInputRef = ref<HTMLInputElement | null>(null);
const [Modal, modalApi] = useVbenModal({
title: '新建蚕茧分析任务',
class: 'w-[600px]',
onCancel() {
modalApi.close();
},
onConfirm() {
if (!selectedFile.value) {
message.warning('请选择蚕茧图片');
return;
}
uploadFile();
},
});
async function uploadFile() {
// 先关闭弹窗
modalApi.close();
const formData = new FormData();
formData.append('file', selectedFile.value!);
formData.append('projectName', projectName.value);
await createImageTaskV2(formData).then(() => {
// 清空表单
projectName.value = '';
fileName.value = '';
selectedFile.value = null;
});
// 接口完成后再触发事件
message.success('分析完成');
loadList();
}
function selectFile() {
fileInputRef.value?.click();
}
function handleFileChange(event: Event) {
const files = (event.target as HTMLInputElement).files;
if (files && files.length > 0) {
selectedFile.value = files[0];
fileName.value = files[0].name;
}
}
// 分页参数
const page = ref(1);
const pageSize = ref(9);
const total = ref(0); // 总条数
// 计算总页数
const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
function changePage(newPage) {
page.value = newPage;
loadList();
}
</script>
<template>
<div class="flex h-[90dvh] w-full flex-col">
<Modal>
<Form layout="vertical">
<Form.Item label="任务名称">
<Input v-model:value="projectName" />
</Form.Item>
<Form.Item label="上传蚕茧图片*" required>
<div
@click="selectFile"
style="
padding: 16px;
text-align: center;
cursor: pointer;
border: 1px dashed #d9d9d9;
"
>
{{ fileName || '点击选择文件' }}
<input
type="file"
accept="image/*"
ref="fileInputRef"
@change="handleFileChange"
style="display: none"
/>
</div>
</Form.Item>
</Form>
</Modal>
<div class="flex h-full w-full bg-gray-50">
<!-- 左侧筛选 + 列表 -->
<div class="flex w-64 flex-col border-r bg-white p-4">
<!-- 按钮组 -->
<div class="mb-4 flex justify-between space-x-2">
<Button type="primary" @click="createTask" class="flex-1">
新建任务
</Button>
<Button @click="refreshList" class="flex-1"> 刷新列表 </Button>
</div>
<!-- 筛选框 -->
<input
v-model="filterKeyword"
placeholder="筛选分析任务"
class="focus:ring-primary mb-4 rounded-md border px-3 py-2 focus:outline-none focus:ring-2"
/>
<!-- 列表 -->
<div class="flex-1 space-y-2 overflow-auto">
<div
v-for="item in list"
:key="item.v_id"
@click="selectItem(item)"
class="cursor-pointer rounded border p-3 hover:bg-gray-100"
:class="{ 'bg-gray-100': item.id === selectedItem?.id }"
>
<div class="text-base font-medium">{{ item.name }}</div>
<div class="text-sm text-gray-400">{{ item.upload_datetime }}</div>
</div>
</div>
<!-- 分页 -->
<div class="mt-2 flex justify-center space-x-2">
<button
:disabled="page === 1"
@click="changePage(page - 1)"
class="rounded border px-1"
>
上一页
</button>
<span> {{ page }} / {{ totalPages }} </span>
<button
:disabled="page === totalPages"
@click="changePage(page + 1)"
class="rounded border px-1"
>
下一页
</button>
</div>
</div>
<!-- 右侧Tab 内容区 -->
<div class="flex flex-1 flex-col overflow-hidden p-6">
<div
v-if="!selectedItem"
class="flex h-full items-center justify-center text-gray-400"
>
请先选择左侧列表中的分析任务
</div>
<template v-else>
<div class="flex h-full flex-col gap-4">
<!-- 主内容区域左右结构 -->
<div class="flex flex-1 gap-4">
<!-- 左侧 -->
<div class="flex w-72 flex-col gap-4">
<!-- 视频基础信息展示 -->
<div
class="w-full rounded border bg-white p-4"
id="video_base_info"
>
<div
v-for="(value, key) in showInfoStr"
:key="key"
class="mb-2 flex text-sm text-gray-700"
>
<div class="w-32 font-medium text-gray-900">
{{ key }}
</div>
<div class="flex-1 break-all text-gray-600">
{{ value || '—' }}
</div>
</div>
</div>
<!-- 空白卡片 -->
<div class="flex-1 rounded border bg-white p-4">
<EchartsUI ref="chartRef2" />
</div>
</div>
<!-- 右侧 -->
<div class="flex flex-1 flex-col gap-4">
<!-- 左右两个图片显示 -->
<div class="flex flex-1 gap-4">
<!-- 左图 -->
<div
class="flex flex-1 items-center justify-center rounded border bg-white p-4"
>
<img
:src="selectedItem?.image_pre"
alt=""
class="h-[30dvh] w-full object-contain"
/>
</div>
<!-- 右图 -->
<div
class="flex flex-1 items-center justify-center rounded border bg-white p-4"
>
<img
:src="selectedItem?.image_after"
alt=""
class="h-[30dvh] w-full object-contain"
/>
</div>
</div>
<!-- 柱状图区域 -->
<div class="flex-1 rounded border bg-white p-4">
<EchartsUI ref="chartRef1" />
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
@@ -29,6 +29,13 @@ const cv: WorkbenchQuickNavItem[] = [
title: '蚕茧仪评分析',
url: '/cv/sca',
},
{
color: '#3fb27f',
authority: ['sca2'],
icon: 'mdi:ice-pop',
title: '蚕茧仪评分析V2',
url: '/cv/sca2',
},
{
color: '#3fb27f',
authority: ['ysa'],
@@ -55,7 +62,7 @@ const cv: WorkbenchQuickNavItem[] = [
icon: 'ion:bar-chart-outline',
title: '标注平台入口',
authority: ['user'],
url: 'http://171.212.101.199:13013/',
url: 'https://ai.ronsunny.cn:8094/',
},
];
const llm: WorkbenchQuickNavItem[] = [