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-05 21:26:22 +08:00
parent 97ef152238
commit b8be04c951
9 changed files with 730 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/CountDownTimer/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div class="countdown">
<span class="time-unit">{{ formattedTime }}</span>
</div>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 60
},
},
data() {
return {
timeLeft: this.duration,
timer: null,
isExpired: false
}
},
computed: {
// 将秒数格式化为 HH:MM:SS
formattedTime() {
const hours = Math.floor(this.timeLeft / 3600)
const minutes = Math.floor((this.timeLeft % 3600) / 60)
const seconds = this.timeLeft % 60
// 一位数时前面补零
const pad = (num) => num.toString().padStart(2, '0')
return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
}
},
watch: {
timeLeft(newValue) {
if (newValue <= 0) {
this.handleFinish()
}
}
},
mounted() {
this.startTimer()
},
beforeUnmount() {
this.clearTimer()
},
methods: {
startTimer() {
this.clearTimer()
this.timer = setInterval(() => {
this.timeLeft--
}, 1000)
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
handleFinish() {
this.isExpired = true
this.clearTimer()
this.$emit('finished')
},
reset() {
this.timeLeft = this.duration
this.isExpired = false
this.startTimer()
},
// 暂停
pause() {
this.clearTimer()
},
// 继续
resume() {
this.startTimer()
}
}
}
</script>
<style scoped>
</style>

12
src/store/modules/permission.js
View File

@ -246,6 +246,18 @@ const usePermissionStore = defineStore(
"link": null
},
},
{
"name": "MonitorResult",
"path": "MonitorResult",
"hidden": false,
"component": "chart/pages/MonitorResult",
"meta": {
"title": "MonitorResult",
"icon": "log",
"noCache": false,
"link": null
},
},
]
}
]

5
src/views/chart/layout/SideMenu.vue
View File

