新增功能
This commit is contained in:
pengjunchao
parent
4848f892c5
commit
4f8d0f43cf
|
|
@ -212,7 +212,8 @@
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
<script>
|
<script>
|
||||||
window.CONFIG = {
|
window.CONFIG = {
|
||||||
baseUrl: 'http://www.jiatq.com:10009'
|
baseUrl: 'http://www.jiatq.com:10009',
|
||||||
|
userBaseUrl: 'http://qc2c966e.natappfree.cc/prod-api',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,9 @@ body, #app {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-table__empty-block {
|
||||||
|
background-color: #1C2630;
|
||||||
|
}
|
||||||
.el-table__body {
|
.el-table__body {
|
||||||
tr {
|
tr {
|
||||||
color: #a7bacf;
|
color: #a7bacf;
|
||||||
|
|
|
||||||
|
|
@ -222,6 +222,30 @@ const usePermissionStore = defineStore(
|
||||||
"link": null
|
"link": null
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Predict",
|
||||||
|
"path": "Predict",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "chart/pages/Predict",
|
||||||
|
"meta": {
|
||||||
|
"title": "Predict",
|
||||||
|
"icon": "log",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ConfigureChart",
|
||||||
|
"path": "ConfigureChart",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "chart/pages/ConfigureChart",
|
||||||
|
"meta": {
|
||||||
|
"title": "ConfigureChart",
|
||||||
|
"icon": "log",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
},
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -97,6 +97,16 @@ export default {
|
||||||
name: 'Monitor the training process',
|
name: 'Monitor the training process',
|
||||||
url: '/system/chart/Calculation',
|
url: '/system/chart/Calculation',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: '24',
|
||||||
|
name: 'Config chart',
|
||||||
|
url: '/system/chart/ConfigureChart',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '23',
|
||||||
|
name: 'Predict',
|
||||||
|
url: '/system/chart/Predict',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: '4',
|
id: '4',
|
||||||
name: 'Analyze',
|
name: 'Analyze',
|
||||||
|
|
|
||||||
|
|
@ -225,13 +225,31 @@ export default {
|
||||||
value: 'BDT',
|
value: 'BDT',
|
||||||
label: 'BDT',
|
label: 'BDT',
|
||||||
},
|
},
|
||||||
]
|
{
|
||||||
|
value: 'SVM',
|
||||||
|
label: 'SVM',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'MLP',
|
||||||
|
label: 'MLP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'RF',
|
||||||
|
label: 'RF',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
caseNo: '',
|
||||||
|
timer: null,
|
||||||
|
chartData: {
|
||||||
|
xAxisData: [],
|
||||||
|
seriesData: []
|
||||||
|
},
|
||||||
|
myChart: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.chart()
|
this.chart()
|
||||||
this.onSearch()
|
|
||||||
this.getDataset()
|
this.getDataset()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -245,14 +263,41 @@ export default {
|
||||||
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
|
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
|
||||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
this.tableData = res.data.items
|
debugger
|
||||||
this.total = res.data.pagination.total_count
|
if (res.case_no) {
|
||||||
|
this.caseNo = res.case_no
|
||||||
|
}
|
||||||
|
this.queryModalProcess()
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
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 } })
|
||||||
|
debugger
|
||||||
|
res.data.items.forEach((item, index) => {
|
||||||
|
debugger
|
||||||
|
if (index === 0) {
|
||||||
|
this.chartData.xAxisData.push(item.start_time.substr(0, 10))
|
||||||
|
}
|
||||||
|
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)
|
||||||
|
},
|
||||||
chart() {
|
chart() {
|
||||||
const myChart = this.$echarts.init(this.$refs.chartDom)
|
this.myChart = this.$echarts.init(this.$refs.chartDom)
|
||||||
const option = {
|
const option = {
|
||||||
grid: {
|
grid: {
|
||||||
left: 60,
|
left: 60,
|
||||||
|
|
@ -276,38 +321,39 @@ export default {
|
||||||
color: '#a2b4c9',
|
color: '#a2b4c9',
|
||||||
// rotate: 0
|
// rotate: 0
|
||||||
},
|
},
|
||||||
data: [
|
// data: [
|
||||||
'2022-11-01',
|
// '2022-11-01',
|
||||||
'2022-11-02',
|
// '2022-11-02',
|
||||||
'2022-11-03',
|
// '2022-11-03',
|
||||||
'2022-11-04',
|
// '2022-11-04',
|
||||||
'2022-11-05',
|
// '2022-11-05',
|
||||||
'2022-11-06',
|
// '2022-11-06',
|
||||||
'2022-11-07',
|
// '2022-11-07',
|
||||||
'2022-11-08',
|
// '2022-11-08',
|
||||||
'2022-11-09',
|
// '2022-11-09',
|
||||||
'2022-11-10',
|
// '2022-11-10',
|
||||||
'2022-11-11',
|
// '2022-11-11',
|
||||||
'2022-11-12',
|
// '2022-11-12',
|
||||||
'2022-11-13',
|
// '2022-11-13',
|
||||||
'2022-11-14',
|
// '2022-11-14',
|
||||||
'2022-11-15',
|
// '2022-11-15',
|
||||||
'2022-11-16',
|
// '2022-11-16',
|
||||||
'2022-11-17',
|
// '2022-11-17',
|
||||||
'2022-11-18',
|
// '2022-11-18',
|
||||||
'2022-11-19',
|
// '2022-11-19',
|
||||||
'2022-11-20',
|
// '2022-11-20',
|
||||||
'2022-11-21',
|
// '2022-11-21',
|
||||||
'2022-11-22',
|
// '2022-11-22',
|
||||||
'2022-11-23',
|
// '2022-11-23',
|
||||||
'2022-11-24',
|
// '2022-11-24',
|
||||||
'2022-11-25',
|
// '2022-11-25',
|
||||||
'2022-11-26',
|
// '2022-11-26',
|
||||||
'2022-11-27',
|
// '2022-11-27',
|
||||||
'2022-11-28',
|
// '2022-11-28',
|
||||||
'2022-11-29',
|
// '2022-11-29',
|
||||||
'2022-11-30',
|
// '2022-11-30',
|
||||||
],
|
// ],
|
||||||
|
data: this.chartData.xAxisData
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
|
@ -337,69 +383,71 @@ export default {
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'cross',
|
type: 'cross',
|
||||||
},
|
},
|
||||||
borderWidth: 1,
|
// borderWidth: 1,
|
||||||
borderColor: '#ccc',
|
// borderColor: '#ccc',
|
||||||
padding: 10,
|
// padding: 10,
|
||||||
textStyle: {
|
// textStyle: {
|
||||||
color: '#000',
|
// color: '#000',
|
||||||
},
|
// },
|
||||||
position: function (pos, params, el, elRect, size) {
|
// position: function (pos, params, el, elRect, size) {
|
||||||
const obj = {
|
// const obj = {
|
||||||
top: 10,
|
// top: 10,
|
||||||
}
|
// }
|
||||||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
|
// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
|
||||||
return obj
|
// return obj
|
||||||
},
|
// },
|
||||||
// extraCssText: 'width: 170px'
|
// extraCssText: 'width: 170px'
|
||||||
},
|
},
|
||||||
series: [
|
color: ['#f00', '#f0f', '#ff0'],
|
||||||
{
|
// series: [
|
||||||
name: 'MA5',
|
// {
|
||||||
type: 'line',
|
// name: 'MA5',
|
||||||
data: [
|
// type: 'line',
|
||||||
23, 33, 34, 32, 44, 33, 46, 32, 44, 33, 46, 32, 44, 33, 67, 22, 44, 33, 46, 32, 34,
|
// data: [
|
||||||
33, 46, 32, 8, 33, 46, 32, 44, 33,
|
// 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,
|
||||||
// smooth: true,
|
// ],
|
||||||
showSymbol: false,
|
// // smooth: true,
|
||||||
lineStyle: {
|
// // showSymbol: false,
|
||||||
width: 3,
|
// // lineStyle: {
|
||||||
color: '#EA0706',
|
// // width: 3,
|
||||||
},
|
// // color: '#EA0706',
|
||||||
},
|
// // },
|
||||||
{
|
// },
|
||||||
name: 'MA5',
|
// {
|
||||||
type: 'line',
|
// name: 'MA4',
|
||||||
data: [
|
// type: 'line',
|
||||||
44, 33, 46, 32, 44, 33, 44, 33, 46, 33, 44, 33, 46, 32, 44, 33, 46, 32, 44, 33, 46,
|
// data: [
|
||||||
32, 44, 33, 46, 32, 44, 33, 46, 32,
|
// 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,
|
||||||
// smooth: true,
|
// ],
|
||||||
showSymbol: false,
|
// // smooth: true,
|
||||||
lineStyle: {
|
// // showSymbol: false,
|
||||||
width: 3,
|
// // lineStyle: {
|
||||||
color: '#067607',
|
// // width: 3,
|
||||||
// type: 'dashed',
|
// // color: '#067607',
|
||||||
},
|
// // // type: 'dashed',
|
||||||
},
|
// // },
|
||||||
{
|
// },
|
||||||
name: 'MA5',
|
// {
|
||||||
type: 'line',
|
// name: 'MA3',
|
||||||
data: [
|
// type: 'line',
|
||||||
46, 66, 44, 22, 46, 56, 44, 33, 46, 32, 44, 33, 65, 32, 44, 22, 46, 32, 44, 33, 33,
|
// data: [
|
||||||
33, 46, 32, 44, 33, 34, 32, 44, 33,
|
// 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,
|
||||||
// smooth: true,
|
// ],
|
||||||
showSymbol: false,
|
// // smooth: true,
|
||||||
lineStyle: {
|
// // showSymbol: false,
|
||||||
width: 3,
|
// // lineStyle: {
|
||||||
color: '#0000FB',
|
// // width: 3,
|
||||||
// type: 'dashed',
|
// // color: '#0000FB',
|
||||||
},
|
// // // type: 'dashed',
|
||||||
},
|
// // },
|
||||||
],
|
// },
|
||||||
|
// ],
|
||||||
|
series: this.chartData.seriesData
|
||||||
}
|
}
|
||||||
myChart.setOption(option)
|
this.myChart.setOption(option)
|
||||||
},
|
},
|
||||||
modelTypeChange(data) {
|
modelTypeChange(data) {
|
||||||
this.queryParams.model_types = data.join(',')
|
this.queryParams.model_types = data.join(',')
|
||||||
|
|
|
||||||
|
|
@ -4,28 +4,42 @@
|
||||||
<div class="list-box">
|
<div class="list-box">
|
||||||
<div class="filter-wrap">
|
<div class="filter-wrap">
|
||||||
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
||||||
<el-form-item label="Activity reference time">
|
<!--<el-form-item label="Activity reference time">
|
||||||
<el-date-picker v-model="queryParams.dateTime1" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
|
<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>
|
||||||
<el-form-item label="Concentration reference time">
|
<el-form-item label="Concentration reference time">
|
||||||
<el-date-picker v-model="queryParams.dateTime2" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
|
<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="Create time">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRage"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="start"
|
||||||
|
end-placeholder="end"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
class="dark-date-picker"
|
||||||
|
popper-class="dark-date-picker"
|
||||||
|
@change="dateChange"></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="">
|
<el-form-item label="">
|
||||||
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Search</el-button>
|
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
|
||||||
<el-button type="primary" icon="document" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSave">Save</el-button>
|
<el-button type="primary" icon="document" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSave">Save</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="tableData" stripe style="width: 100%" class="dark-table">
|
<el-table :data="tableData" stripe style="width: 100%" class="dark-table">
|
||||||
<el-table-column prop="date" label="NO" width="180"> </el-table-column>
|
<el-table-column fixed type="index" label="NO" width="80"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_CONC" width="180"> </el-table-column>
|
<el-table-column prop="xe131m_conc" label="XE131M_CONC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
|
<el-table-column prop="xe131m_mdc" label="XE131M_MDC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
|
<el-table-column prop="xe133_conc" label="XE133_CONC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
|
<el-table-column prop="xe133_mdc" label="XE133_MDC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
|
<el-table-column prop="xe133m_conc" label="XE133M_CONC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
|
<el-table-column prop="xe133m_mdc" label="XE133M_MDC"></el-table-column>
|
||||||
<el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
|
<el-table-column prop="xe135_conc" label="XE135M_CONC"></el-table-column>
|
||||||
<el-table-column prop="address" label="XE131M_MDC"> </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="type" label="TYPE">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-input v-model="scope.row.type" class="dark-input"></el-input>
|
<el-input v-model="scope.row.type" class="dark-input"></el-input>
|
||||||
|
|
@ -48,35 +62,11 @@ export default {
|
||||||
queryParams: {
|
queryParams: {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
acquisition_start_begin: '',
|
create_time_begin: '',
|
||||||
acquisition_start_end: '',
|
create_time_end: '',
|
||||||
},
|
},
|
||||||
tableData: [
|
tableData: [],
|
||||||
{
|
dateRage: []
|
||||||
date: '2016-05-02',
|
|
||||||
name: '0.03464',
|
|
||||||
address: '0.2548',
|
|
||||||
type: '1111'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-04',
|
|
||||||
name: '0.03464',
|
|
||||||
address: '0.2548',
|
|
||||||
type: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-01',
|
|
||||||
name: '0.03464',
|
|
||||||
address: '0.2548',
|
|
||||||
type: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2016-05-03',
|
|
||||||
name: '0.03464',
|
|
||||||
address: '0.2548',
|
|
||||||
type: ''
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
|
@ -85,13 +75,17 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
onSearch () {
|
onSearch () {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
this.$axios.get(window.CONFIG.baseUrl + '/sssssssssssssssssssss', { params: this.queryParams }).then((res) => {
|
this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
|
||||||
this.tableData = res.data.items
|
this.tableData = res.data.items
|
||||||
this.total = res.data.pagination.total_count
|
this.total = res.data.pagination.total_count
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
dateChange(dates) {
|
||||||
|
this.queryParams.create_time_begin = dates[0]
|
||||||
|
this.queryParams.create_time_end = dates[1]
|
||||||
|
},
|
||||||
async onSave() {
|
async onSave() {
|
||||||
const res = await this.$axios.post(window.CONFIG.baseUrl + '/wwwwwwwwwwwwwwwwwwwwwwwwwwww', this.tableData)
|
const res = await this.$axios.post(window.CONFIG.baseUrl + '/wwwwwwwwwwwwwwwwwwwwwwwwwwww', this.tableData)
|
||||||
debugger
|
debugger
|
||||||
|
|
|
||||||
221
src/views/chart/pages/ConfigureChart.vue
Normal file
221
src/views/chart/pages/ConfigureChart.vue
Normal file
|
|
@ -0,0 +1,221 @@
|
||||||
|
<template>
|
||||||
|
<div class="list-wrap">
|
||||||
|
<div class="section-head">Configure</div>
|
||||||
|
<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="Create time">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRage"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="start"
|
||||||
|
end-placeholder="end"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
class="dark-date-picker"
|
||||||
|
popper-class="dark-date-picker"
|
||||||
|
@change="dateChange"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="chart-wrap">
|
||||||
|
<div ref="chartDom" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
total: 0,
|
||||||
|
queryParams: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
create_time_begin: '',
|
||||||
|
create_time_end: '',
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
dateRage: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.onSearch()
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.chart()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSearch () {
|
||||||
|
this.loading = true
|
||||||
|
this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
|
||||||
|
this.tableData = res.data.items
|
||||||
|
this.total = res.data.pagination.total_count
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
dateChange(dates) {
|
||||||
|
this.queryParams.create_time_begin = dates[0]
|
||||||
|
this.queryParams.create_time_end = dates[1]
|
||||||
|
},
|
||||||
|
chart() {
|
||||||
|
this.myChart = this.$echarts.init(this.$refs.chartDomx)
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
left: 60,
|
||||||
|
right: 20,
|
||||||
|
bottom: 30,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#273F4B',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#152029',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#a2b4c9',
|
||||||
|
// rotate: 0
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#152029',
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#273F4B',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#a2b4c9',
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#152029',
|
||||||
|
type: 'dashed',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// axisTick: {
|
||||||
|
// show: true,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#f00'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
},
|
||||||
|
// borderWidth: 1,
|
||||||
|
// borderColor: '#ccc',
|
||||||
|
// padding: 10,
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#000',
|
||||||
|
// },
|
||||||
|
// position: function (pos, params, el, elRect, size) {
|
||||||
|
// const obj = {
|
||||||
|
// top: 10,
|
||||||
|
// }
|
||||||
|
// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
|
||||||
|
// return obj
|
||||||
|
// },
|
||||||
|
// extraCssText: 'width: 170px'
|
||||||
|
},
|
||||||
|
color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
symbolSize: 20,
|
||||||
|
data: [
|
||||||
|
[10.0, 8.04],
|
||||||
|
[8.07, 6.95],
|
||||||
|
[13.0, 7.58],
|
||||||
|
[9.05, 8.81],
|
||||||
|
[11.0, 8.33],
|
||||||
|
[14.0, 7.66],
|
||||||
|
[13.4, 6.81],
|
||||||
|
[10.0, 6.33],
|
||||||
|
[14.0, 8.96],
|
||||||
|
[12.5, 6.82],
|
||||||
|
[9.15, 7.2],
|
||||||
|
[11.5, 7.2],
|
||||||
|
[3.03, 4.23],
|
||||||
|
[12.2, 7.83],
|
||||||
|
[2.02, 4.47],
|
||||||
|
[1.05, 3.33],
|
||||||
|
[4.05, 4.96],
|
||||||
|
[6.03, 7.24],
|
||||||
|
[12.0, 6.26],
|
||||||
|
[12.0, 8.84],
|
||||||
|
[7.08, 5.82],
|
||||||
|
[5.02, 5.68]
|
||||||
|
],
|
||||||
|
type: 'scatter'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.myChart.setOption(option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.list-wrap {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.section-head {
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 13px;
|
||||||
|
background-color: #1c2630;
|
||||||
|
border-left: 4px solid #be8728;
|
||||||
|
font-family: MICROGRAMMADMEDEXT;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.list-box {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.filter-wrap {
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 16px;
|
||||||
|
::v-deep .el-form-item__label {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #a7bacf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-wrap {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<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-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>
|
||||||
<el-form-item label="">
|
<el-form-item label="">
|
||||||
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Search</el-button>
|
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
|
||||||
<!--<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
|
<!--<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
|
||||||
<el-upload
|
<el-upload
|
||||||
ref="upload"
|
ref="upload"
|
||||||
|
|
@ -105,8 +105,9 @@ export default {
|
||||||
|
|
||||||
// 将所有文件添加到 FormData
|
// 将所有文件添加到 FormData
|
||||||
this.selectedFiles.forEach(file => {
|
this.selectedFiles.forEach(file => {
|
||||||
formData.append('files[]', file)
|
formData.append('files', file)
|
||||||
});
|
});
|
||||||
|
formData.append('create_by', 'system')
|
||||||
|
|
||||||
// 使用 axios 发送请求
|
// 使用 axios 发送请求
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,26 @@
|
||||||
<div class="list-box">
|
<div class="list-box">
|
||||||
<div class="filter-wrap">
|
<div class="filter-wrap">
|
||||||
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
||||||
<el-form-item label="Activity reference time">
|
<!--<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-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>
|
||||||
<el-form-item label="Concentration reference time">
|
<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-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="Create time">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateRage"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="start"
|
||||||
|
end-placeholder="end"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
class="dark-date-picker"
|
||||||
|
popper-class="dark-date-picker"
|
||||||
|
@change="dateChange"></el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="">
|
<el-form-item label="">
|
||||||
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
|
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;" @click="onSearch">Select</el-button>
|
||||||
<!--<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
|
<!--<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
|
||||||
|
|
@ -49,8 +63,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {listUser} from "@/api/system/user.js";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -59,11 +71,12 @@ export default {
|
||||||
queryParams: {
|
queryParams: {
|
||||||
page: 1,
|
page: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
acquisition_start_begin: '',
|
create_time_begin: '',
|
||||||
acquisition_start_end: '',
|
create_time_end: '',
|
||||||
},
|
},
|
||||||
tableData: [],
|
tableData: [],
|
||||||
fileList: []
|
fileList: [],
|
||||||
|
dateRage: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
|
@ -93,6 +106,10 @@ export default {
|
||||||
const file = files[0]
|
const file = files[0]
|
||||||
this.$refs.upload.handleStart(file)
|
this.$refs.upload.handleStart(file)
|
||||||
},
|
},
|
||||||
|
dateChange(dates) {
|
||||||
|
this.queryParams.create_time_begin = dates[0]
|
||||||
|
this.queryParams.create_time_end = dates[1]
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
197
src/views/chart/pages/Predict.vue
Normal file
197
src/views/chart/pages/Predict.vue
Normal file
|
|
@ -0,0 +1,197 @@
|
||||||
|
<template>
|
||||||
|
<div class="list-wrap">
|
||||||
|
<div class="section-head">Predict</div>
|
||||||
|
<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="queryParams.case_no" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 120px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in caseOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.id"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
</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: 520px" @change="modelTypeChange">
|
||||||
|
<el-option
|
||||||
|
v-for="item in selectOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="">
|
||||||
|
<el-upload
|
||||||
|
ref="upload"
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
class="upload-demo"
|
||||||
|
:auto-upload="false"
|
||||||
|
:limit="1"
|
||||||
|
:multiple="false"
|
||||||
|
:show-file-list="false"
|
||||||
|
:on-change="handleChange"
|
||||||
|
style="height: 32px; margin-left: 12px;">
|
||||||
|
<el-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>
|
||||||
|
</el-upload>
|
||||||
|
<el-button type="primary" icon="search" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0; margin-left: 12px;" @click="onSearch">Select</el-button>
|
||||||
|
<el-button type="primary" icon="document" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0; margin-left: 12px;" @click="onDownload">Download</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" stripe style="width: 100%" class="dark-table">
|
||||||
|
<el-table-column fixed type="index" label="NO" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="xe131m_conc" label="XE131M_CONC"></el-table-column>
|
||||||
|
<el-table-column prop="xe131m_mdc" label="XE131M_MDC"></el-table-column>
|
||||||
|
<el-table-column prop="xe133_conc" label="XE133_CONC"></el-table-column>
|
||||||
|
<el-table-column prop="xe133_mdc" label="XE133_MDC"></el-table-column>
|
||||||
|
<el-table-column prop="xe133m_conc" label="XE133M_CONC"></el-table-column>
|
||||||
|
<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">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-input v-model="scope.row.type" class="dark-input"></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination-wrap">
|
||||||
|
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size" class="dark-pagination" @pagination="onSearch" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
total: 0,
|
||||||
|
queryParams: {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
case_no: '',
|
||||||
|
model_types: '',
|
||||||
|
file: '',
|
||||||
|
},
|
||||||
|
selectOptions: [
|
||||||
|
{
|
||||||
|
value: 'CNN',
|
||||||
|
label: 'CNN',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'BDT',
|
||||||
|
label: 'BDT',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'SVM',
|
||||||
|
label: 'SVM',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'MLP',
|
||||||
|
label: 'MLP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'RF',
|
||||||
|
label: 'RF',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
caseOptions: [],
|
||||||
|
tableData: [],
|
||||||
|
fileList: [],
|
||||||
|
modelTypes: [],
|
||||||
|
currentFile: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
// color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25']
|
||||||
|
// this.onSearch()
|
||||||
|
this.getCaseData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSearch () {
|
||||||
|
this.loading = true
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append("file", this.currentFile)
|
||||||
|
formData.append("case_no", this.queryParams.case_no)
|
||||||
|
formData.append("model_types", this.queryParams.model_types)
|
||||||
|
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/predict', formData, { headers: { "Content-Type": "multipart/form-data" } }).then((res) => {
|
||||||
|
this.tableData = res.data.items
|
||||||
|
this.total = res.data.pagination.total_count
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getCaseData () {
|
||||||
|
this.loading = true
|
||||||
|
this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_datasets', { params: this.queryParams }).then((res) => {
|
||||||
|
this.caseOptions = res.data.items
|
||||||
|
}).finally(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 文件选择变化
|
||||||
|
handleChange(file, fileList) {
|
||||||
|
if (file) {
|
||||||
|
this.currentFile = file.raw || file
|
||||||
|
} else {
|
||||||
|
this.currentFile = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modelTypeChange(data) {
|
||||||
|
this.queryParams.model_types = data.join(',')
|
||||||
|
},
|
||||||
|
async onDownload() {
|
||||||
|
const res = await this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: '' }}) // 理解：path应该是查询成功后返回的路径
|
||||||
|
debugger
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.list-wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
color: #fff;
|
||||||
|
.section-head {
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 13px;
|
||||||
|
background-color: #1c2630;
|
||||||
|
border-left: 4px solid #be8728;
|
||||||
|
font-family: MICROGRAMMADMEDEXT;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.list-box {
|
||||||
|
.filter-wrap {
|
||||||
|
margin-top: 16px;
|
||||||
|
::v-deep .el-form-item__label {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #a7bacf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dark-table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user