Merge branch 'feature-Beta-dev-renpy' of http://git.hivekion.com:3000/xiaoguangbin/AnalysisSystemForRadionuclide_vue into feature-Beta-dev-renpy

src/views/spectrumAnalysis/beta-analysis.vue

@@ -43,27 +43,27 @@
           <div class="beta-gamma-analysis-main-charts-right">
             <beta-gamma-chart-container>
               <template slot="title"> ROI LIMITS </template>
-              <roi-limits ref="RoiChartRef" :ROILists="ROILists" @sendIndex="getIndex" />
+              <roi-limits ref="RoiChartRef" :ROILists="ROILists" :gammaEnergyData="gammaEnergyData" />
             </beta-gamma-chart-container>
+            <!-- 底部显示 -->
+            <div class="beta-gamma-analysis-main-bottom">
+              <div class="beta-gamma-analysis-main-bottom-left">
+                <beta-gamma-chart-container>
+                  <template slot="title"> Result display </template>
+                  <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
+                </beta-gamma-chart-container>
+              </div>
+              <!-- <div class="beta-gamma-analysis-main-bottom-right">
+                <beta-gamma-chart-container>
+                  <template slot="title"> ROI Param </template>
+                  <roi-param :roiParamList="roiParamList" />
+                </beta-gamma-chart-container>
+              </div> -->
+            </div>
+            <!-- 底部显示结束 -->
           </div>
         </div>
         <!-- 中间图表部分结束 -->
-        <!-- 底部显示 -->
-        <div class="beta-gamma-analysis-main-bottom">
-          <div class="beta-gamma-analysis-main-bottom-left">
-            <beta-gamma-chart-container>
-              <template slot="title"> Result display </template>
-              <result-display-beta :data="resultDisplay" @sendFlag="handleGetFlag"></result-display-beta>
-            </beta-gamma-chart-container>
-          </div>
-          <div class="beta-gamma-analysis-main-bottom-right">
-            <beta-gamma-chart-container>
-              <template slot="title"> ROI Param </template>
-              <roi-param :roiParamList="roiParamList" />
-            </beta-gamma-chart-container>
-          </div>
-        </div>
-        <!-- 底部显示结束 -->
       </div>
       <!-- 主体部分结束 -->
     </a-spin>
