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

新增页面和接口联调

Browse Source
This commit is contained in:
pengjunchao 2025-12-06 01:04:09 +08:00
parent b8be04c951
commit 06c5c5e82e
5 changed files with 164 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,7 @@
<div class="form-title">
<span class="title">BDT:</span>
<span class="clock">
<CountDownTimer :duration="3" @finished="onCountDownFinished" />
<!--<CountDownTimer :duration="3" @finished="onCountDownFinished" />-->
</span>
</div>
<div class="set-section">
@ -198,12 +198,12 @@
</template>
<script>
import CountDownTimer from '@/components/CountDownTimer/index.vue'
// import CountDownTimer from '@/components/CountDownTimer/index.vue'
export default {
components: {
CountDownTimer
},
// components: {
// CountDownTimer
// },
data() {
return {
queryParams: {
@ -279,7 +279,6 @@ export default {
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then((res) => {
debugger
if (res.case_no) {
this.caseNo = res.case_no
}
@ -301,25 +300,25 @@ 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/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) => {
if (index === 0) {
// this.chartData.xAxisData.push(item.start_time.substr(0, 10))
this.chartData.xAxisData.push(item.start_time)
if(item.model_type === 'CNN') {
if (item.end_time) {
clearInterval(this.timer)
}
this.chartData.xAxisData.push(new Date().toLocaleString().replaceAll('/', '-'))
this.chartData.seriesData.push((item.loss ? item.loss : 0))
}
// 下面的逻辑有问题，但是因为要改成一条线的折线图，所以暂时不改
this.chartData.seriesData.push({
name: item.model_type,
type: 'line',
data: [item.res_accu ? item.res_accu : 0, item.res_auc ? item.res_auc : 0, item.res_f1 ? item.res_f1 : 0, item.res_prec ? item.res_prec : 0, item.res_recall ? item.res_recall : 0],
})
})
this.myChart.setOption({
xAxis: {
data: this.chartData.xAxisData
},
series: this.chartData.seriesData
series: [
{
name: 'CNN',
type: 'line',
data: this.chartData.seriesData,
}
]
})
}, 3000)
},
@ -472,7 +471,13 @@ export default {
// // },
// },
// ],
series: this.chartData.seriesData
series: [
{
name: 'CNN',
type: 'line',
data: this.chartData.seriesData,
}
]
}
this.myChart.setOption(option)
},

16
src/views/chart/pages/Configure.vue
View File

@ -40,9 +40,9 @@
<el-table-column prop="xe133m_mdc" label="XE133M_MDC"></el-table-column>
<el-table-column prop="xe135_conc" label="XE135M_CONC"></el-table-column>
<el-table-column prop="xe135_mdc" label="XE135M_MDC"></el-table-column>
<el-table-column prop="type" label="TYPE">
<el-table-column prop="ev_type" label="TYPE">
<template #default="scope">
<el-input v-model="scope.row.type" class="dark-input"></el-input>
<el-input v-model="scope.row.ev_type" class="dark-input"></el-input>
</template>
</el-table-column>
</el-table>
@ -66,7 +66,8 @@ export default {
create_time_end: '',
},
tableData: [],
dateRage: []
dateRage: [],
typeData: {}
}
},
created () {
@ -87,8 +88,15 @@ export default {
this.queryParams.create_time_end = dates[1]
},
async onSave() {
const res = await this.$axios.post(window.CONFIG.baseUrl + '/wwwwwwwwwwwwwwwwwwwwwwwwwwww', this.tableData)
debugger
this.typeData = {}
this.tableData.forEach(item => {
if (item.ev_type) {
this.typeData[item.sample_id] = item.ev_type
}
})
const res = await this.$axios.post(window.CONFIG.baseUrl + '/nuclide/batch_mark_samples', this.typeData)
this.$message.info(res.message)
},
},
}

3
src/views/chart/pages/ConfigureChart.vue
View File

