WIP: Extrapolation图表的操作部分

src/components/CustomChart/index.vue

@@ -6,7 +6,7 @@ import * as echarts from 'echarts'
 import 'echarts-gl'
 
 const events = ['click', 'brushEnd']
-const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick']
+const zrEvents = ['mousemove', 'mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu']
 export default {
   props: {
     option: {

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaExtrapolationModal.vue

@@ -30,9 +30,21 @@
       <!-- 两个图表开始 -->
       <div class="gamma-beta-spectrum-sample border">
         <div class="gamma-spectrum-sample">
-          <div class="title">Gamma Spectrum:Sample</div>
+          <div class="title">
+            <div>Gamma Spectrum:Sample</div>
+            <div class="total-counts">
+              <span>Total Counts:</span>
+              <span class="count-1">{{ totalCount[0] }}</span>
+              <span class="count-2">{{ totalCount[1] }}</span>
+            </div>
+          </div>
           <div class="chart border">
-            <custom-chart ref="gammaSpectrumChart" :option="gammaSpectrumChartOption" @zr:click="handleChartClick" />
+            <custom-chart
+              ref="gammaSpectrumChart"
+              :option="gammaSpectrumChartOption"
+              @zr:click="handleChartClick($event, true)"
+              @zr:contextmenu="handleChartClick($event, false)"
+            />
             <!-- 自定义tooltip，用于点击图表后的tooltip显示 -->
             <div
               v-if="customToolTip.visible"
@@ -45,6 +57,17 @@
               <div class="channel">Channel: {{ customToolTip.channel }}</div>
               <div class="channel">Energy: {{ customToolTip.energy }}</div>
             </div>
+            <div
+              v-if="customToolTip2.visible"
+              class="custom-tool-tip"
+              :style="{
+                top: customToolTip2.top + 'px',
+                left: customToolTip2.left + 'px'
+              }"
+            >
+              <div class="channel">Channel: {{ customToolTip2.channel }}</div>
+              <div class="channel">Energy: {{ customToolTip2.energy }}</div>
+            </div>
             <!-- tooltip结束 -->
           </div>
         </div>
@@ -66,18 +89,18 @@
               <div class="title">Gamma Window Setting</div>
               <div class="content">
                 <div class="label">Gamma Window Begin:</div>
-                <a-input-number size="small"></a-input-number> Channel
+                <a-input-number size="small" v-model="model.windowBegin"></a-input-number> Channel
                 <div class="label">Gamma Window End:</div>
-                <a-input-number size="small"></a-input-number> Channel
+                <a-input-number size="small" v-model="model.windowEnd"></a-input-number> Channel
               </div>
             </div>
             <div class="setting-item">
               <div class="title">Parameter Setting</div>
               <div class="content">
                 <div class="label">Min of Energy:</div>
-                <a-input-number size="small"></a-input-number> keV
+                <a-input-number size="small" v-model="model.energy"></a-input-number> keV
                 <div class="label">Half Life:</div>
-                <a-input-number size="small"></a-input-number> Day
+                <a-input-number size="small" v-model="model.halfLife"></a-input-number> Day
               </div>
             </div>
             <div class="setting-item">
@@ -174,6 +197,7 @@ import { getAction } from '@/api/manage'
 import { useBaseChartSetting } from '../../../useChart'
 import TitleOverBorder from '../../TitleOverBorder.vue'
 import SampleDataMixin from '@/views/spectrumAnalysis/SampleDataMixin'
+import { isNullOrUndefined } from '@/utils/util'
 
 const initialGammaChartOption = {
   grid: {
@@ -226,7 +250,8 @@ const initialGammaChartOption = {
     },
     axisLabel: {
       color: '#ade6ee'
-    }
+    },
+    animation: false
   },
   series: [
     {
@@ -248,8 +273,9 @@ const initialGammaChartOption = {
         lineStyle: {
           color: '#f00'
         },
-        data: []
+        data: [{ xAxis: -1 }, { xAxis: -1 }]
-      }
+      },
+      animation: false
     },
     {
       type: 'line',
@@ -257,7 +283,8 @@ const initialGammaChartOption = {
         color: '#A8DA56'
       },
       symbol: 'none',
-      data: []
+      data: [],
+      animation: false
     }
   ]
 }
@@ -313,7 +340,8 @@ const initialBetaChartOption = {
     },
     axisLabel: {
       color: '#ade6ee'
-    }
+    },
+    animation: false
   },
   series: [
     {
@@ -336,7 +364,8 @@ const initialBetaChartOption = {
           color: '#f00'
         },
         data: []
-      }
+      },
+      animation: false
     },
     {
       type: 'line',
@@ -344,7 +373,8 @@ const initialBetaChartOption = {
         color: '#A8DA56'
       },
       symbol: 'none',
-      data: []
+      data: [],
+      animation: false
     }
   ]
 }
@@ -417,6 +447,14 @@ const columns = [
   }
 ]
 
