GY/AttributioClassification
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

训练界面的折线图增加图头（LOSS）

Browse Source
This commit is contained in:
wangchengming 2025-12-12 15:13:25 +08:00
parent 16cb03a27e
commit 36f58ddab8
1 changed files with 59 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/chart/pages/Calculation.vue
View File

@ -41,41 +41,27 @@
</el-form-item>--> </el-form-item>-->
<el-form-item label="Classify"> <el-form-item label="Classify">
<el-select v-model="modelTypes" multiple placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 400px" @change="modelTypeChange"> <el-select v-model="modelTypes" multiple placeholder="请选择" class="dark-select"
<el-option popper-class="dark-select-popper" style="width: 400px" @change="modelTypeChange">
v-for="item in selectOptions" <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="Dataset"> <el-form-item label="Dataset">
<el-select v-model="queryParams.dataset_id" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 120px"> <el-select v-model="queryParams.dataset_id" placeholder="请选择" class="dark-select"
<el-option popper-class="dark-select-popper" style="width: 120px">
v-for="item in datasetIdOptions" <el-option v-for="item in datasetIdOptions" :key="item.id" :label="item.id" :value="item.id">
:key="item.id"
:label="item.id"
:value="item.id"
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
<el-button <el-button type="primary" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
type="primary" @click="onSearch">
style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
@click="onSearch"
>
<img src="@/assets/images/play.png" alt="" class="icon" />Start training <img src="@/assets/images/play.png" alt="" class="icon" />Start training
</el-button> </el-button>
<el-button <el-button type="primary" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
type="primary" @click="onEnd">
style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
@click="onEnd"
>
<img src="@/assets/images/end.png" alt="" class="icon" />End training <img src="@/assets/images/end.png" alt="" class="icon" />End training
</el-button> </el-button>
</el-form-item> </el-form-item>
@ -92,92 +78,49 @@
<div class="left-set"> <div class="left-set">
<el-form :inline="true" :model="form" class="form-item-block"> <el-form :inline="true" :model="form" class="form-item-block">
<el-form-item label="Learning_rate:"> <el-form-item label="Learning_rate:">
<el-input-number <el-input-number v-model="form.Learning_rate" :controls="false" class="dark-input-number"
v-model="form.Learning_rate" :precision="3"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="3"
></el-input-number>
</el-form-item> </el-form-item>
<template v-if="form.select === 'CNN'"> <template v-if="form.select === 'CNN'">
<el-form-item label="Epochs:"> <el-form-item label="Epochs:">
<el-input-number <el-input-number v-model="form.Epochs" :controls="false" class="dark-input-number"
v-model="form.Epochs" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
</template> </template>
<template v-if="form.select === 'BDT'"> <template v-if="form.select === 'BDT'">
<el-form-item label="n_estimators:"> <el-form-item label="n_estimators:">
<el-input-number <el-input-number v-model="form.n_estimators" :controls="false"
v-model="form.n_estimators" class="dark-input-number"></el-input-number>
:controls="false"
class="dark-input-number"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="max_depth:"> <el-form-item label="max_depth:">
<el-input-number <el-input-number v-model="form.max_depth" :controls="false" class="dark-input-number"
v-model="form.max_depth" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="MLP:"> <el-form-item label="MLP:">
<el-input-number <el-input-number v-model="form.MLP" :controls="false" class="dark-input-number"
v-model="form.MLP" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Alpha:"> <el-form-item label="Alpha:">
<el-input-number <el-input-number v-model="form.Alpha" :controls="false" class="dark-input-number"
v-model="form.Alpha" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Power:"> <el-form-item label="Power:">
<el-input-number <el-input-number v-model="form.Power" :controls="false" class="dark-input-number"
v-model="form.Power" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Max_iter:"> <el-form-item label="Max_iter:">
<el-input-number <el-input-number v-model="form.Max_iter" :controls="false" class="dark-input-number"
v-model="form.Max_iter" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Momentum:"> <el-form-item label="Momentum:">
<el-input-number <el-input-number v-model="form.Momentum" :controls="false" class="dark-input-number"
v-model="form.Momentum" :precision="1"></el-input-number>
:controls="false"
class="dark-input-number"
:precision="1"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Beta_1:"> <el-form-item label="Beta_1:">
<el-input-number <el-input-number v-model="form.Beta_1" :controls="false" class="dark-input-number"></el-input-number>
v-model="form.Beta_1"
:controls="false"
class="dark-input-number"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Beta_2:"> <el-form-item label="Beta_2:">
<el-input-number <el-input-number v-model="form.Beta_2" :controls="false" class="dark-input-number"></el-input-number>
v-model="form.Beta_2"
:controls="false"
class="dark-input-number"
></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="Verbose:"> <el-form-item label="Verbose:">
<el-input v-model="form.Verbose" class="dark-input" readonly></el-input> <el-input v-model="form.Verbose" class="dark-input" readonly></el-input>
@ -258,7 +201,7 @@ export default {
myChart: null myChart: null
} }
}, },
created() {}, created() { },
mounted() { mounted() {
this.chart() this.chart()
this.getDataset() this.getDataset()
@ -269,8 +212,8 @@ export default {
this.datasetIdOptions = res.data.items this.datasetIdOptions = res.data.items
}) })
}, },
onSearch () { onSearch() {
if(this.myChart) { if (this.myChart) {
this.myChart.dispose() this.myChart.dispose()
this.chart() this.chart()
} }
@ -292,7 +235,7 @@ export default {
}, },
// 获取训练用时时间 // 获取训练用时时间
async getTrainingTime() { async getTrainingTime() {
const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_training_time', { params: { dataset_id: this.queryParams.dataset_id, model_type: this.queryParams.model_types }}) const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_training_time', { params: { dataset_id: this.queryParams.dataset_id, model_type: this.queryParams.model_types } })
debugger debugger
}, },
queryModalProcess() { queryModalProcess() {
@ -300,7 +243,7 @@ export default {
// const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/get_available_models', { params: { case_no: this.caseNo } }) // const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/get_available_models', { params: { case_no: this.caseNo } })
const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_cases', { params: { /*dataset_id: this.queryParams.dataset_id, model_type: this.queryParams.model_types,*/ case_no: this.caseNo, page: 1, size: 30 } }) const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_cases', { params: { /*dataset_id: this.queryParams.dataset_id, model_type: this.queryParams.model_types,*/ case_no: this.caseNo, page: 1, size: 30 } })
res.data.items.forEach((item, index) => { res.data.items.forEach((item, index) => {
if(item.model_type === 'CNN') { if (item.model_type === 'CNN') {
if (item.end_time) { if (item.end_time) {
clearInterval(this.timer) clearInterval(this.timer)
} }
@ -325,6 +268,13 @@ export default {
chart() { chart() {
this.myChart = this.$echarts.init(this.$refs.chartDom) this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = { const option = {
title: {
left: 'center',
text: 'LOSS',
textStyle: {
color: '#ffffff' // 可选：字体粗细
}
},
grid: { grid: {
left: 60, left: 60,
right: 20, right: 20,
@ -484,7 +434,7 @@ export default {
modelTypeChange(data) { modelTypeChange(data) {
this.queryParams.model_types = data.join(',') this.queryParams.model_types = data.join(',')
}, },
onCountDownFinished() {}, onCountDownFinished() { },
}, },
} }
</script> </script>
@ -496,6 +446,7 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.section-head { .section-head {
width: 100%; width: 100%;
height: 32px; height: 32px;
@ -506,27 +457,33 @@ export default {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.list-box { .list-box {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.filter-wrap { .filter-wrap {
margin-top: 16px; margin-top: 16px;
.icon { .icon {
margin-right: 8px; margin-right: 8px;
} }
::v-deep .el-form-item__label { ::v-deep .el-form-item__label {
font-size: 16px; font-size: 16px;
color: #a7bacf; color: #a7bacf;
} }
} }
.dark-table { .dark-table {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.form-title { .form-title {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
@ -534,31 +491,39 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.title {} .title {}
.clock {} .clock {}
} }
.set-section { .set-section {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
.left-set { .left-set {
width: 276px; width: 276px;
padding: 16px 10px; padding: 16px 10px;
background-color: #0d151d; background-color: #0d151d;
.form-item-block { .form-item-block {
&::v-deep.el-form { &::v-deep.el-form {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.el-form-item { .el-form-item {
margin-right: 0; margin-right: 0;
display: flex; display: flex;
.el-form-item__label { .el-form-item__label {
flex: 1; flex: 1;
justify-content: left; justify-content: left;
font-size: 15px; font-size: 15px;
color: #a7bacf; color: #a7bacf;
} }
.el-form-item__content { .el-form-item__content {
width: 160px; width: 160px;
} }
@ -566,6 +531,7 @@ export default {
} }
} }
} }
.right-chart { .right-chart {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;