WIP: 实现二级菜单中Spectra组件，修改一级菜单结构，并在菜单中增加已选中文件功能；绘制3D Scatter和3D Surface 图表（进行中）

package.json

@@ -24,6 +24,7 @@
     "dayjs": "^1.8.0",
     "dom-align": "1.12.0",
     "echarts": "^5.4.2",
+    "echarts-gl": "^2.0.9",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",

src/components/Custom3DChart/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="custom-chart" ref="containerRef" :style="{ height: height + 'px' }"></div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import 'echarts-gl'
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    height: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.chart = echarts.init(this.$refs.containerRef)
+    this.chart.setOption(this.option)
+  },
+  methods: {
+    resize() {
+      this.chart && this.chart.resize()
+    }
+  },
+  watch: {
+    option: {
+      handler() {
+        if (this.chart) {
+          this.chart.setOption(this.option)
+        }
+      },
+      deep: true
+    },
+    height() {
+      this.$nextTick(() => {
+        this.chart && this.chart.resize()
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.custom-chart {
+  height: 100% !important;
+}
+</style>

src/components/CustomChart/index.vue

@@ -30,7 +30,6 @@ export default {
     option: {
       handler() {
         if(this.chart) {
-          this.chart.clear()
           this.chart.setOption(this.option)
         }
       },

src/views/spectrumAnalysis/components/BetaGammaSpectrumChart.vue

@@ -10,34 +10,51 @@
       >
     </div>
     <div class="beta-gamma-spectrum-chart-main">
-      <custom-chart ref="chartRef" :option="option" />
+      <!-- 2D 图表 -->
+      <div class="_2d-chart" v-if="active == 0">
+        <custom-chart ref="chartRef" :option="twoDOption" />
+        <div class="bar">
+          <div>256</div>
+          <div class="bar-main"></div>
+          <div>0</div>
+        </div>
+      </div>
+      <!-- 2D图表结束 -->
+
+      <!-- 3D Surface开始 -->
+      <Custom3DChart v-if="active == 1" key="1" ref="_3dSurfaceRef" :option="threeDSurfaceOption" />
+      <!-- 3D Surface结束 -->
+      <!-- 3D Scatter -->
+      <Custom3DChart v-if="active == 2" key="2" ref="_3dScannerRef" :option="threeDScatterOption" />
+      <!-- 3D Scatter结束 -->
     </div>
   </div>
 </template>
 
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
+import Custom3DChart from '@/components/Custom3DChart/index.vue'
 const buttons = ['2D', '3D Surface', '3D Scatter', 'Unzoom']
 
-const option = {
+// 2D 配置
-  visualMap: [{
+const twoDOption = {
-    min: 0,
-    max: 256,
-    calculable: true,
-    orient: 'vertical',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    inRange: {
-      color: ['#fff', '#f00']
-    }
-  }],
   grid: {
     top: 15,
     left: 55,
-    right: 40,
+    right: 10,
     bottom: 45
   },
+  tooltip: {
+    trigger: 'axis',
+    showContent: false,
+    axisPointer: {
+      animation: false,
+      type: 'cross',
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
   xAxis: {
     name: 'Beta Channel',
     nameTextStyle: {
@@ -61,8 +78,7 @@ const option = {
     },
     min: 0,
     max: 256,
-    interval: 64,
+    interval: 64
-    data: new Array(256).fill(0).map((_, index) => index)
   },
   yAxis: {
     name: 'Gamma Channel',
@@ -87,24 +103,169 @@ const option = {
     },
     min: 0,
     max: 256,
-    interval: 64,
+    interval: 64
-    data: new Array(256).fill(0).map((_, index) => index)
+  },
+  series: [
+    {
+      xAxisIndex: 0,
+      yAxisIndex: 0,
+      type: 'scatter',
+      symbolSize: 2.5,
+      itemStyle: {
+        color: '#fff'
+      },
+      data: new Array(1256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
+    },
+    {
+      type: 'line'
+    }
+  ]
+}
+
+//3D Surface 配置
+
+const threeDSurfaceOption = {
+  visualMap: {
+    show: false,
+    dimension: 2,
+    min: 0,
+    max: 5,
+    inRange: ['#47C134', '#f00']
+  },
+  grid3D: {
+    axisLabel: {
+      color: '#C4E5A6'
+    },
+    axisPointer: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    }
+  },
+  xAxis3D: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  yAxis3D: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  zAxis3D: {
+    name: 'Count',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    max: 5
   },
   series: {
-    type: 'scatter',
+    type: 'surface',
-    symbolSize: 2,
+    data: [
-    data: new Array(256).fill(0).map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256)])
+      [64, 64, 0],
+      [66, 66, 0],
+      [66, 66, 0],
+      [65, 65, 4],
+
+      [128, 128, 0],
+      [130, 130, 0],
+      [130, 130, 0],
+      [129, 129, 4]
+    ]
   }
 }
+
+// 3D Scatter 配置
+const threeDScatterOption = {
+  grid3D: {
+    axisLabel: {
+      color: '#C4E5A6'
+    },
+    axisPointer: {
+      show: false
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#fff'
+      }
+    }
+  },
+  xAxis3D: {
+    name: 'Beta Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  yAxis3D: {
+    name: 'Gamma Channel',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    min: 0,
+    max: 256,
+    interval: 64
+  },
+  zAxis3D: {
+    name: 'Count',
+    nameTextStyle: {
+      color: '#C4E5A6',
+      fontSize: 14
+    },
+    max: 6
+  },
+  series: {
+    type: 'scatter3D',
+    symbolSize: 2.5,
+    itemStyle: {
+      color: '#a2d092'
+    },
+    data: new Array(512)
+      .fill(0)
+      .map(() => [parseInt(Math.random() * 256), parseInt(Math.random() * 256), 4.5 + Math.random() * 0.1])
+  }
+}
+
 export default {
   components: {
-    CustomChart
+    CustomChart,
+    Custom3DChart
   },
   data() {
     this.buttons = buttons
     return {
-      active: 0,
+      active: 1,
-      option
+      twoDOption,
+      threeDSurfaceOption,
+      threeDScatterOption
     }
   },
   methods: {
@@ -113,7 +274,9 @@ export default {
     },
 
     resize() {
-      this.$refs.chartRef.resize()
+      this.$refs.chartRef && this.$refs.chartRef.resize()
+      this.$refs._3dSurfaceRef && this.$refs._3dSurfaceRef.resize()
+      this.$refs._3dScannerRef && this.$refs._3dScannerRef.resize()
     }
   }
 }
@@ -152,7 +315,34 @@ export default {
   }
 
   &-main {
-    height: calc(100% - 26px);
+    height: calc(100% - 40px);
+    margin-top: 15px;
+
+    ._2d-chart {
+      height: 100%;
+      display: flex;
+
+      .custom-chart {
+        width: calc(100% - 45px);
+      }
+
+      .bar {
+        width: 30px;
+        margin-left: 15px;
+        height: 100%;
+        color: #ade6ee;
+        padding-top: 5px;
+        padding-bottom: 38px;
+        text-align: center;
+
+        &-main {
+          display: inline-block;
+          width: 14px;
+          height: calc(100% - 42px);
+          background: linear-gradient(to bottom, #ff0000 0, #fff 100%);
+        }
+      }
+    }
   }
 }
 </style>

src/views/spectrumAnalysis/components/SpectraListInMenu.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-menu class="spectra-list-in-menu">
+    <a-menu-item v-for="item in list" :key="item.id" @click="handleClick(item)">
+      <span class="checkbox">
+        <a-icon v-if="item.checked" type="check" style="color: #0de30d" />
+      </span>
+      <span class="name">{{ item.name }}</span>
+      <a-icon type="delete" @click.stop="handleRemove(item)" />
+    </a-menu-item>
+  </a-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    handleClick(spectraItem) {
+      this.list.forEach(item => (item.checked = false))
+      spectraItem && (spectraItem.checked = true)
+      this.$emit('change', spectraItem)
+      this.$forceUpdate()
+    },
+
+    handleRemove(spectraItem) {
+      const index = this.list.findIndex(item => item == spectraItem)
+      this.list.splice(index, 1)
+      // 如果删除了一个选中的
+      if (spectraItem.checked) {
+        if (index == 0) {
+          // 如果是第一个，则选中下一个
+          this.handleClick(this.list[0])
+        } else {
+          // 如果不是第一个，则选中上一个
+          this.handleClick(this.list[index - 1])
+        }
+      }
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.spectra-list-in-menu {
+  .checkbox {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+  }
+
+  .name {
+    display: inline-block;
+    width: 300px;
+    margin: 0 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+  }
+}
+</style>

src/views/spectrumAnalysis/components/SpectrumLineChart.vue

@@ -12,7 +12,7 @@ import { cloneDeep } from 'lodash'
 const initialOption = {
   grid: {
     top: 25,
-    right: 0,
+    right: 12,
     bottom: 40
   },
   title: {
@@ -33,7 +33,9 @@ const initialOption = {
     }
   },
   xAxis: {
-    type: 'category',
+    min: 0,
+    max: 256,
+    interval: 64,
     axisLine: {
       lineStyle: {
         color: 'rgb(119, 181, 213, 0.5)'
@@ -57,10 +59,12 @@ const initialOption = {
       fontSize: 14,
       color: '#5b9cba'
     },
-    nameGap: 25,
+    nameGap: 25
-    data: new Array(256).fill(0).map((_, index) => index)
   },
   yAxis: {
+    min: 0,
+    max: 21099,
+    interval: 21000 / 4,
     axisLine: {
       show: true,
       lineStyle: {
@@ -84,7 +88,7 @@ const initialOption = {
     symbol: 'none',
     data: new Array(256)
       .fill(0)
-      .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800)))
+      .map((_, index) => [index, (Math.random() < 0.05 ? parseInt(Math.random() * 19644) : parseInt(Math.random() * 800))])
   }
 }
 

src/views/spectrumAnalysis/components/sub-operators/PopOverWithIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-popover :placement="placement" overlayClassName="popover-with-icon">
+  <a-popover :placement="placement" overlayClassName="popover-with-icon" v-model="innerVisible">
     <div class="pop-over-with-icon">
       <span class="text">
         <slot />
@@ -17,6 +17,25 @@ export default {
     placement: {
       type: String,
       default: 'bottom'
+    },
+    value: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      innerVisible: false
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.innerVisible = val
+      },
+      immediate: true
+    },
+    innerVisible(val) {
+      this.$emit('input', val)
     }
   }
 }

src/views/spectrumAnalysis/components/sub-operators/Spectra.vue

@@ -1,14 +1,74 @@
 <template>
   <div class="spectra">
-    spectra
+    <div
+      :class="'spectra-item' + (item.title == innerValue ? ' active' : '')"
+      v-for="(item, index) in list"
+      :key="index"
+      @click="handleClick(item)"
+    >
+      {{ item.title }}
+    </div>
   </div>
 </template>
 
 <script>
-export default {}
+const list = [
+  {
+    title: 'Sample Data'
+  },
+  {
+    title: 'GasBg Data'
+  },
+  {
+    title: 'DetBg Data'
+  },
+  {
+    title: 'QC Data'
+  }
+]
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    this.list = list
+    return {}
+  },
+  methods: {
+    handleClick(item) {
+      this.innerValue = item.title
+    }
+  },
+  computed: {
+    innerValue: {
+      set(val) {
+        this.$emit('input', val)
+      },
+      get() {
+        return this.value
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .spectra {
+  width: 159px;
+  max-height: 200px;
+  overflow: auto;
+
+  &-item {
+    padding: 4px 14px;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      background-color: #055565;
+    }
+  }
 }
 </style>

src/views/spectrumAnalysis/index.vue

@@ -2,15 +2,23 @@
   <div class="spectrum-analysis">
     <!-- 顶部操作栏 -->
     <div class="spectrum-analysis-operators">
-      <a-dropdown class="spectrum-analysis-operators-item" v-for="operation in operations" :key="operation.title">
+      <a-dropdown
+        class="spectrum-analysis-operators-item"
+        overlayClassName="spectrum-analysis-operators-dropdown-overlay"
+        :overlay-style="operation.style"
+        v-for="operation in operations"
+        :key="operation.title"
+      >
         <a-button type="primary">{{ operation.title }}</a-button>
-        <template slot="overlay">
+        <div slot="overlay">
-          <a-menu>
+          <template v-for="(child, index) in operation.children">
-            <a-menu-item v-for="child in operation.children" :key="child.title" @click="child.handler">
+            <component :is="child.type" :key="index" v-bind="child.attrs" v-on="child.on">
-              {{ child.title }}
+              <component :is="item.type" v-for="item in child.children" :key="item.title" @click="item.handler">
-            </a-menu-item>
+                {{ item.title }}
-          </a-menu>
+              </component>
+            </component>
           </template>
+        </div>
       </a-dropdown>
     </div>
     <!-- 顶部操作栏结束 -->
@@ -46,9 +54,9 @@
 
       <!-- beta-gamma 独有的二级交互栏 -->
       <template v-if="analysisType == ANALYZE_TYPE.BETA_GAMMA">
-        <pop-over-with-icon placement="bottomLeft" style="width: 159px">
+        <pop-over-with-icon placement="bottomLeft" style="width: 159px" v-model="spectraVisible">
           Spectra
-          <spectra slot="content" />
+          <spectra slot="content" v-model="spectraType" @input="spectraVisible = false" />
         </pop-over-with-icon>
       </template>
       <!-- beta-gamma 独有的二级交互栏结束 -->
@@ -74,6 +82,7 @@ import QcFlags from './components/sub-operators/QcFlags.vue'
 import GammaAnalysis from './gamma-analysis.vue'
 import BetaGammaAnalysis from './beta-gamma-analysis.vue'
 import Spectra from './components/sub-operators/Spectra.vue'
+import SpectraListInMenu from './components/SpectraListInMenu.vue'
 
 // 分析类型
 const ANALYZE_TYPE = {
@@ -90,24 +99,39 @@ export default {
     GraphAssistance,
     DetailedInfomation,
     NuclearLibrary,
-    Spectra
+    Spectra,
+    SpectraListInMenu
   },
   data() {
     this.ANALYZE_TYPE = ANALYZE_TYPE
 
     return {
-      analysisType: ANALYZE_TYPE.BETA_GAMMA // 分析类型
+      analysisType: ANALYZE_TYPE.BETA_GAMMA, // 分析类型
+      spectraType: 'Sample Data',
+      spectraVisible: false,
+
+      spectraList: [
+        { id: 1, name: 'AUX01 003-20151223 1855 S FULL 40183.7.PHD' },
+        { id: 2, name: 'AUX02 003-20151223 1855 S FULL 40183.7.PHD' }
+      ]
     }
   },
   methods: {
+    // 从数据库加载
     handleLoadFromDb() {
       console.log('%c [ handleLoadFromDb ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
+    // 从文件加载
     handleLoadFromFile() {
       console.log('%c [ handleLoadFromFile ]-46', 'font-size:13px; background:pink; color:#bf2c9f;')
     },
 
+    // 清理全部
+    handleCleanAll() {
+      console.log('%c [ handleCleanAll ]-118', 'font-size:13px; background:pink; color:#bf2c9f;')
+    },
+
     // peak info 点击左右方向
     handlePeakInfoChange(direction) {
       this.$refs.gammaAnalysisRef.moveMarkLine(direction)
@@ -125,17 +149,54 @@ export default {
           title: 'SAMPLE',
           children: [
             {
+              type: 'a-menu',
+              children: [
+                {
+                  type: 'a-menu-item',
                   title: 'Load From DB',
                   handler: this.handleLoadFromDb
                 },
                 {
+                  type: 'a-menu-item',
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  type: 'a-menu-item',
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
+            },
+            {
+              type: 'a-divider',
+              attrs: {
+                style: {
+                  marginTop: '5px',
+                  marginBottom: '5px',
+                  display: this.spectraList.length ? '' : 'none'
+                }
+              }
+            },
+            {
+              type: 'SpectraListInMenu',
+              attrs: {
+                list: this.spectraList
+              },
+              on: {
+                change: event => {
+                  console.log('%c [ event ]-187', 'font-size:13px; background:pink; color:#bf2c9f;', event)
+                  console.log('%c [  ]-188', 'font-size:13px; background:pink; color:#bf2c9f;', this)
+                }
+              }
             }
           ]
         },
         {
           title: 'SAVE',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -144,11 +205,20 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
         {
           title: 'ANALYZE',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -157,11 +227,20 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
         {
           title: 'CALIBRATION',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -170,11 +249,20 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
         {
           title: 'NUCLIDELIBRARY',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -183,11 +271,20 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
         {
           title: 'COMMENTS',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -196,11 +293,20 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
         {
           title: 'REPORTS',
+          children: [
+            {
+              type: 'a-menu',
               children: [
                 {
                   title: 'Load From DB',
@@ -209,6 +315,12 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         },
@@ -216,17 +328,7 @@ export default {
           title: 'LOG',
           children: [
             {
-              title: 'Load From DB',
+              type: 'a-menu',
-              handler: this.handleLoadFromDb
-            },
-            {
-              title: 'Load From File',
-              handler: this.handleLoadFromFile
-            }
-          ]
-        },
-        {
-          title: 'HELP',
               children: [
                 {
                   title: 'Load From DB',
@@ -235,6 +337,34 @@ export default {
                 {
                   title: 'Load From File',
                   handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
+            }
+          ]
+        },
+        {
+          title: 'HELP',
+          children: [
+            {
+              type: 'a-menu',
+              children: [
+                {
+                  title: 'Load From DB',
+                  handler: this.handleLoadFromDb
+                },
+                {
+                  title: 'Load From File',
+                  handler: this.handleLoadFromFile
+                },
+                {
+                  title: 'Clean All',
+                  handler: this.handleCleanAll
+                }
+              ]
             }
           ]
         }
@@ -343,3 +473,36 @@ export default {
   // 主体部分结束
 }
 </style>
+<style lang="less">
+.spectrum-analysis-operators-dropdown-overlay {
+  background-color: #03353f;
+  .ant-menu {
+    background: transparent;
+    padding: 0;
+    position: relative;
+    border-right: 0;
+
+    &-item {
+      color: #fff;
+      font-family: Arial;
+      border: 0;
+      background-color: transparent !important;
+      padding: 4px 14px;
+      height: 30px;
+      line-height: 22px;
+      &:hover {
+        background-color: #055565 !important;
+      }
+      &-selected {
+        font-weight: normal;
+      }
+      &-disabled {
+        color: #476d74 !important;
+        &:hover {
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+}
+</style>