+const initialModel = {
+  windowBegin: null,
+  windowEnd: null,
+  energy: 0.1,
+  halfLife: 5.243,
+  fittingType: '1'
+}
+
 export default {
   mixins: [ModalMixin, SampleDataMixin],
   components: {
@@ -437,27 +475,36 @@ export default {
         channel: '',
         energy: ''
       },
+      customToolTip2: {
+        top: 0,
+        left: 0,
+        visible: false,
+        channel: '',
+        energy: ''
+      },
+
+      totalCount: [0, 0],
+
       isLoading: false,
 
       detail: {},
       gammaChannelEnergy: [],
 
-      model: {
+      model: cloneDeep(initialModel),
-        fittingType: '1'
-      },
       tableList: []
     }
   },
   methods: {
     beforeModalOpen() {
       this.customToolTip.visible = false
-      const gammaSeries = this.gammaSpectrumChartOption.series
+      this.customToolTip2.visible = false
-      gammaSeries[0].data = []
+      this.gammaSpectrumChartOption = cloneDeep(initialGammaChartOption)
-      gammaSeries[1].data = []
 
-      const betaSeries = this.betaSpectrumChartOption.series
+      this.betaSpectrumChartOption = cloneDeep(initialBetaChartOption)
-      betaSeries[0].data = []
+
-      betaSeries[1].data = []
+      this.model = cloneDeep(initialModel)
+
+      this.calculateTotalCount()
 
       this.getDetail()
     },
@@ -518,23 +565,71 @@ export default {
       }
     },
     // 图表点击
-    handleChartClick(param) {
+    handleChartClick({ offsetX, offsetY, event }, isMouseLeft) {
-      const { offsetX, offsetY } = param
+      event.preventDefault()
+      
       const point = getXAxisAndYAxisByPosition(this.$refs.gammaSpectrumChart.getChartInstance(), offsetX, offsetY)
       if (point) {
+        const markLineData = this.gammaSpectrumChartOption.series[0].markLine.data
         const xAxis = parseInt(point[0].toFixed())
-        this.gammaSpectrumChartOption.series[0].markLine.data = [{ xAxis }]
         
-        this.customToolTip.top = offsetY
+        let currToolTip = this.customToolTip2
-        if (xAxis > 225) {
+
-          this.customToolTip.left = offsetX - 125
+        // 如果是左键
-        } else {
+        if (isMouseLeft) {
-          this.customToolTip.left = offsetX + 20
+          // 如果有右值且左值大于等于右值，清空
+          if(!isNullOrUndefined(this.model.windowEnd) && xAxis >= this.model.windowEnd) {
+            this.clearMarkLineAndToolTip()
+            return
+          }
+
+          currToolTip = this.customToolTip
+
+          markLineData[0].xAxis = xAxis
+          this.model.windowBegin = xAxis
         } 
-        this.customToolTip.visible = true
+        // 如果是右键
-        this.customToolTip.channel = xAxis
+        else {
+          if(!isNullOrUndefined(this.model.windowBegin) && xAxis <= this.model.windowBegin) {
+            this.clearMarkLineAndToolTip()
+            return
+          }
+
+          markLineData[1].xAxis = xAxis
+          this.model.windowEnd = xAxis
+        }
+
+        currToolTip.top = offsetY
+        if (xAxis > 225) {
+          currToolTip.left = offsetX - 125
+        } else {
+          currToolTip.left = offsetX + 20
+        }
+        currToolTip.visible = true
+        currToolTip.channel = xAxis
         const energy = this.gammaChannelEnergy[xAxis] || 0
-        this.customToolTip.energy = parseInt(energy) + 'keV'
+        currToolTip.energy = parseInt(energy) + 'keV'
+
+        this.calculateTotalCount()
+      }
+    },
+
+    clearMarkLineAndToolTip() {
+      const markLineData = this.gammaSpectrumChartOption.series[0].markLine.data
+      markLineData[0].xAxis = -1
+      markLineData[1].xAxis = -1
+
+      this.customToolTip.visible = false
+      this.customToolTip2.visible = false
+
+      this.model.windowBegin = null
+      this.model.windowEnd = null
+    },
+
+    calculateTotalCount() {
+      if(!this.model.windowBegin || !this.model.windowEnd) {
+        this.totalCount = [0, 0]
+        return
       }
     },
 
@@ -551,6 +646,21 @@ export default {
 
 .title {
   color: @primary-color;
+  display: flex;
+  justify-content: space-between;
+}
+
+.total-counts {
+  .count-1 {
+    color: @primary-color;
+    margin-left: 15px;
+  }
+
+  .count-2 {
+    color: #ffc90e;
+    margin-left: 15px;
+    margin-right: 15px;
+  }
 }
 
 .sample-infomation {
@@ -570,6 +680,7 @@ export default {
       padding: 5px;
       width: 200px;
       height: 100%;
+      line-height: 22px;
     }
   }
 }
@@ -635,7 +746,7 @@ export default {
         width: 100%;
 
         &:last-child {
-            margin-top: 10px;
+          margin-top: 10px;
         }
       }
     }