@ -97,6 +97,11 @@ export default {
name: 'Monitor the training process',
url: '/system/chart/Calculation',
},
{
id: '25',
name: 'Monitor result',
url: '/system/chart/MonitorResult',
},
{
id: '24',
name: 'Config chart',

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

@ -41,7 +41,7 @@
</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-select v-model="modelTypes" multiple placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 400px" @change="modelTypeChange">
<el-option
v-for="item in selectOptions"
:key="item.value"
@ -74,6 +74,7 @@
<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>
@ -81,7 +82,12 @@
</el-form>
</div>
<div class="dark-table">
<div class="form-title">BDT:</div>
<div class="form-title">
<span class="title">BDT:</span>
<span class="clock">
<CountDownTimer :duration="3" @finished="onCountDownFinished" />
</span>
</div>
<div class="set-section">
<div class="left-set">
<el-form :inline="true" :model="form" class="form-item-block">
@ -192,7 +198,12 @@
</template>
<script>
import CountDownTimer from '@/components/CountDownTimer/index.vue'
export default {
components: {
CountDownTimer
},
data() {
return {
queryParams: {
@ -259,6 +270,11 @@ export default {
})
},
onSearch () {
if(this.myChart) {
this.myChart.dispose()
this.chart()
}
this.getTrainingTime()
this.loading = true
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
@ -272,16 +288,27 @@ export default {
this.loading = false
})
},
onEnd() {
clearInterval(this.timer)
},
// 获取训练用时时间
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 }})
debugger
},
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.xAxisData.push(item.start_time.substr(0, 10))
this.chartData.xAxisData.push(item.start_time)
if (item.end_time) {
clearInterval(this.timer)
}
}
// 下面的逻辑有问题，但是因为要改成一条线的折线图，所以暂时不改
this.chartData.seriesData.push({
name: item.model_type,
type: 'line',
@ -398,7 +425,7 @@ export default {
// },
// extraCssText: 'width: 170px'
},
color: ['#f00', '#f0f', '#ff0'],
color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
// series: [
// {
// name: 'MA5',
@ -451,7 +478,8 @@ export default {
},
modelTypeChange(data) {
this.queryParams.model_types = data.join(',')
}
},
onCountDownFinished() {},
},
}
</script>
@ -498,6 +526,11 @@ export default {
height: 28px;
line-height: 28px;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
.title {}
.clock {}
}
.set-section {
flex: 1;

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

@ -1,6 +1,6 @@
<template>
<div class="list-wrap">
<div class="section-head">Configure</div>
<div class="section-head">Configure chart</div>
<div class="list-box">
<div class="filter-wrap">
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
@ -44,26 +44,52 @@ export default {
total: 0,
queryParams: {
page: 1,
size: 10,
size: 100,
create_time_begin: '',
create_time_end: '',
},
tableData: [],
dateRage: []
dateRage: [],
chartData: {
xAxisData: [],
seriesData: []
}, // xe131m_conc
}
},
created () {
this.onSearch()
},
mounted() {
// this.chart()
this.chart()
},
methods: {
onSearch () {
this.loading = true
this.$axios.get(window.CONFIG.baseUrl + '/nuclide/query_samples', { params: this.queryParams }).then((res) => {
debugger
this.tableData = res.data.items
this.total = res.data.pagination.total_count
res.data.items.forEach(item => {
switch (item.type) { // 最多只有
case 'aaaaaa':
break
case 'bbbbbb':
break
case 'cccccc':
break
case 'dddddd':
break
case 'eeeeee':
break
default:
}
this.chartData.seriesData.push({
})
})
}).finally(() => {
this.loading = false
})
@ -73,7 +99,7 @@ export default {
this.queryParams.create_time_end = dates[1]
},
chart() {
this.myChart = this.$echarts.init(this.$refs.chartDomx)
this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = {
grid: {
left: 60,
@ -150,24 +176,54 @@ export default {
color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
series: [
{
name: 'aaa',
type: 'scatter',
symbolSize: 20,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
],
},
{
name: 'bbb',
type: 'scatter',
symbolSize: 20,
data: [
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
],
},
{
name: 'ccc',
type: 'scatter',
symbolSize: 20,
data: [
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
],
},
{
name: 'ddd',
type: 'scatter',
symbolSize: 20,
data: [
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
],
},
{
name: 'eee',
type: 'scatter',
symbolSize: 20,
data: [
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
@ -175,8 +231,7 @@ export default {
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
},
]
}
this.myChart.setOption(option)

370
src/views/chart/pages/MonitorResult.vue Normal file
View File

@ -0,0 +1,370 @@
<template>
<div class="list-wrap">
<div class="section-head">Monitor result</div>
<div class="list-box">
<div class="filter-wrap">
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
<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
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="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-form-item>
</el-form>
</div>
<div class="chart-wrap" :class="{'multiple': false}">
<!--<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 class="chart-box">
<div ref="chartDom" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryParams: {
dataset_id: '',
model_types: ''
},
modelTypes: [],
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
},
selectOptions: [
{
value: 'CNN',
label: 'CNN',
},
{
value: 'BDT',
label: 'BDT',
},
{
value: 'SVM',
label: 'SVM',
},
{
value: 'MLP',
label: 'MLP',
},
{
value: 'RF',
label: 'RF',
},
],
caseNo: '',
timer: null,
chartData: {
xAxisData: [],
seriesData: []
},
myChart: null
}
},
created() {},
mounted() {
this.chart()
this.getDataset()
},
methods: {
getDataset() {
this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_datasets', { params: { page: 1, size: 100 } }).then((res) => {
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) => {
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)
},
chart() {
this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = {
title: {
text: 'title',
textStyle: {
color: '#ffffff'
},
},
grid: {
left: 50,
right: 20,
bottom: 10,
top: 40,
},
xAxis: {
axisLine: {
lineStyle: {
color: '#273F4B',
width: 1,
},
},
axisTick: {
lineStyle: {
color: '#152029',
width: 1,
},
},
axisLabel: {
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
},
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',
},
},
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
}
this.myChart.setOption(option)
},
modelTypeChange(data) {
this.queryParams.model_types = data.join(',')
}
},
}
</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;
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;
}
}
}
}
</style>

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

