From b8be04c9512247965c0ef6515db1c1d978220dad Mon Sep 17 00:00:00 2001
From: pengjunchao <499766544@qq.com>
Date: Fri, 5 Dec 2025 21:26:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2=E5=92=8C?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CountDownTimer/index.vue    |  84 +++++
 src/store/modules/permission.js            |  12 +
 src/views/chart/layout/SideMenu.vue        |   5 +
 src/views/chart/pages/Calculation.vue      |  47 ++-
 src/views/chart/pages/ConfigureChart.vue   |  69 +++-
 src/views/chart/pages/MonitorResult.vue    | 370 +++++++++++++++++++++
 src/views/chart/pages/Predict.vue          | 192 ++++++++---
 src/views/chart/pages/WindMap.vue          |  11 +-
 src/views/chart/pages/WindMap/WindField.js |   6 +-
 9 files changed, 730 insertions(+), 66 deletions(-)
 create mode 100644 src/components/CountDownTimer/index.vue
 create mode 100644 src/views/chart/pages/MonitorResult.vue

diff --git a/src/components/CountDownTimer/index.vue b/src/components/CountDownTimer/index.vue
new file mode 100644
index 0000000..20a5fd6
--- /dev/null
+++ b/src/components/CountDownTimer/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 22d6ea3..53ae199 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -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
+                          },
+                        },
                       ]
                     }
                   ]
diff --git a/src/views/chart/layout/SideMenu.vue b/src/views/chart/layout/SideMenu.vue
index 5eb0227..d4e3e5a 100644
--- a/src/views/chart/layout/SideMenu.vue
+++ b/src/views/chart/layout/SideMenu.vue
@@ -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',
diff --git a/src/views/chart/pages/Calculation.vue b/src/views/chart/pages/Calculation.vue
index 2c4c589..9404b3b 100644
--- a/src/views/chart/pages/Calculation.vue
+++ b/src/views/chart/pages/Calculation.vue
@@ -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;
diff --git a/src/views/chart/pages/ConfigureChart.vue b/src/views/chart/pages/ConfigureChart.vue
index ee44abd..c14dc85 100644
--- a/src/views/chart/pages/ConfigureChart.vue
+++ b/src/views/chart/pages/ConfigureChart.vue
@@ -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)
diff --git a/src/views/chart/pages/MonitorResult.vue b/src/views/chart/pages/MonitorResult.vue
new file mode 100644
index 0000000..8ff93a5
--- /dev/null
+++ b/src/views/chart/pages/MonitorResult.vue
@@ -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>
diff --git a/src/views/chart/pages/Predict.vue b/src/views/chart/pages/Predict.vue
index e38c8ca..8b7b422 100644
--- a/src/views/chart/pages/Predict.vue
+++ b/src/views/chart/pages/Predict.vue
@@ -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>
diff --git a/src/views/chart/pages/WindMap.vue b/src/views/chart/pages/WindMap.vue
index bcb9aae..8ca5213 100644
--- a/src/views/chart/pages/WindMap.vue
+++ b/src/views/chart/pages/WindMap.vue
@@ -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, // 目标位置
diff --git a/src/views/chart/pages/WindMap/WindField.js b/src/views/chart/pages/WindMap/WindField.js
index cb49dd9..73c4abb 100644
--- a/src/views/chart/pages/WindMap/WindField.js
+++ b/src/views/chart/pages/WindMap/WindField.js
@@ -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