From 4f8d0f43cf8e82cbb3f33027389b1b6a70a9c914 Mon Sep 17 00:00:00 2001
From: pengjunchao <499766544@qq.com>
Date: Fri, 5 Dec 2025 09:17:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                               |   3 +-
 src/assets/styles/public.scss            |   3 +
 src/store/modules/permission.js          |  24 +++
 src/views/chart/layout/SideMenu.vue      |  10 +
 src/views/chart/pages/Calculation.vue    | 242 ++++++++++++++---------
 src/views/chart/pages/Configure.vue      |  78 ++++----
 src/views/chart/pages/ConfigureChart.vue | 221 +++++++++++++++++++++
 src/views/chart/pages/Dataset.vue        |   5 +-
 src/views/chart/pages/LoadFromDb.vue     |  29 ++-
 src/views/chart/pages/Predict.vue        | 197 ++++++++++++++++++
 10 files changed, 664 insertions(+), 148 deletions(-)
 create mode 100644 src/views/chart/pages/ConfigureChart.vue
 create mode 100644 src/views/chart/pages/Predict.vue

diff --git a/index.html b/index.html
index 4ea261a..036a3a4 100644
--- a/index.html
+++ b/index.html
@@ -212,7 +212,8 @@
   <script type="module" src="/src/main.js"></script>
   <script>
     window.CONFIG = {
-      baseUrl: 'http://www.jiatq.com:10009'
+      baseUrl: 'http://www.jiatq.com:10009',
+      userBaseUrl: 'http://qc2c966e.natappfree.cc/prod-api',
     }
   </script>
 </body>
diff --git a/src/assets/styles/public.scss b/src/assets/styles/public.scss
index 95d0b62..aa2ba20 100644
--- a/src/assets/styles/public.scss
+++ b/src/assets/styles/public.scss
@@ -45,6 +45,9 @@ body, #app {
         }
       }
     }
+    .el-table__empty-block {
+      background-color: #1C2630;
+    }
     .el-table__body {
       tr {
         color: #a7bacf;
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 48c0653..22d6ea3 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -222,6 +222,30 @@ const usePermissionStore = defineStore(
                             "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
+                          },
+                        },
                       ]
                     }
                   ]
diff --git a/src/views/chart/layout/SideMenu.vue b/src/views/chart/layout/SideMenu.vue
index 712b3e9..5eb0227 100644
--- a/src/views/chart/layout/SideMenu.vue
+++ b/src/views/chart/layout/SideMenu.vue
@@ -97,6 +97,16 @@ export default {
           name: 'Monitor the training process',
           url: '/system/chart/Calculation',
         },
+        {
+          id: '24',
+          name: 'Config chart',
+          url: '/system/chart/ConfigureChart',
+        },
+        {
+          id: '23',
+          name: 'Predict',
+          url: '/system/chart/Predict',
+        },
         {
           id: '4',
           name: 'Analyze',
diff --git a/src/views/chart/pages/Calculation.vue b/src/views/chart/pages/Calculation.vue
index 5de36e6..2c4c589 100644
--- a/src/views/chart/pages/Calculation.vue
+++ b/src/views/chart/pages/Calculation.vue
@@ -225,13 +225,31 @@ export default {
           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.onSearch()
     this.getDataset()
   },
   methods: {
@@ -245,14 +263,41 @@ export default {
       this.$axios.post(window.CONFIG.baseUrl + '/train-oneday/train_models', this.queryParams, {
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
       }).then((res) => {
-        this.tableData = res.data.items
-        this.total = res.data.pagination.total_count
+        debugger
+        if (res.case_no) {
+          this.caseNo = res.case_no
+        }
+        this.queryModalProcess()
       }).finally(() => {
         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() {
-      const myChart = this.$echarts.init(this.$refs.chartDom)
+      this.myChart = this.$echarts.init(this.$refs.chartDom)
       const option = {
         grid: {
           left: 60,
@@ -276,38 +321,39 @@ export default {
             color: '#a2b4c9',
             // rotate: 0
           },
-          data: [
-            '2022-11-01',
-            '2022-11-02',
-            '2022-11-03',
-            '2022-11-04',
-            '2022-11-05',
-            '2022-11-06',
-            '2022-11-07',
-            '2022-11-08',
-            '2022-11-09',
-            '2022-11-10',
-            '2022-11-11',
-            '2022-11-12',
-            '2022-11-13',
-            '2022-11-14',
-            '2022-11-15',
-            '2022-11-16',
-            '2022-11-17',
-            '2022-11-18',
-            '2022-11-19',
-            '2022-11-20',
-            '2022-11-21',
-            '2022-11-22',
-            '2022-11-23',
-            '2022-11-24',
-            '2022-11-25',
-            '2022-11-26',
-            '2022-11-27',
-            '2022-11-28',
-            '2022-11-29',
-            '2022-11-30',
-          ],
+          // data: [
+          //   '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: {
@@ -337,69 +383,71 @@ export default {
           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
-          },
+          // 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'
         },
-        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,
-            ],
-            // smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              width: 3,
-              color: '#EA0706',
-            },
-          },
-          {
-            name: 'MA5',
-            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,
-            ],
-            // smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              width: 3,
-              color: '#067607',
-              // type: 'dashed',
-            },
-          },
-          {
-            name: 'MA5',
-            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,
-            ],
-            // smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              width: 3,
-              color: '#0000FB',
-              // type: 'dashed',
-            },
-          },
-        ],
+        color: ['#f00', '#f0f', '#ff0'],
+        // 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,
+        //     ],
+        //     // smooth: true,
+        //     // showSymbol: false,
+        //     // lineStyle: {
+        //     //   width: 3,
+        //     //   color: '#EA0706',
+        //     // },
+        //   },
+        //   {
+        //     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,
+        //     ],
+        //     // smooth: true,
+        //     // showSymbol: false,
+        //     // lineStyle: {
+        //     //   width: 3,
+        //     //   color: '#067607',
+        //     //   // type: 'dashed',
+        //     // },
+        //   },
+        //   {
+        //     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,
+        //     ],
+        //     // smooth: true,
+        //     // showSymbol: false,
+        //     // lineStyle: {
+        //     //   width: 3,
+        //     //   color: '#0000FB',
+        //     //   // type: 'dashed',
+        //     // },
+        //   },
+        // ],
+        series: this.chartData.seriesData
       }
-      myChart.setOption(option)
+      this.myChart.setOption(option)
     },
     modelTypeChange(data) {
       this.queryParams.model_types = data.join(',')
diff --git a/src/views/chart/pages/Configure.vue b/src/views/chart/pages/Configure.vue
index 75fbb87..f514e2d 100644
--- a/src/views/chart/pages/Configure.vue
+++ b/src/views/chart/pages/Configure.vue
@@ -4,28 +4,42 @@
     <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.dateTime1" type="datetime" placeholder="选择日期时间" class="dark-date-picker" popper-class="dark-date-picker"></el-date-picker>
+          <!--<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.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 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-form-item>
         </el-form>
       </div>
       <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 prop="name" label="XE131M_CONC" width="180"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_MDC"> </el-table-column>
-        <el-table-column prop="name" label="XE131M_CONC"> </el-table-column>
-        <el-table-column prop="address" label="XE131M_MDC"> </el-table-column>
+        <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>
@@ -48,35 +62,11 @@ export default {
       queryParams: {
         page: 1,
         size: 10,
-        acquisition_start_begin: '',
-        acquisition_start_end: '',
+        create_time_begin: '',
+        create_time_end: '',
       },
-      tableData: [
-        {
-          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: ''
-        },
-      ],
+      tableData: [],
+      dateRage: []
     }
   },
   created () {
@@ -85,13 +75,17 @@ export default {
   methods: {
     onSearch () {
       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.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]
+    },
     async onSave() {
       const res = await this.$axios.post(window.CONFIG.baseUrl + '/wwwwwwwwwwwwwwwwwwwwwwwwwwww', this.tableData)
       debugger
diff --git a/src/views/chart/pages/ConfigureChart.vue b/src/views/chart/pages/ConfigureChart.vue
new file mode 100644
index 0000000..ee44abd
--- /dev/null
+++ b/src/views/chart/pages/ConfigureChart.vue
@@ -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>
diff --git a/src/views/chart/pages/Dataset.vue b/src/views/chart/pages/Dataset.vue
index f6e68e8..03ccb51 100644
--- a/src/views/chart/pages/Dataset.vue
+++ b/src/views/chart/pages/Dataset.vue
@@ -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-form-item>
           <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-upload
               ref="upload"
@@ -105,8 +105,9 @@ export default {
 
       // 将所有文件添加到 FormData
       this.selectedFiles.forEach(file => {
-        formData.append('files[]', file)
+        formData.append('files', file)
       });
+      formData.append('create_by', 'system')
 
       // 使用 axios 发送请求
       return new Promise((resolve, reject) => {
diff --git a/src/views/chart/pages/LoadFromDb.vue b/src/views/chart/pages/LoadFromDb.vue
index 11e1f5b..4fa3542 100644
--- a/src/views/chart/pages/LoadFromDb.vue
+++ b/src/views/chart/pages/LoadFromDb.vue
@@ -4,12 +4,26 @@
     <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-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-button type="primary" icon="upload" style="background-color: #7393b7; border-color: #7393b7; border-radius: 0;">Upload</el-button>-->
@@ -49,8 +63,6 @@
 </template>
 
 <script>
-import {listUser} from "@/api/system/user.js";
-
 export default {
   data() {
     return {
@@ -59,11 +71,12 @@ export default {
       queryParams: {
         page: 1,
         size: 10,
-        acquisition_start_begin: '',
-        acquisition_start_end: '',
+        create_time_begin: '',
+        create_time_end: '',
       },
       tableData: [],
-      fileList: []
+      fileList: [],
+      dateRage: []
     }
   },
   created () {
@@ -93,6 +106,10 @@ export default {
       const file = files[0]
       this.$refs.upload.handleStart(file)
     },
+    dateChange(dates) {
+      this.queryParams.create_time_begin = dates[0]
+      this.queryParams.create_time_end = dates[1]
+    },
   },
 }
 </script>
diff --git a/src/views/chart/pages/Predict.vue b/src/views/chart/pages/Predict.vue
new file mode 100644
index 0000000..e38c8ca
--- /dev/null
+++ b/src/views/chart/pages/Predict.vue
@@ -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>