@ -12,9 +12,9 @@
</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-select v-model="datasetId" placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 120px" @change="getCaseData">
<el-option
v-for="item in caseOptions"
v-for="item in datasetIdOptions"
:key="item.id"
:label="item.id"
:value="item.id"
@ -22,8 +22,20 @@
</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: 520px" @change="modelTypeChange">
<el-select v-model="modelTypes" multiple placeholder="请选择" class="dark-select" popper-class="dark-select-popper" style="width: 400px" @change="modelTypeChange">
<el-option
v-for="item in selectOptions"
:key="item.value"
@ -52,24 +64,8 @@
</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 class="chart-wrap">
<div ref="chartDom" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
@ -80,7 +76,8 @@ export default {
data() {
return {
loading: false,
total: 0,
datasetId: '',
datasetIdOptions: [],
queryParams: {
page: 1,
size: 10,
@ -111,16 +108,23 @@ export default {
},
],
caseOptions: [],
tableData: [],
fileList: [],
modelTypes: [],
currentFile: null
currentFile: null,
myChart: null,
chartData: {
datasetSource: []
},
outPath: ''
}
},
created () {
// color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25']
// this.onSearch()
this.getCaseData()
this.getDataset()
},
mounted() {
this.chart()
},
methods: {
onSearch () {
@ -129,21 +133,42 @@ export default {
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
// this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/predict', formData, { headers: { "Content-Type": "multipart/form-data" } }).then((res) => {
this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/predict_with_label', formData, { headers: { "Content-Type": "multipart/form-data" } }).then((res) => {
this.chartData.dataset = res.echart_data
this.myChart.setOption({
dataset: {
source: res.echart_data
},
})
}).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
getDataset() {
this.$axios.get(window.CONFIG.baseUrl + '/train-oneday/query_train_datasets', { params: { page: 1, size: 100 } }).then((res) => {
this.datasetIdOptions = res.data.items
})
},
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
}
},
// 文件选择变化
handleChange(file, fileList) {
if (file) {
@ -155,9 +180,86 @@ export default {
modelTypeChange(data) {
this.queryParams.model_types = data.join(',')
},
async onDownload() {
const res = await this.$axios.get(window.CONFIG.baseUrl + '/download', { params: { path: '' }}) // 理解：path应该是查询成功后返回的路径
debugger
onDownload() {
const arr = this.queryParams.model_types.split(',')
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 }})
})
},
chart() {
this.myChart = this.$echarts.init(this.$refs.chartDom)
const option = {
grid: {
left: 40,
right: 20,
bottom: 10,
top: 20,
containLabel: true,
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#273F4B',
width: 1,
},
},
axisTick: {
lineStyle: {
color: '#152029',
width: 1,
},
},
axisLabel: {
color: '#a2b4c9',
// rotate: 0
},
splitLine: {
lineStyle: {
color: '#152029',
type: 'dashed',
},
},
},
yAxis: {
type: 'value',
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: 'shadow'
}
},
color: ['#0A4072', '#683F14', '#0F605A', '#0F5A7A', '#5C5F25'],
dataset: {
source: this.chartData.datasetSource
},
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}
this.myChart.setOption(option)
},
},
}
@ -165,8 +267,11 @@ export default {
<style scoped lang="scss">
.list-wrap {
height: 100%;
overflow: hidden;
color: #fff;
display: flex;
flex-direction: column;
.section-head {
height: 32px;
padding: 0 13px;
@ -177,21 +282,20 @@ export default {
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;
}
}
.dark-table {
width: 100%;
.chart-wrap {
flex: 1;
}
}
.pagination-wrap {
display: flex;
justify-content: flex-end;
margin: 16px 0;
}
}
</style>

11
src/views/chart/pages/WindMap.vue
View File

@ -19,6 +19,7 @@ export default {
pressureData: null,
temperatureData: null,
atmosphericData: null,
gridHalfwidthDeg: 6,
}
},
watch: {
@ -45,7 +46,7 @@ export default {
date: '2024-05-20',
lon_center: 116,
lat_center: 39,
grid_halfwidth_deg: 1
grid_halfwidth_deg: this.gridHalfwidthDeg
}
this.loading = true
const res = await this.$axios.post(window.CONFIG.baseUrl + '/nuclide-sim/calculate_atmospheric_stability', params, {
@ -61,7 +62,7 @@ export default {
date: '2024-05-20',
lon_center: 116,
lat_center: 39,
grid_halfwidth_deg: 1
grid_halfwidth_deg: this.gridHalfwidthDeg
}
try {
this.loading = true
@ -90,7 +91,7 @@ export default {
switch (val) {
case 'Wind':
// loadWindfield(this.viewer)
loadWindfieldWithDataNew(this.viewer, this.windData)
loadWindfieldWithDataNew(this.viewer, this.windData, this.gridHalfwidthDeg)
break
case 'AtmosphericStability':
debugger
@ -103,7 +104,7 @@ export default {
loadHeatmapByData(this.viewer, this.temperatureData)
break
default:
loadWindfieldWithDataNew(this.viewer, this.windData)
loadWindfieldWithDataNew(this.viewer, this.windData, this.gridHalfwidthDeg)
}
},
findLayerByName(layerName) {
@ -150,7 +151,7 @@ export default {
flyToBeijing() {
// 北京坐标（经度, 纬度, 高度）
const beijingPosition = Cesium.Cartesian3.fromDegrees(116.3903, 39.9001, 600000)
const beijingPosition = Cesium.Cartesian3.fromDegrees(116.3903, 39.9001, 160000)
this.viewer.camera.flyTo({
destination: beijingPosition, // 目标位置

6
src/views/chart/pages/WindMap/WindField.js
View File

@ -306,7 +306,7 @@ export const loadWindfieldWithData = (viewer, windData) => {
}
}
export const loadWindfieldWithDataNew = (viewer, windData) => {
export const loadWindfieldWithDataNew = (viewer, windData, num) => {
const { windU, windV, windOptions } = getInitWindOptions()
const { lon_min: lo1, lat_max: la2, lon_max: lo2, lat_min: la1 } = windData
@ -323,8 +323,8 @@ export const loadWindfieldWithDataNew = (viewer, windData) => {
windV.data.push(item[3])
})
windU.header.nx = windV.header.nx = 13
windU.header.ny = windV.header.ny = 13
windU.header.nx = windV.header.nx = num * 2 + 1
windU.header.ny = windV.header.ny = num * 2 + 1
windU.header.dx = windV.header.dx = 1
windU.header.dy = windV.header.dy = 1