feat: 对接LoadFromDB接口，增加右侧四图表实时值显示，优化刷选时的逻辑，修改某些公共样式

src/style.less

@@ -18,8 +18,15 @@
 
 @modal-footer-border-color-split: @formInputBorderColor;
 
+@disabled-color: rgba(255, 255, 255, .25);
+@background-color-base: darken(@primary-color, 20);
+@border-color-base: darken(@primary-color, 20);
+
+@text-color: #fff;
+
 .ant-btn:hover,
-.ant-btn:active {
+.ant-btn:active,
+.ant-btn:focus {
   color: #fff !important;
   border-color: transparent;
 }

src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue

@@ -19,6 +19,7 @@
           :option="twoDOption"
           @zr:mousemove="handleMouseMove"
           @zr:mousedown="handleMouseDown"
+          @zr:mouseup="handleMouseUp"
           @brushEnd="handleBrushEnd"
         />
         <div class="bar">
@@ -338,6 +339,22 @@ export default {
       })
     },
 
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        // 清理刷选的范围
+        chart.dispatchAction({
+          type: 'brush',
+          areas: []
+        })
+
+        // 改为不可刷选状态
+        chart.dispatchAction({
+          type: 'takeGlobalCursor'
+        })
+      }, 0)
+    },
+
     // 刷选完毕时
     handleBrushEnd(param) {
       const chart = this.$refs.chartRef.getChartInstance()

src/views/spectrumAnalysis/components/Modals/LoadFromDBModal.vue

@@ -1,6 +1,11 @@
 <template>
-  <custom-modal v-model="visible" :width="1200" title="Load From Database" class="load-from-db-modal">
+  <custom-modal v-model="visible" :width="1280" title="Load From Database" class="load-from-db-modal">
-    <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> </search-form>
+    <search-form ref="searchFormRef" :items="formItems" v-model="queryParam">
+      <a-space slot="additional">
+        <a-button @click="handleReset">Reset</a-button>
+        <a-button type="primary" @click="searchQuery">Search</a-button>
+      </a-space>
+    </search-form>
     <custom-table
       size="middle"
       rowKey="sampleId"
@@ -10,12 +15,19 @@
       :loading="loading"
       @change="handleTableChange"
       :selectedRowKeys.sync="selectedRowKeys"
+      :selectionRows.sync="selectionRows"
       :multiple="true"
     >
     </custom-table>
     <!-- 底部操作栏 -->
     <template slot="custom-footer">
-      <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+      <a-space>
+        <a-radio-group v-model="queryParam.dbName">
+          <a-radio value="auto">From Auto DB</a-radio>
+          <a-radio value="man">From Interactive DB</a-radio>
+        </a-radio-group>
+        <a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
+      </a-space>
     </template>
   </custom-modal>
 </template>
@@ -23,6 +35,7 @@
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import { getAction } from '../../../../api/manage'
+import moment from 'moment'
 
 const columns = [
   {
@@ -93,7 +106,17 @@ export default {
     this.columns = columns
     this.disableMixinCreated = true
     return {
+      queryParam: {
+        menuTypes: [],
+        startDate: moment()
+          .add(-7, 'd')
+          .format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+        dbName: 'auto'
+      },
       selectedRowKeys: [],
+      selectionRows: [],
+
       stationList: [],
       detectorList: [],
       url: {
@@ -105,12 +128,23 @@ export default {
   methods: {
     loadData(arg) {
       const params = this.getQueryParams() //查询条件
-      if (!params.menuTypes || !params.menuTypes.length) {
+      const { startDate, endDate, menuTypes } = params 
-        this.$message.warn('Please Select MenuTypes First')
+      if (!menuTypes || !menuTypes.length) {
+        this.$message.warn('Please Select SampleType First')
         return
       }
 
-      params.menuTypes = params.menuTypes.join(',')
+      if(!startDate || !endDate) {
+        this.$message.warn(`'From' Date And 'To' Date Cannot Be Null`)
+        return
+      }
+
+      if(moment(startDate).isAfter(moment(endDate))) {
+        this.$message.warn(`'From' Date Cannot Be Late Than 'To' Date`)
+        return
+      }
+
+      params.menuTypes = menuTypes.join(',')
 
       //加载数据 若传入参数1则加载第一页的内容
       if (arg === 1) {
@@ -153,26 +187,29 @@ export default {
         this.$message.warn('Please Select Databases To Load')
         return
       }
+
+      console.log('%c [  ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectionRows)
       this.isLoadingSample = true
       const res = await ''
       console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
+      this.selectedRowKeys = []
       this.isLoadingSample = false
       this.visible = false
     },
 
-    async getStationAndDetectorList() {
+    // 获取台站和探测器列表
-      const params = this.getQueryParams() //查询条件
+    async getStationAndDetectorList(value) {
-      if (!params.menuTypes || !params.menuTypes.length) {
+      if (!value || !value.length) {
         return
       }
-      params.menuTypes = params.menuTypes.join(',')
 
       try {
         const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
-          menuTypes: []
+          menuTypes: value.join(',')
         })
         if (success) {
-          this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
+          this.stationList = result.stationCode.map(item => ({ label: item, value: item }))
+          this.detectorList = result.detectorCode.map(item => ({ label: item, value: item }))
         } else {
           this.$message.error(message)
         }
@@ -181,6 +218,11 @@ export default {
       }
     },
 
+    // 重置搜索栏
+    handleReset() {
+      this.$refs.searchFormRef.$refs.form.resetFields()
+    },
+
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
@@ -197,7 +239,7 @@ export default {
     formItems() {
       return [
         {
-          label: 'MenuType',
+          label: 'SampleType',
           type: 'custom-select',
           name: 'menuTypes',
           props: {
@@ -211,61 +253,51 @@ export default {
                 label: 'Beta',
                 value: 'B'
               }
-            ]
+            ],
+            maxTagCount: 1,
+            maxTagPlaceholder: '...'
           },
           style: {
-            width: '16.6%'
+            width: '23%'
           },
           on: {
-            change: () => {
+            change: event => {
-              this.getStationAndDetectorList()
+              this.getStationAndDetectorList(event)
             }
           }
         },
         {
           label: 'Station',
           type: 'custom-select',
-          name: 'stationId',
+          name: 'stationName',
           props: {
-            options: [
+            options: this.stationList,
-              {
-                label: 'ALL',
-                value: ''
-              },
-              ...this.stationList
-            ],
             showSearch: true,
             filterOption: this.filterOption,
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '16%'
           }
         },
         {
           label: 'Detector',
           type: 'custom-select',
-          name: 'detectorId',
+          name: 'detectorsName',
           props: {
-            options: [
+            options: this.detectorList,
-              {
-                label: 'ALL',
-                value: ''
-              },
-              ...this.detectorList
-            ],
             showSearch: true,
             filterOption: this.filterOption,
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '16%'
           }
         },
         {
           label: 'Sample',
           type: 'custom-select',
-          name: 'sample',
+          name: 'sampleType',
           props: {
             options: [
               {
@@ -284,7 +316,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
@@ -321,13 +353,13 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
           label: 'Qualifier',
           type: 'custom-select',
-          name: 'dataType',
+          name: 'spectralQualifie',
           props: {
             options: [
               {
@@ -342,7 +374,7 @@ export default {
             allowClear: true
           },
           style: {
-            width: '16.6%'
+            width: '15%'
           }
         },
         {
@@ -363,8 +395,8 @@ export default {
           props: {
             options: [
               { label: 'All User', value: 'allUser' },
-              { label: 'Collect Stop', value: 'collectStop' },
+              { label: 'Collect Stop', value: 'CollectStop' },
-              { label: 'Acq.Start', value: 'acqDotStart' }
+              { label: 'Acq.Start', value: 'AcqStart' }
             ]
           },
           style: {
@@ -376,15 +408,14 @@ export default {
           type: 'custom-date-picker',
           name: 'startDate',
           props: {
-            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD',
-            format: 'YYYY-MM-DD HH:mm',
+            valueFormat: 'YYYY-MM-DD',
-            valueFormat: 'YYYY-MM-DD HH:mm:ss',
             style: {
               minWidth: 'auto'
             }
           },
           style: {
-            width: '20%'
+            width: '19%'
           }
         },
         {
@@ -392,17 +423,16 @@ export default {
           type: 'custom-date-picker',
           name: 'endDate',
           props: {
-            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD',
-            format: 'YYYY-MM-DD HH:mm',
+            valueFormat: 'YYYY-MM-DD',
-            valueFormat: 'YYYY-MM-DD HH:mm:ss',
             style: {
               minWidth: 'auto'
             }
           },
           style: {
             paddingRight: 0,
-            marginRight: '16px',
+            marginRight: '22px',
-            width: '20%'
+            width: '19%'
           }
         }
       ]
@@ -413,5 +443,10 @@ export default {
 
 <style lang="less" scoped>
 .load-from-db-modal {
+  ::v-deep {
+    .search-btn {
+      display: none;
+    }
+  }
 }
 </style>

src/views/spectrumAnalysis/components/SpectrumLineChart.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="spectrum-line-chart">
-    <div class="calculation">
+    <div class="summary-text">
-      <span>Channel: 136</span>
+      <span>Channel: {{ summary.channel }}</span>
-      <span>Count: 1475</span>
+      <span>Count: {{ summary.count }}</span>
-      <span class="error">Energy: 381.409</span>
+      <span class="error">Energy: {{ summary.energy }}</span>
     </div>
     <div class="chart-container">
       <div class="left-title">{{ title + ' Count' }}</div>
@@ -14,6 +14,7 @@
         style="height: 100%"
         @zr:mousemove="handleMouseMove"
         @zr:mousedown="handleMouseDown"
+        @zr:mouseup="handleMouseUp"
         @brushEnd="handleBrushEnd"
       ></custom-chart>
     </div>
@@ -133,7 +134,13 @@ export default {
     option.series.itemStyle.color = this.color
     option.xAxis.name = this.title + ' Channel'
     return {
-      option
+      option,
+
+      summary: {
+        channel: 0,
+        count: 0,
+        energy: 0
+      }
     }
   },
   mounted() {
@@ -149,8 +156,13 @@ export default {
       setTimeout(() => {
         if (xAxis) {
           this.option.series.markLine.data = [{ xAxis }]
+          this.summary.channel = xAxis
+          this.summary.count = this.option.series.data[xAxis][1]
         } else {
           this.option.series.markLine.data = []
+          this.summary.channel = 0
+          this.summary.count = 0
+          this.summary.energy = 0
         }
       }, 0)
     },
@@ -182,6 +194,22 @@ export default {
       })
     },
 
+    handleMouseUp() {
+      setTimeout(() => {
+        const chart = this.$refs.chartRef.getChartInstance()
+        // 清理刷选的范围
+        chart.dispatchAction({
+          type: 'brush',
+          areas: []
+        })
+
+        // 改为不可刷选状态
+        chart.dispatchAction({
+          type: 'takeGlobalCursor'
+        })
+      }, 0)
+    },
+
     // 刷选完毕时
     handleBrushEnd(param) {
       const chart = this.$refs.chartRef.getChartInstance()
@@ -224,10 +252,11 @@ export default {
 .spectrum-line-chart {
   height: 100%;
 
-  .calculation {
+  .summary-text {
     line-height: 10px;
     text-align: right;
     font-size: 14px;
+    user-select: none;
 
     .error {
       color: #ff5656;
@@ -270,6 +299,7 @@ export default {
     font-size: 14px;
     color: #5b9cba;
     text-align: center;
+    user-select: none;
   }
 }
 </style>