@@ -113,7 +113,7 @@ export default {
   data() {
     this.SampleType = SampleType
     return {
-      currSpectrum: '',
+      currSpectrum: 'Sample',
       isLoading: false,
       spectrumData: {}, // Detailed Infomation 信息
       spectraType: 'sample',
@@ -311,6 +311,7 @@ export default {
           this.sampleDetail = result
           this.changeChartByType('sample')
           this.isLoading = false
+          this.currIdx = 2
         } else {
           this.$message.error(message)
         }
@@ -409,10 +410,10 @@ export default {
     }
   }
   &-main {
-    height: calc(100% - 51px);
+    height: calc(100% - 55px);
     overflow: auto hidden;
     &-charts {
-      height: calc(100% - 220px);
+      height: 100% ;
       display: flex;
       gap: 30px;
       overflow: auto hidden;
@@ -421,13 +422,14 @@ export default {
       }
       &-right {
         flex: 1;
+        .betagamma-chart{
+      height: calc(100% - 260px);
+        }
       }
     }
     &-bottom {
       margin-top: 20px;
       height: 234px;
-      display: flex;
-      gap: 30px;
       overflow: auto hidden;
       &-left {
         flex: 1;

src/views/spectrumAnalysis/components/BetaGammaChartContainer.vue

@@ -92,7 +92,6 @@ export default {}
     height: calc(100% - 45px);
     overflow: hidden;
     padding-top: 15px;
-    padding-bottom: 12px;
   }
 }
 </style>

src/views/spectrumAnalysis/components/BetaGammaSpectrum.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="beta-gamma-spectrum-chart">
     <div class="beta-gamma-spectrum-chart-operators">
-      <span
+      <span v-for="(item, index) in buttons" :key="item" :class="active == index ? 'active' : ''" @click="handleChange(index)">
-        v-for="(item, index) in buttons"
-        :key="item"
-        :class="active == index ? 'active' : ''"
-        @click="handleChange(index)"
-      >
         {{ item }}
       </span>
       <span @click="handleUnzoom">Unzoom</span>
@@ -16,22 +11,15 @@
     <div class="beta-gamma-spectrum-chart-main">
       <!-- 2D 图表，为了相应Unzoom采用的v-show -->
       <div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
-        <CustomChart
+        <CustomChart ref="chartTwoDRef" :option="twoDOption" :opts="opts" @zr:mousedown="handleMouseDown" @zr:mouseup="handleMouseUp" @brushEnd="handleBrushEnd" />
-          ref="chartTwoDRef"
-          :option="twoDOption"
-          :opts="opts"
-          @zr:mousedown="handleMouseDown"
-          @zr:mouseup="handleMouseUp"
-          @brushEnd="handleBrushEnd"
-        />
         <!-- @brushEnd="handleBrushEnd" -->
         <!-- @zr:mousemove="handleMouseMove" -->
-        <div class="bar">
+        <!-- <div class="bar">
           <color-palette v-model="currCount" />
           <div>{{ currCount }}</div>
           <div class="bar-main"></div>
           <div>0</div>
-        </div>
+        </div> -->
       </div>
       <!-- 2D图表结束 -->
       <CustomChart v-if="active == 1" key="1" ref="gammaLineChartRef" :option="gammaOption" />
@@ -50,17 +38,17 @@ const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
 // Beta-Gamma 的配置
 const twoDOption = {
   grid: {
-    top: 15,
+    top: 10,
     left: 60,
-    right: 20,
+    right: 70,
     bottom: 45,
   },
   tooltip: {
     trigger: 'item',
-    formatter: (params) => {
+    // formatter: (params) => {
-      const [b, g, c] = params.value
+    //   const [b, g, c] = params.value
-      return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
+    //   return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
-    },
+    // },
     axisPointer: {
       animation: false,
       type: 'cross',
@@ -138,6 +126,7 @@ const twoDOption = {
     {
       type: 'scatterGL',
       symbolSize: 4,
+      zlevel: 4,
       data: [],
       itemStyle: {
         color: '#fff',
@@ -146,10 +135,36 @@ const twoDOption = {
     {
       type: 'line',
       data: [],
-      itemStyle: { color: '#99CA53' },
+      itemStyle: { color: '#0CB4C1' },
+      zlevel: 14,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#1B88E5' },
+      zlevel: 13,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#43960C' },
+      zlevel: 12,
+      showSymbol: false,
+      areaStyle: {}
+    },
+    {
+      type: 'line',
+      data: [],
+      itemStyle: { color: '#D09324' },
       zlevel: 11,
       showSymbol: false,
+      areaStyle: {}
     },
+
   ],
   brush: {},
   animation: false,
@@ -402,11 +417,10 @@ export default {
     // 2D 图表 上的 矩形
     boundary: {
       handler(newVal) {
-        newVal.forEach((item, index) => {
+        // newVal.forEach((item, index) => {
-          item.color = '#99CA53'
+        //   item.color = '#99CA53'
-        })
+        // })
-        this.boundaryData = newVal[this.currIdx]
+        // this.boundaryData = newVal[this.currIdx]
-        this.reDrawRect()
       },
       // immediate: true,
     },
@@ -418,7 +432,7 @@ export default {
     },
     currIdx: {
       handler(newVal) {
-        this.boundaryData = this.boundary[newVal]
+        // this.boundaryData = this.boundary[newVal]
         this.reDrawRect()
       },
       // immediate: true,
@@ -433,6 +447,7 @@ export default {
         const _this = this
         this.myChart = this.$refs.chartTwoDRef.getChartInstance()
         let graphicHeight = this.$refs.TwoChartRef.clientHeight
+
         graphic1.shape.height = graphicHeight
         let minleft = this.myChart.convertToPixel({ xAxisId: '2' }, 0)
         let maxRight = this.myChart.convertToPixel({ xAxisId: '2' }, 512)
@@ -451,7 +466,8 @@ export default {
             [_this.startChannel, maxY],
             [_this.startChannel, minY],
           ]
-          lineSeries.data = _this.drawOneRect(rect, color).data
+          lineSeries.
+            lineSeries.data = _this.drawOneRect(rect, color).data
           // const lineSeries = {
           //   type: 'line',
           //   ..._this.drawOneRect(rect, color),
@@ -509,6 +525,9 @@ export default {
     })
   },
   methods: {
+    handleTooltipFormat() {
+      console.log(111111)
+    },
     // Gamma 的折线图数据
     buildGammaLineList(val) {
       const gammaSeries = this.gammaOption.series
@@ -521,7 +540,6 @@ export default {
     },
     // 构造scatter列表
     buildScatterList() {
-      console.log(this.twoDOption)
       const {
         xAxis: { min: minX, max: maxX },
         yAxis: { min: minY, max: maxY },
@@ -529,23 +547,36 @@ export default {
 
       //点大小
       this.twoDOption.series[0].symbolSize = 5
-      //
-      this.twoDOption.visualMap =  {
-        min: 512,
-        max: minY,
-        dimension: 1,
-        orient: 'vertical',
-        right: 10,
-        top: 'center',
-        text: ['HIGH', 'LOW'],
-        calculable: true,
-        inRange: {
-          color: ['#ffffff', '#ff0000']
-        }
-      },
       this.twoDOption.series[0].data = this.histogramDataList
         .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
         .map(({ b, g, c }) => this.buildScatterItem(b, g, c))
+
+
+      this.$nextTick(() => {
+        var _h = this.$refs.TwoChartRef.clientHeight - 80
+        this.twoDOption.visualMap = {
+          type: 'continuous',
+          min: maxY,
+          max: minY,
+          itemWidth: 12,
+          itemHeight: _h,
+          dimension: 1,
+          seriesIndex: 0,
+          zlevel: 0,
+          orient: 'vertical',
+          right: 0,
+          bottom: 20,
+          text: [maxY, minY],
+          textStyle: {
+            color: '#8EC0C8'
+          },
+          calculable: true,
+          inRange: {
+            color: ['#ffffff', '#ff0000']
+          }
+        }
+      })
+
     },
 
     // 构造一个scatter 的点
@@ -560,21 +591,22 @@ export default {
     },
     // 重绘矩形框区域
     reDrawRect() {
-      const rectList = []
-      let [a, lineSeries] = this.twoDOption.series
       if (this.showROI) {
-        const { minX, maxX, minY, maxY, color } = this.boundaryData
         // rect 遵循 左下 右下 右上 左上 左下 的顺序
-        const rect = [
+        const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
-          [minX, minY],
+        for (var i = 0; i < 4; i++) {
-          [maxX, minY],
+          const data = this.boundary[i]
-          [maxX, maxY],
+          if(data)
-          [minX, maxY],
+          {
-          [minX, minY],
+          const rect = [[data.minX, data.minY], [data.maxX, data.minY], [data.maxX, data.maxY], [data.minX, data.maxY], [data.minX, data.minY],]
-        ]
+          this.twoDOption.series[i + 1].data = this.drawOneRect(rect, colors[i]).data
-        lineSeries.data = this.drawOneRect(rect, color).data
+          }
+        }
+        // lineSeries2.data = this.drawOneRect(rect2, color2).data
       } else {
-        lineSeries.data = []
+        for (var i = 0; i < 4; i++) {
+          this.twoDOption.series[i + 1].data = []
+        }
       }
     },
     /**
@@ -584,10 +616,6 @@ export default {
     drawOneRect(rect, color) {
       return {
         data: rect,
-        symbol: 'none',
-        itemStyle: {
-          color,
-        },
       }
     },
     // 点击改变 ROI LIMITS
@@ -618,6 +646,7 @@ export default {
         ]
         myChart.setOption(this.dragOption)
       })
+
     },
     // 鼠标按下时开启可刷选状态
     handleMouseDown() {
@@ -729,8 +758,7 @@ export default {
       const { inputFileName } = this.sampleData
       try {
         const { success, result, message } = await putAction(
-          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${
+          `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel
-            this.endChannel
           }&ROINum=${this.currIdx + 1}`
         )
         if (success) {
@@ -755,7 +783,6 @@ export default {
             maxX: obj.stop,
             minY: 0,
             maxY: 4096,
-            color: '#99CA53',
           }
           // this.reDrawRect()
         } else {
@@ -776,6 +803,7 @@ export default {
       const b = color1.b + (color2.b - color1.b) * percentage
       return { r, g, b }
     },
+
   },
 }
 </script>
@@ -783,6 +811,7 @@ export default {
 <style lang="less" scoped>
 .beta-gamma-spectrum-chart {
   height: 100%;
+
   &-operators {
     text-align: right;
     overflow: auto;
@@ -811,15 +840,18 @@ export default {
       }
     }
   }
+
   &-main {
     height: calc(100% - 40px);
     margin-top: 15px;
+
     ._2d-chart {
       height: 100%;
       display: flex;
 
       .custom-chart {
-        width: calc(100% - 45px);
+        // width: calc(100% - 45px);
+        width: 100%;
       }
 
       .bar {

src/views/spectrumAnalysis/components/RoiLimits.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="beta-gamma-spectrum-chart">
+  <div class="beta-gamma-spectrum">
-    <div class="beta-gamma-spectrum-chart-operators">
+    <div :class="ismax[index] ? 'beta-gamma-spectrum-chart max' : 'beta-gamma-spectrum-chart'" v-for="(item, index) in buttons" :key="item" v-show="!ismaxed || ismax[index]">
-      <span
+      <div class="beta-gamma-spectrum-chart-operators" ref="operatorsRef">
-        v-for="(item, index) in buttons"
+        <a-row>
-        :key="item"
+          <a-col :span="4">
-        :class="active == index ? 'active' : ''"
+            <div :style="{ background: colors[index], width: '80px', marginLeft: '60px', textAlign: 'center' }">{{ item }}</div>
-        @click="handleChange(index)"
+          </a-col>
-      >
+          <a-col :span="20">
-        {{ item }}
+            <div style="float: right;width: 40px;">
-      </span>
+              <img v-show="!ismax[index]" src="@/assets/maximize.png" @click="maximize(true, index)" />
-    </div>
+              <img v-show="ismax[index]" src="@/assets/normal.png" @click="maximize(false, index)" />
-    <div class="beta-gamma-spectrum-chart-main">
+            </div>
-      <CustomChart :key="chartKey" ref="roiLimitsRef" :opts="opts" :option="roiLimitsOption" />
+            <div style="float: right;color:#AD4140;width: 150px;">{{ 'Ener gy:' + eValue[index] }}</div>
+            <div style="float: right;color:#8EC0C8;width: 100px;">{{ 'Count:' + yValue[index] }}</div>
+            <div style="float: right;color:#8EC0C8;width: 120px;">{{ 'Channel:' + xValue[index] }}</div>
+          </a-col>
+        </a-row>
+      </div>
+      <div class="beta-gamma-spectrum-chart-main">
+        <CustomChart ref="containerRef" :option="roiLimitsOptions[index]" />
+      </div>
     </div>
   </div>
 </template>
@@ -19,107 +27,8 @@
 <script>
 import CustomChart from '@/components/CustomChart/index.vue'
 const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
+const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
 // 折线图配置
-const roiLimitsOption = {
-  grid: {
-    top: 15,
-    left: 65,
-    right: 18,
-    bottom: 45,
-  },
-  tooltip: {
-    show: true,
-    trigger: 'axis',
-    formatter: (params) => {
-      let content = ''
-      params.forEach((item) => {
-        // 提示框的内容样式及数据
-        content += `
-          <!-- 圆点样式 -->
-          <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
-          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
-          <span >${item.value[1]}</span>
-        `
-      })
-      return content
-    },
-  },
-  xAxis: {
-    type: 'category',
-    name: 'Gamma Channel',
-    nameTextStyle: {
-      color: '#5b9cba',
-      fontSize: 16,
-    },
-    nameLocation: 'center',
-    nameGap: 30,
-    boundaryGap: false,
-    splitLine: {
-      show: true,
-      interval: 'auto',
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  yAxis: {
-    type: 'value',
-    name: 'Count',
-    nameTextStyle: {
-      color: '#5b9cba',
-      fontSize: 16,
-    },
-    nameLocation: 'center',
-    nameGap: 40,
-    splitLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLine: {
-      lineStyle: {
-        color: 'rgba(119, 181, 213, .3)',
-      },
-    },
-    axisLabel: {
-      fontSize: 12,
-      color: '#ade6ee',
-    },
-  },
-  series: {
-    type: 'line',
-    smooth: true,
-    showSymbol: false,
-    // symbol: 'circle',
-    // symbolSize: 6,
-    data: [],
-    itemStyle: {
-      normal: {
-        color: '#baaa3d',
-      },
-    },
-    lineStyle: {
-      normal: {
-        width: 2,
-      },
-    },
-  },
-}
 export default {
   components: {
     CustomChart,
@@ -129,83 +38,236 @@ export default {
       type: Array,
       default: () => [],
     },
+    gammaEnergyData: {
+      type: Array,
+      default: () => [],
+    },
   },
   watch: {
     ROILists: {
       handler(newVal) {
-        this.buildOneLineList(newVal[this.active])
+        this.newVal = newVal
+        this.buildOneLineList()
       },
       immediate: true,
     },
   },
   beforeDestroy() {
-    const myChart = this.$refs.roiLimitsRef.getChartInstance()
+    // const myChart = this.$refs.roiLimitsRef.getChartInstance()
-    myChart.dispose()
+    // myChart.dispose()
   },
   data() {
     this.buttons = buttons
+    this.colors = colors
     return {
       active: 0,
-      roiLimitsOption,
+      xValue: ['', '', '', ''],
+      yValue: ['', '', '', ''],
+      eValue: ['', '', '', ''],
+      ismax: [false, false, false, false],
+      ismaxed:false,
+      roiLimitsOptions: [
+        this.createRoiLimitsOption(0),
+        this.createRoiLimitsOption(1),
+        this.createRoiLimitsOption(2),
+        this.createRoiLimitsOption(3),
+      ],
+      charts: [],
+      newVal: [],
       opts: {
         notMerge: true,
       },
-      chartKey: 'limit',
     }
   },
   methods: {
-    buildOneLineList(val) {
+    buildOneLineList() {
-      const currSeries = this.roiLimitsOption.series
+      for (var i = 0; i < 4; i++) {
-      if (val) {
+        var val = this.newVal[i]
-        currSeries.data = val.map((item) => [item.x, item.y])
+        if (val) {
-      } else {
+          this.roiLimitsOptions[i].series.data = val.map((item) => [item.x, item.y])
-        currSeries.data = []
+        } else {
+          this.roiLimitsOptions[i].series.data = []
+        }
       }
     },
-    // 点击改变Beta-Gamma Spectrum: Sample图表类型
+    handleTooltipFormat(params, index) {
-    handleChange(index) {
+      this.$set(this.xValue, index, params[0].value[0]);
-      this.active = index
+      this.$set(this.yValue, index, params[0].value[1]);
-      this.buildOneLineList(this.ROILists[index])
+      this.$set(this.eValue, index, this.gammaEnergyData[params[0].value[0]].toFixed(3));
-      this.$emit('sendIndex', index)
+    },
+    maximize(bl, index) {
+      this.$set(this.ismax, index, bl);
+      this.ismaxed = this.ismax.includes(true);
+      this.$nextTick(() => {
+        this.$refs['containerRef'][index].getChartInstance().resize();
+      })
+    },
+    showTooltip(i) {
+      const chartRef = this.$refs['containerRef'][i].getChartInstance();
+      chartRef.dispatchAction({
+        type: 'showTip',
+        seriesIndex: 0,
+        dataIndex: 110 // 指定要显示 tooltip 的数据索引
+      });
+    },
+    createRoiLimitsOption(index) {
+      const self = this
+      return {
+        grid: {
+          top: 10,
+          left: 60,
+          right: 20,
+          bottom: 50,
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          formatter: (params) => {
+            self.handleTooltipFormat(params, index)
+            let content = ''
+            params.forEach((item) => {
+              // 提示框的内容样式及数据
+              content += `
+          <!-- 圆点样式 -->
+          <span style="color: #424864;">Channel ${item.axisValueLabel}</span><br>
+          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
+          <span >${item.value[1]}</span>
+        `
+            })
+            return content
+          },
+        },
+        xAxis: {
+          type: 'category',
+          name: 'Gamma Channel',
+          nameTextStyle: {
+            color: '#5b9cba',
+            fontSize: 16,
+          },
+          nameLocation: 'center',
+          nameGap: 30,
+          boundaryGap: false,
+          splitLine: {
+            show: true,
+            interval: 'auto',
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: '#ade6ee',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Count',
+          nameTextStyle: {
+            color: '#5b9cba',
+            fontSize: 16,
+          },
+          nameLocation: 'center',
+          nameGap: 40,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(119, 181, 213, .3)',
+            },
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: '#ade6ee',
+          },
+        },
+        series: {
+          type: 'line',
+          smooth: true,
+          showSymbol: false,
+          // symbol: 'circle',
+          // symbolSize: 6,
+          data: [],
+          itemStyle: {
+            normal: {
+              color: '#baaa3d',
+            },
+          },
+          lineStyle: {
+            normal: {
+              width: 2,
+            },
+          },
+        },
+      }
     },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.beta-gamma-spectrum-chart {
+.beta-gamma-spectrum {
   height: 100%;
-  &-operators {
-    text-align: right;
-    overflow: auto;
-    height: 26px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 9px;
 
-    .ant-space-item:first-child {
+  &-chart {
+    height: 50%;
+    width: 50%;
+    float: left;
+
+    &-operators {
+      overflow: auto;
+      margin-bottom: -16px;
+
+      .ant-space-item:first-child {
+        span {
+          width: 70px;
+        }
+      }
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+
       span {
-        width: 70px;
+        text-align: center;
+        height: 100%;
+        line-height: 26px;
+        width: 100px;
+        background-color: #406979;
+        cursor: pointer;
+        user-select: none;
+
+        &.active {
+          background-color: #1397a3;
+        }
       }
     }
 
-    span {
+    &-main {
-      text-align: center;
+      height: calc(100% - 40px);
-      height: 100%;
+      margin-top: 15px;
-      line-height: 26px;
-      width: 100px;
-      background-color: #406979;
-      cursor: pointer;
-      user-select: none;
-
-      &.active {
-        background-color: #1397a3;
-      }
     }
   }
-  &-main {
+
-    height: calc(100% - 40px);
+  &-chart.max {
-    margin-top: 15px;
+    height: 100%;
+    width: 100%;
+    transform-origin: right top;
   }
+
 }
 </style>