update code
parent
f5ea130e2e
commit
2763e76ff5
|
|
@ -141,6 +141,18 @@ class MenuAPI {
|
|||
keepAlive: true,
|
||||
alwaysShow: false,
|
||||
},
|
||||
},{
|
||||
path: "taskDesc",
|
||||
component: "simulationEvaluation/taskDesc",
|
||||
name: "simulationEvaluationTaskDesc",
|
||||
meta: {
|
||||
title: "评估报告-查看",
|
||||
icon: "user",
|
||||
hidden: true,
|
||||
roles: ["ADMIN", "GUEST"],
|
||||
keepAlive: true,
|
||||
alwaysShow: false,
|
||||
},
|
||||
},{
|
||||
path: "addTask",
|
||||
component: "simulationEvaluation/addTask",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
<!-- 线 + 柱混合图 -->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height, width }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: "barChart1",
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
text: '运行时间对比图',
|
||||
textStyle:{
|
||||
fontSize:14
|
||||
},
|
||||
subtext:"单位:ms"
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["思源220", "昇腾560", "RTX4090", "ATI5800"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value} ",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "运行时间(单位:ms)",
|
||||
type: "bar",
|
||||
data: [100, 140, 230, 100],
|
||||
barWidth: 40,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#188df0" },
|
||||
{ offset: 0.5, color: "#188df0" },
|
||||
{ offset: 1, color: "#188df0" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const downloadEchart = () => {
|
||||
// 获取画布图表地址信息
|
||||
const img = new Image();
|
||||
img.src = chart.value.getDataURL({
|
||||
type: "png",
|
||||
pixelRatio: 1,
|
||||
backgroundColor: "#fff",
|
||||
});
|
||||
// 当图片加载完成后，生成 URL 并下载
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
||||
const link = document.createElement("a");
|
||||
link.download = `业绩柱状图.png`;
|
||||
link.href = canvas.toDataURL("image/png", 0.9);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const chart = ref<any>("");
|
||||
onMounted(() => {
|
||||
// 图表初始化
|
||||
chart.value = markRaw(
|
||||
echarts.init(document.getElementById(props.id) as HTMLDivElement)
|
||||
);
|
||||
|
||||
chart.value.setOption(options);
|
||||
|
||||
// 大小自适应
|
||||
window.addEventListener("resize", () => {
|
||||
chart.value.resize();
|
||||
});
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (chart.value) {
|
||||
chart.value.resize();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.download {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!-- 线 + 柱混合图 -->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height, width }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: "barChart2",
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "400px",
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const options = {
|
||||
title: {
|
||||
text: '推理精度对比图',
|
||||
textStyle:{
|
||||
fontSize:14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
valueFormatter:v=>v+"%",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: ["思源220", "昇腾560", "RTX4090", "ATI5800"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: "{value}%",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "推理精度",
|
||||
type: "bar",
|
||||
data: [60, 70, 80, 55],
|
||||
barWidth: 40,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter:"{c}%"
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#3DCEAA" },
|
||||
{ offset: 0.5, color: "#3DCEAA" },
|
||||
{ offset: 1, color: "#3DCEAA" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const downloadEchart = () => {
|
||||
// 获取画布图表地址信息
|
||||
const img = new Image();
|
||||
img.src = chart.value.getDataURL({
|
||||
type: "png",
|
||||
pixelRatio: 1,
|
||||
backgroundColor: "#fff",
|
||||
});
|
||||
// 当图片加载完成后，生成 URL 并下载
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
||||
const link = document.createElement("a");
|
||||
link.download = `业绩柱状图.png`;
|
||||
link.href = canvas.toDataURL("image/png", 0.9);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const chart = ref<any>("");
|
||||
onMounted(() => {
|
||||
// 图表初始化
|
||||
chart.value = markRaw(
|
||||
echarts.init(document.getElementById(props.id) as HTMLDivElement)
|
||||
);
|
||||
|
||||
chart.value.setOption(options);
|
||||
|
||||
// 大小自适应
|
||||
window.addEventListener("resize", () => {
|
||||
chart.value.resize();
|
||||
});
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (chart.value) {
|
||||
chart.value.resize();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.download {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,103 @@
|
|||
<template>
|
||||
<div class="app-container simulation-his-task-list">
|
||||
正在建设
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" style="flex-grow: 1;text-align: right;">
|
||||
<el-form-item label="" prop="keywords">
|
||||
<el-input v-model="queryParams.keywords" placeholder="请输入模型名称" clearable style="width: 250px"
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<i-ep-refresh />
|
||||
重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-table v-loading="loading" :data="tableData" stripe @selection-change="handleSelectionChange">
|
||||
<el-table-column label="任务名称" align="left" prop="taskName" />
|
||||
<el-table-column label="任务说明" align="left" prop="desc" />
|
||||
<el-table-column label="使用数据集" align="left" prop="dataSet" />
|
||||
<el-table-column label="运行模型" align="left" prop="model" width="120"/>
|
||||
<el-table-column label="模型网络" align="left" prop="netName" width="120"/>
|
||||
<el-table-column label="创建时间" align="left" prop="crTime" width="120"/>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="200">
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" size="small"
|
||||
@click="doShowDetail(scope.row)"><i-ep-view />查看报告</el-button>
|
||||
<el-button text type="primary" size="small"
|
||||
@click="doDelete(scope.row)"><i-ep-close-bold/>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="card-footer">
|
||||
<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
<script setup>
|
||||
const queryFormRef = ref(ElForm); // 查询表单
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keywords: '',
|
||||
});
|
||||
const total = ref(100); // 数据总数
|
||||
/** 查询 */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
ElMessage.success("查询成功");
|
||||
loading.value = false;
|
||||
|
||||
}
|
||||
let tableData=reactive([
|
||||
{id:"1",taskName:"模型名称模型名称模型名称1",desc:"进行10种类型 的目标分类模型查看",dataSet:"图像分类",model:"人脸模型",netName:"VIT",crTime:'2024-02-02'},
|
||||
{id:"2",taskName:"模型名称模型名称模型名称2",desc:"进行10种类型 的目标分类模型查看",dataSet:"图像分类",model:"人脸模型",netName:"VIT",crTime:'2024-02-02'},
|
||||
{id:"3",taskName:"模型名称模型名称模型名称3",desc:"进行10种类型 的目标分类模型查看",dataSet:"图像分类",model:"人脸模型",netName:"VIT",crTime:'2024-02-02'},
|
||||
{id:"4",taskName:"模型名称模型名称模型名称4",desc:"进行10种类型 的目标分类模型查看",dataSet:"图像分类",model:"人脸模型",netName:"VIT",crTime:'2024-02-02'},
|
||||
]);
|
||||
|
||||
const doDelete=(row)=>{
|
||||
ElMessageBox.confirm("确认删除?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
|
||||
let idx=tableData.indexOf(row);
|
||||
if(idx>=0){
|
||||
tableData.splice(idx,1);
|
||||
ElMessage.success("删除成功");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
const doShowDetail=row=>{
|
||||
router.replace({ path: "/simulationEvaluation/taskDesc",query:{...row} });
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='less'>
|
||||
<style lang='scss'>
|
||||
.simulation-his-task-list {
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
|
||||
.el-card__body {
|
||||
padding: 0px;
|
||||
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<el-button text type="primary" size="small"
|
||||
@click="doShowDetail(scope.row)"><i-ep-edit />查看模型</el-button>
|
||||
<el-button text type="primary" size="small"
|
||||
@click="doEdit('user-form', scope.row.id)"><i-ep-link/>编译部署</el-button>
|
||||
@click="doEdit(scope.row)"><i-ep-link/>编译部署</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div class="app-container simulation-his-task-desc">
|
||||
<el-card class="card-info">
|
||||
<template #header>
|
||||
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
|
||||
推理评估信息</template>
|
||||
<div class="tb-base-info">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span class="sp-title">任务名称:</span>
|
||||
<span class="sp-text">人员检测测四报告</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-title">任务说明:</span>
|
||||
<span class="sp-text">
|
||||
<el-popover placement="top-start" width="50%" trigger="hover"
|
||||
content="人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告">
|
||||
<template #reference>
|
||||
人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span class="sp-title">互联名称:</span>
|
||||
<span class="sp-text">人员检测测互联</span>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="sp-title">互联说明:</span>
|
||||
<span class="sp-text">
|
||||
<el-popover placement="top-start" width="50%" trigger="hover"
|
||||
content="人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告">
|
||||
<template #reference>
|
||||
人员检测测四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告四报告
|
||||
</template>
|
||||
</el-popover>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<table style="width:100%" class="tb-base-info">
|
||||
<tr>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">数据集:</span>
|
||||
<span class="sp-text">人员识别</span>
|
||||
</td>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">数据集标签:</span>
|
||||
<span class="sp-text">人员检测</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">运行模型:</span>
|
||||
<span class="sp-text">人员检测模型</span>
|
||||
</td>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">模型网络:</span>
|
||||
<span class="sp-text">VIT</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="cl-td" rowspan="2">
|
||||
<span class="sp-title">设备列表:</span>
|
||||
<span class="sp-text">
|
||||
<el-input v-model="devList" disabled type="textarea"
|
||||
style="width:calc(100% - 120px);vertical-align: top;" :rows="2" />
|
||||
</span>
|
||||
</td>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">推理开始时间:</span>
|
||||
<span class="sp-text">2024-06-0418:34:32</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cl-td">
|
||||
<span class="sp-title">报告生成时:</span>
|
||||
<span class="sp-text">2024-06-0418:34:32</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
</el-card>
|
||||
<el-card style="margin-top: 12px;margin-bottom: 100px;height: 450px;">
|
||||
<template #header>
|
||||
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
|
||||
报告图表</template>
|
||||
<el-row>
|
||||
<el-col :span="12" style="position: relative;display: flex;justify-content: center;">
|
||||
<BarChart1/>
|
||||
</el-col>
|
||||
<el-col :span="12" style="position: relative;display: flex;justify-content: center;">
|
||||
<BarChart2/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card-footer">
|
||||
<el-button type="primary" @click="doPrint">打印</el-button>
|
||||
<el-button type="primary" @click="doExport">导出</el-button>
|
||||
<el-button type="primary" @click="doDelete">删除</el-button>
|
||||
<el-button type="primary" @click="doBack">返回</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BarChart1 from './BarChart1.vue'
|
||||
import BarChart2 from './BarChart2.vue'
|
||||
const router = useRouter();
|
||||
let devList = ref("ST18-9\nRTX4080")
|
||||
const doBack = () => {
|
||||
router.replace({ path: "/simulationEvaluation/hisTaskList" })
|
||||
}
|
||||
const doPrint = () => {
|
||||
ElMessage.success("正在打印...");
|
||||
}
|
||||
const doExport = () => {
|
||||
ElMessage.success("正在导出...");
|
||||
}
|
||||
const doDelete = () => {
|
||||
ElMessageBox.confirm("确认删除?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(function () {
|
||||
|
||||
let idx = tableData.indexOf(row);
|
||||
if (idx >= 0) {
|
||||
tableData.splice(idx, 1);
|
||||
ElMessage.success("删除成功");
|
||||
setTimeout(() => {
|
||||
doPrint();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.simulation-his-task-desc {
|
||||
.el-card__header {
|
||||
padding: 8px 4px;
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-info{
|
||||
.el-card__body{
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.tb-base-info {
|
||||
line-height: 24px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
|
||||
&.sp-text {
|
||||
.el-only-child__content {
|
||||
width: calc(100% - 120px);
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
top:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cl-td{
|
||||
width:50%;
|
||||
min-width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue