新增页面和接口联调

src/views/chart/pages/Calculation.vue

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

src/views/chart/pages/Configure.vue

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

src/views/chart/pages/ConfigureChart.vue

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

src/views/chart/pages/MonitorResult.vue

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

src/views/chart/pages/Predict.vue

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