AnalysisSystemForRadionuclide_vue/src/views/spectrumAnalysis/gamma-analysis.vue

<template>
  <div class="gamma-analysis">
    <!-- 二级交互栏 -->
    <div class="spectrum-analysis-sub-operators">
      <pop-over-with-icon placement="bottomLeft">
        Detailed-Information
        <detailed-infomation slot="content" />
      </pop-over-with-icon>
      <pop-over-with-icon placement="bottomLeft">
        QC Flags
        <qc-flags slot="content" :data="{ collectionTime: '123' }" />
      </pop-over-with-icon>
      <pop-over-with-icon>
        Graph Assistance
        <graph-assistance slot="content" />
      </pop-over-with-icon>
      <pop-over-with-icon>
        Nuclide Library
        <nuclear-library slot="content" />
      </pop-over-with-icon>
      <div class="peak-info">
        <button-with-switch-icon @change="handlePeakInfoChange">
          Peak Information
        </button-with-switch-icon>
      </div>
    </div>
    <!-- 二级交互栏结束 -->
    <!-- 主体部分 -->
    <div class="gamma-analysis-main">
      <div class="gamma-analysis-chart">
        <custom-chart ref="chartRef" :option="option" style="height: 100%" />
      </div>
      <div class="gamma-analysis-thumbnail">
        <custom-chart :option="thumbnailOption" style="height: 100%" />
      </div>
    </div>
    <!-- 主体部分结束 -->
  </div>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import PopOverWithIcon from './components/SubOperators/PopOverWithIcon.vue'
import DetailedInfomation from './components/SubOperators/DetailedInfomation.vue'
import QcFlags from './components/SubOperators/QcFlags.vue'
import GraphAssistance from './components/SubOperators/GraphAssistance.vue'
import NuclearLibrary from './components/SubOperators/NuclearLibrary.vue'
import ButtonWithSwitchIcon from './components/SubOperators/ButtonWithSwitchIcon.vue'

// 初始配置
const initialOption = {
  grid: {
    top: 40,
    left: 60,
    right: 0
  },
  title: {
    text: '',
    left: 'center',
    bottom: 10,
    textStyle: {
      color: '#8FD4F8',
      rich: {
        a: {
          padding: [0, 20, 0, 0],
          fontSize: 16
        }
      }
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
      type: 'cross',
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: '#ade6ee'
      }
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#ade6ee'
      }
    },
    data: new Array(3928).fill(0).map((_, index) => index)
  },
  yAxis: {
    name: 'Counts',
    nameTextStyle: {
      color: '#8FD4F8',
      fontSize: 16
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#ade6ee'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(173, 230, 238, .2)'
      }
    },
    axisLabel: {
      textStyle: {
        color: '#ade6ee'
      }
    }
  },
  series: [
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
      itemStyle: {
        color: '#24FF0B'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none',
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
        lineStyle: {
          type: 'solid'
        },
        data: [
          {
            xAxis: 100,
            lineStyle: {
              color: 'red'
            }
          }
        ]
      }
    },
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
      itemStyle: {
        color: '#D8DE07'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    }
  ],
  dataZoom: {
    type: 'inside',
    start: 0,
    end: 20,
    zoomLock: true
  }
}

// 缩略图配置
const thumbnailOption = {
  grid: {
    top: 0,
    left: 5,
    right: 5,
    bottom: 0
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    data: new Array(3928).fill(0).map((_, index) => index)
  },
  yAxis: {
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  series: [
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 16000) : parseInt(Math.random() * 800))),
      itemStyle: {
        color: '#24FF0B'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    },
    {
      type: 'line',
      data: new Array(3928)
        .fill(0)
        .map((_, index) => (Math.random() < 0.05 ? parseInt(Math.random() * 14000) : parseInt(Math.random() * 600))),
      itemStyle: {
        color: '#D8DE07'
      },
      lineStyle: {
        width: 1
      },
      symbol: 'none'
    }
  ]
}

export default {
  props: {
    data: {
      type: Object
    },
    chartType: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomChart,
    PopOverWithIcon,
    DetailedInfomation,
    QcFlags,
    GraphAssistance,
    NuclearLibrary,
    ButtonWithSwitchIcon
  },
  data() {
    return {
      option: initialOption,
      thumbnailOption
    }
  },
  created() {
    this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'

    console.log('%c [  ]-108', 'font-size:13px; background:pink; color:#bf2c9f;', this.option)
  },
  methods: {
    resize() {
      this.$refs.chartRef.resize()
    },

    // peak info 点击左右方向
    handlePeakInfoChange(direction) {
      this.moveMarkLine(direction)
    },

    /**
     * 向某一个方向移动标记线
     * @param { 'left'| 'right' } direction
     */
    moveMarkLine(direction) {
      if (direction == 'left') {
        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis - 10
      } else {
        this.option.series[0].markLine.data[0].xAxis = this.option.series[0].markLine.data[0].xAxis + 10
      }

      this.$emit('markLineChange', {})
    }
  },
  watch: {
    data: {
      handler() {},
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.gamma-analysis {
  height: 100%;

  &-main {
    height: calc(100% - 51px);
    display: flex;
    overflow: auto hidden;
    position: relative;
  }

  &-chart {
    width: 100%;
    height: 100%;
  }

  &-thumbnail {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 500px;
    height: 150px;
    background-color: #153e44;
  }
}
</style>