@ -65,7 +65,7 @@ export default {
methods: {
onSearch () {
this.loading = true
this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_latest_samples').then((res) => {
debugger
this.tableData = res.data.items
this.total = res.data.pagination.total_count
@ -98,6 +98,7 @@ export default {
this.queryParams.create_time_begin = dates[0]
this.queryParams.create_time_end = dates[1]
},
// 散点图
chart() {
this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = {

319
src/views/chart/pages/MonitorResult.vue
View File

@ -4,6 +4,36 @@
<div class="list-box">
<div class="filter-wrap">
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
<!--<el-form-item label="Activity reference time">
<el-date-picker v-model="queryParams.acquisition_start_begin" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
</el-form-item>
<el-form-item label="Concentration reference time">
<el-date-picker v-model="queryParams.acquisition_start_end" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
</el-form-item>-->
<el-form-item label="Dataset">
<el-select v-model="datasetId" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 120px" @change="getCaseData">
<el-option
v-for="item in datasetIdOptions"
:key="item.id"
:label="item.id"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Case">
<el-select v-model="queryParams.case_no" :disabled="!datasetId" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 180px" @change="caseChange">
<el-option
v-for="item in caseOptions"
:key="item.case_no"
:label="item.case_no"
:value="item.case_no"
>
</el-option>
</el-select>
</el-form-item>
<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-option
@ -15,47 +45,15 @@
</el-option>
</el-select>
</el-form-item>
<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-option
v-for="item in datasetIdOptions"
:key="item.id"
:label="item.id"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-button
type="primary"
style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
@click="onSearch"
>
<img src="@/assets/images/play.png" alt="" class="icon" />Start training
</el-button>
<el-button
type="primary"
style="background-color: #7393b7; border-color: #7393b7; border-radius: 0"
@click="onEnd"
>
<img src="@/assets/images/end.png" alt="" class="icon" />End training
</el-button>
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0; margin-left: 12px;" @click="onDownload">Select</el-button>
</el-form-item>
</el-form>
</div>
<div class="chart-wrap" :class="{'multiple': false}">
<!--<div class="chart-box">
<div class="chart-wrap">
<div ref="chartDom" style="width: 100%; height: 100%"></div>
</div>
<div class="chart-box">
<div ref="chartDom" style="width: 100%; height: 100%"></div>
</div>-->
<div class="chart-box">
<div ref="chartDom" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div>
</template>
@ -64,26 +62,15 @@
export default {
data() {
return {
queryParams: {
dataset_id: '',
model_types: ''
},
modelTypes: [],
loading: false,
datasetId: '',
datasetIdOptions: [],
form: {
Learning_rate: false,
Epochs: 0,
n_estimators: 0,
max_depth: 0,
MLP: 0,
Alpha: 0,
Power: 0,
Max_iter: 0,
Momentum: 0,
Beta_1: 0,
Beta_2: 0,
Verbose: 0,
Warm_start: 0
queryParams: {
page: 1,
size: 10,
case_no: '',
model_types: '',
file: '',
},
selectOptions: [
{
@ -107,19 +94,24 @@ export default {
label: 'RF',
},
],
caseNo: '',
timer: null,
caseOptions: [],
fileList: [],
modelTypes: [],
currentFile: null,
myChart: null,
chartData: {
xAxisData: [],
seriesData: []
},
myChart: null
outPath: ''
}
},
created() {},
created () {
// color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25']
// this.onSearch()
this.getDataset()
},
mounted() {
this.chart()
this.getDataset()
},
methods: {
getDataset() {
@ -127,82 +119,76 @@ export default {
this.datasetIdOptions = res.data.items
})
},
onSearch () {
this.loading = true
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then((res) => {
async getCaseData(datasetId) {
const res = await this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_cases', { params: { dataset_id: datasetId, model_type: '', case_no: '', page: 1, size: 100 } })
this.caseOptions = this.removeDuplicatesByMap(res.data.items)
},
removeDuplicatesByMap(arr) {
const map = new Map()
arr.forEach(item => {
if (!map.has(item.case_no)) {
map.set(item.case_no, item)
}
})
return Array.from(map.values())
},
caseChange(id) {
const arr = this.caseOptions.filter(item => item.case_no === id)
if(arr.length) {
this.outPath = arr[0].out_path
}
},
modelTypeChange(data) {
this.queryParams.model_types = data.join(',')
},
async onDownload() {
const arr = this.queryParams.model_types.split(',')
try {
const requests = arr.map(item => {
const url = this.outPath + '\\' + this.queryParams.case_no + '_' + item + '_ROC.json'
const path = url.replace(/\\/g, '/')
return this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: path } })
})
const responses = await Promise.all(requests)
responses.forEach(pItem => {
if (this.chartData.seriesData.length) {
this.chartData.seriesData.forEach(series => {
pItem.forEach(item => {
if (series.name === item.name) {
series.data = [...series.data, ...item.data]
}
})
})
} else {
const arr = [...pItem]
arr.forEach(item => {
item.type = 'line'
})
this.chartData.seriesData = arr
}
})
debugger
if (res.case_no) {
this.caseNo = res.case_no
}
this.queryModalProcess()
}).finally(() => {
this.loading = false
})
},
onEnd() {
clearInterval(this.timer)
},
queryModalProcess() {
this.timer = setInterval(async () => {
// 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 } })
res.data.items.forEach((item, index) => {
if (index === 0) {
// this.chartData.xAxisData.push(item.start_time.substr(0, 10))
this.chartData.xAxisData.push(item.start_time)
if (item.end_time) {
clearInterval(this.timer)
}
}
// if (this.chartData.seriesData && this.chartData.seriesData.length) {
// this.chartData.seriesData.push(
// {
// name: item.model_type,
// type: 'line',
// data: []
// }
// )
// } else {
// this.chartData.seriesData.push(
// {
// name: item.model_type,
// type: 'line',
// data: [item]
// }
// )
// }
this.chartData.seriesData.push({
name: item.model_type,
type: 'line',
data: [item.res_accu ? item.res_accu : 0, item.res_auc ? item.res_auc : 0, item.res_f1 ? item.res_f1 : 0, item.res_prec ? item.res_prec : 0, item.res_recall ? item.res_recall : 0],
})
})
this.myChart.setOption({
xAxis: {
data: this.chartData.xAxisData
},
series: this.chartData.seriesData
})
}, 3000)
} catch (error) {
console.error(error.message)
}
},
chart() {
this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = {
title: {
text: 'title',
textStyle: {
color: '#ffffff'
},
},
grid: {
left: 50,
left: 40,
right: 20,
bottom: 10,
top: 40,
top: 20,
containLabel: true,
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#273F4B',
@ -219,41 +205,15 @@ export default {
color: '#a2b4c9',
// rotate: 0
},
// data: [
// '2022-11-01',
// '2022-11-02',
// '2022-11-03',
// '2022-11-04',
// '2022-11-05',
// '2022-11-06',
// '2022-11-07',
// '2022-11-08',
// '2022-11-09',
// '2022-11-10',
// '2022-11-11',
// '2022-11-12',
// '2022-11-13',
// '2022-11-14',
// '2022-11-15',
// '2022-11-16',
// '2022-11-17',
// '2022-11-18',
// '2022-11-19',
// '2022-11-20',
// '2022-11-21',
// '2022-11-22',
// '2022-11-23',
// '2022-11-24',
// '2022-11-25',
// '2022-11-26',
// '2022-11-27',
// '2022-11-28',
// '2022-11-29',
// '2022-11-30',
// ],
data: this.chartData.xAxisData
splitLine: {
lineStyle: {
color: '#152029',
type: 'dashed',
},
},
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
@ -279,43 +239,14 @@ export default {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
type: 'shadow'
}
},
color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
series: [
{
name: 'MA5',
type: 'line',
data: [
23, 33, 34, 32, 44, 33, 46, 32, 44, 33, 46, 32, 44, 33, 67, 22, 44, 33, 46, 32, 34,
33, 46, 32, 8, 33, 46, 32, 44, 33,
],
},
{
name: 'MA4',
type: 'line',
data: [
44, 33, 46, 32, 44, 33, 44, 33, 46, 33, 44, 33, 46, 32, 44, 33, 46, 32, 44, 33, 46,
32, 44, 33, 46, 32, 44, 33, 46, 32,
],
},
{
name: 'MA3',
type: 'line',
data: [
46, 66, 44, 22, 46, 56, 44, 33, 46, 32, 44, 33, 65, 32, 44, 22, 46, 32, 44, 33, 33,
33, 46, 32, 44, 33, 34, 32, 44, 33,
],
},
],
// series: this.chartData.seriesData
series: []
}
this.myChart.setOption(option)
},
modelTypeChange(data) {
this.queryParams.model_types = data.join(',')
}
},
}
</script>
@ -350,20 +281,6 @@ export default {
}
.chart-wrap {
flex: 1;
display: flex;
flex-wrap: wrap;
&.multiple {
.chart-box {
flex: 0 0 50%;
box-sizing: border-box;
padding: 10px;
}
}
.chart-box {
flex: 1;
box-sizing: border-box;
padding: 10px;
}
}
}
}

14
src/views/chart/pages/Predict.vue
View File

@ -185,7 +185,8 @@ export default {
arr.forEach(item => {
const url = this.outPath + '\\' + this.queryParams.case_no + '_' + item + '_ROC.json'
const path = url.replace(/\\/g, '/')
this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: path }})
// this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: path }})
this.downloadFile(path, this.queryParams.case_no + '_' + item + '_ROC.json')
})
},
chart() {
@ -261,6 +262,17 @@ export default {
}
this.myChart.setOption(option)
},
downloadFile(url, filename) {
const link = document.createElement('a')
link.href = url
link.download = filename
link.style.display = 'none'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
},
}
</script>