<script>
import { invoke } from "@tauri-apps/api/tauri";
import * as echarts from "echarts";
import SensorMethod from "../SerialPort/SerialportMethod.js";
import { Checkbox } from "@arco-design/web-vue";
export default {
  name: "SetWavelenth",
  data() {
    return {
      option: {},
      optiondown: {},
      Devinfo: {
        work_mode: 0,
        bochangxishu: {
          a0: 0,
          a1: 0,
          a2: 0,
          a3: 0
        },
        bochangxishu2: {
          a0: 0,
          a1: 0,
          a2: 0,
          a3: 0
        },
        fiber_type: "Dual"


      },
      WeavePeaksDeffine: [
        0,
        253.652,
        296.728,
        302.150,
        313.155,
        334.148,
        365.015,
        404.656,
        407.783,
        435.833,
        546.074,
        576.960,
        579.066,
        587.092,
        696.543,
        706.722,
        714.704,
        727.294,
        738.393,
        750.387,
        763.511,
        772.376,
        785.482,
        794.818,
        800.616,
        811.531,
        826.452,
        842.465,
        850.887,
        852.144,
        866.794,
        892.869,
        912.297,
        922.450,
        965.779,
        1013.976
     ],
      shutter_time_up: 1,
      shutter_time_down: 1,
      sensor_gain_up: 0,
      sensor_gain_down: 0,
      Data: {},
      DataDown: {},
      Peaks: [],
      PeaksDown: []
    }
  },
  async mounted() {
    let that = this;
    //await 
    await setTimeout(function () {
      that.GetSenSorInfo();
      // 这里是你要在100毫秒后执行的代码

    }, 100);
    await setTimeout(function () {
      that.GetSenSorInfo();
      // 这里是你要在100毫秒后执行的代码
      that.initChart();
    }, 1000);

  },
  unmounted() {
    window.removeEventListener('resize', this.echartresize);
  },

  methods: {
    async GetSenSorInfo() {
      // var Command = { command: "get_sensor_info" };
      // let data = {
      //   data: Command,
      //   datatype: "json"
      // }
      // let message = await invoke("sendtoport_andgetreturn", data);
      this.Devinfo = await SensorMethod.Get_Device_Info();
      this.sensor_gain_down = this.Devinfo.sensor_gain_down;
      if (typeof (this.Devinfo.fiber_type) == "string") {
        this.fiber_type = this.Devinfo.fiber_type;
      }
      if (this.Devinfo.fiber_type == "Single") {
        this.shutter_time_up = this.Devinfo.shutter_time;
      } else if (this.Devinfo.fiber_type == "Dual") {
        this.sensor_gain_up = this.Devinfo.sensor_gain_up;
        this.shutter_time_down = this.Devinfo.shutter_time_down;
        this.shutter_time_up = this.Devinfo.shutter_time_up;
      }





    },
    async OPT_devic() {
      var shuttertime = await SensorMethod.Dev_Opt();
      this.shutter_time_up = shuttertime;

    },
    async initChart() {
      await this.$nextTick();
      const chartDom = this.$refs.chart_weavelenth;
      // chartDom.style.width = '100%';
      // chartDom.style.height = '100%';
      let height = chartDom.offsetHeight;
      let width = chartDom.clientWidth;
      let chart = echarts.init(chartDom);


      var coeff = [];
      coeff[0] = this.Devinfo.bochangxishu.a0;
      coeff[1] = this.Devinfo.bochangxishu.a1;
      coeff[2] = this.Devinfo.bochangxishu.a2;
      coeff[3] = this.Devinfo.bochangxishu.a3;
      this.option = {
        // ECharts 配置选项
        xAxis: {
          type: 'value',
          boundaryGap: false,// 显示连续的刻度
          min: 0,
          max: 510,
          dataZoom: [
            {
              type: 'inside', // 内置数据区域缩放
              start: 0, // 初始缩放范围的起始位置（0%）
              end: 100 // 初始缩放范围的结束位置（100%）
            }
          ]
        },
        animation: false,
        yAxis: {
          type: 'value',
          //min:0,
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '5%'
        },
        dataZoom: [
          {
            type: 'inside', // 内置数据区域缩放，包括滚轮缩放
            xAxisIndex: [0], // 对应 x 轴
            filterMode: 'none' // 不过滤数据
          },
          {
            type: 'inside', // 内置数据区域缩放，包括滚轮缩放
            yAxisIndex: [0], // 对应 y 轴
            filterMode: 'none' // 不过滤数据
          }
        ],


        // legend: {
        //   data: ['曲线'], // 图例名称
        //   show: true ,// 显示图例
        //   //selectedMode: 'multiple', // 图例的选择模式。默认开启图例开关，可选single，multiple
        // },
        series: [
          {
            data: [[1, 150], [2, 230], [3, 224], [4, 218], [5, 135], [6, 147], [7, 260]], // 使用二维数组表示数据点的坐标
            type: 'line',
            symbol: 'none', // 不显示数据点
            smooth: false, // 不使用平滑处理
            //step: 'start' // 设置 step 类型的起始位置
          }
        ]
      };
      this.option.xAxis.max = coeff[3];
      let bandsum = this.Devinfo.bandsum;
      this.option.xAxis.min = bandsum * bandsum * bandsum * coeff[0] + bandsum * bandsum * coeff[1] + bandsum * coeff[2] + coeff[3];
      if (this.option.xAxis.max < this.option.xAxis.min) {
        let temp = this.option.xAxis.min;
        this.option.xAxis.min = this.option.xAxis.max;
        this.option.xAxis.max = temp;
      }





      chart.setOption(this.option);

      chart.dispatchAction({
        type: 'resize',

        // 可以指定宽和高，如果不指定则默认取容器的大小
        // width: '新的宽度',
        // height: '新的高度'
      });
      if (this.fiber_type == "Dual") {

        this.optiondown = JSON.parse(JSON.stringify(this.option));
    
    coeff[0] = this.Devinfo.bochangxishu2.a0;
    coeff[1] = this.Devinfo.bochangxishu2.a1;
    coeff[2] = this.Devinfo.bochangxishu2.a2;
    coeff[3] = this.Devinfo.bochangxishu2.a3;

    this.optiondown.xAxis.max = coeff[3];

    this.optiondown.xAxis.min = bandsum * bandsum * bandsum * coeff[0] + bandsum * bandsum * coeff[1] + bandsum * coeff[2] + coeff[3];

    if (this.optiondown.xAxis.max < this.optiondown.xAxis.min) {
      let temp = this.optiondown.xAxis.min;
      this.optiondown.xAxis.min = this.optiondown.xAxis.max;
      this.optiondown.xAxis.max = temp;
    }




        let chart_down = echarts.init(this.$refs.chart_weavelenth_down);
        chart_down.setOption(this.optiondown);
        chart_down.dispatchAction({
          type: 'resize',

          // 可以指定宽和高，如果不指定则默认取容器的大小
          // width: '新的宽度',
          // height: '新的高度'
        });
      }

      let that = this;
      chart.resize();
      window.addEventListener('resize', function () {
        that.echartresize();
      });
    },
    echartresize() {
      console.log("resize")
      const chartDom = this.$refs.chart;


      let chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth);
      let chart_down = echarts.getInstanceByDom(this.$refs.chart_weavelenth_down);

      chart_up.resize();
      chart_down.resize();


    },
    async findpeak(specindex) {
      if (specindex == 0) {
        let dataforpeak = this.Data.data;
        var peaks = await invoke("find_peek", { data: dataforpeak, minheigh: 3000 });
        console.log(peaks);
        let peaksforshow = [];
        let coeffweave1 = this.Devinfo.bochangxishu.a0;
        let coeffweave2 = this.Devinfo.bochangxishu.a1;
        let coeffweave3 = this.Devinfo.bochangxishu.a2;
        let coeffweave4 = this.Devinfo.bochangxishu.a3;

        var lenthofpeaks=this.Peaks.length;
        for (var i=lenthofpeaks-1;i>=0;i--){
          if (this.Peaks[i][3] == false){
            this.Peaks.splice(i,1);
            
          }
        }

        //this.Peaks = [];

        let peakformatch = [];
        peaks.forEach(element => {
          var weave = coeffweave1 * element[0] * element[0] * element[0] + coeffweave2 * element[0] * element[0] + coeffweave3 * element[0] + coeffweave4;
          peaksforshow.push([weave, element[1], element[0]]);
          this.Peaks.push([weave, element[1], element[0], false, 0])
          peakformatch.push(element[0]);
        });
        peakformatch.sort(function (a, b) {
          return a - b;
        });
        let weaveformatch = this.WeavePeaksDeffine.slice(1, this.WeavePeaksDeffine.length);

        this.matchSpectrumPeaks(peakformatch, weaveformatch, {   minMatchRatio: 0.8,
          maxGap: 1})

        //peaks 按照第一列重新排序
        this.Peaks.sort(function (a, b) {
          return a[2] - b[2];
        });

        let chartpeak =
        {
          data: peaksforshow, // 使用二维数组表示数据点的坐标
          type: 'scatter',
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value[2]
            }
          }

        }

        if (this.option.series.length < 2) {
          this.option.series.push(chartpeak);
        }
        else {
          this.option.series[1] = chartpeak;
        }
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth);
        chart_up.setOption(this.option);

      }

      else if (specindex == 1) {
        let dataforpeak = this.DataDown.data;
        var peaks = await invoke("find_peek", { data: dataforpeak, minheigh: 3000 });
        console.log(peaks);
        let peaksforshow = [];
        let coeffweave1 = this.Devinfo.bochangxishu2.a0;
        let coeffweave2 = this.Devinfo.bochangxishu2.a1;
        let coeffweave3 = this.Devinfo.bochangxishu2.a2;
        let coeffweave4 = this.Devinfo.bochangxishu2.a3;
        var lenthofpeaks=this.PeaksDown.length;
        for (var i=lenthofpeaks-1;i>=0;i--){
          if (this.PeaksDown[i][3] == false){
            this.PeaksDown.splice(i,1);
            
          }
        }
       // this.PeaksDown = [];
        peaks.forEach(element => {
          var weave = coeffweave1 * element[0] * element[0] * element[0] + coeffweave2 * element[0] * element[0] + coeffweave3 * element[0] + coeffweave4;
          peaksforshow.push([weave, element[1], element[0]]);
          this.PeaksDown.push([weave, element[1], element[0], false, 0])
        });



        this.PeaksDown.sort(function (a, b) {
          return a[2] - b[2];
        });


        let chartpeak =
        {
          data: peaksforshow, // 使用二维数组表示数据点的坐标
          type: 'scatter',
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value[2]
            }
          }

        }

        if (this.optiondown.series.length < 2) {
          this.optiondown.series.push(chartpeak);
        }
        else {
          this.optiondown.series[1] = chartpeak;
        }
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth_down);
        chart_up.setOption(this.optiondown);
      }



    },
    async ClearArry(specindex){
      if (specindex == 0) {
        this.Peaks = [];
        this.option.series[1].data = [];

      } else if (specindex == 1) {
        this.PeaksDown = [];
        this.optiondown.series[1].data = [];

      }

    },

    ReplotWeaveInfo(spectralnumber) {
      let orgoption = {};
      let Peaksnow = [];
      if (spectralnumber == 0) {
        orgoption = this.option;
        Peaksnow = this.Peaks;
      } else if (spectralnumber == 1) {
        orgoption = this.optiondown;
        Peaksnow = this.PeaksDown;
      }
      if (orgoption.series.length < 2) {
        return;
      }
      let peaksforshow = [];
      Peaksnow.forEach(element => {
        if (element[3] == true || element[4] != 0) {
          var weave = element[0];
          if (element[1] > 3500) {
            peaksforshow.push([weave, element[1] - 500, element[4]]);
          } else {
            peaksforshow.push([weave, element[1] + 500, element[4]]);
          }
        }


      });

      let chartpeak =
      {
        data: peaksforshow, // 使用二维数组表示数据点的坐标
        type: 'scatter',
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            return "波长:" + params.value[2]
          }
        }

      }



      if (orgoption.series.length < 3) {
        orgoption.series.push(chartpeak);
      } else {
        orgoption.series[2] = chartpeak;
      }
      if (spectralnumber == 0) {
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth);
        chart_up.setOption(orgoption);
      } else if (spectralnumber == 1) {
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth_down);
        chart_up.setOption(orgoption);
      }

    },
    async GetDataDrection(specindex) {
      if (specindex == 0) {
        var ret = await SensorMethod.Dev_Opt(80, 2);
        this.shutter_time_up=ret;
        // this.shutter_time_up = ret.shuttertimes;
        // this.sensor_gain_up = ret.gain;
        this.GetOneData();
      }
      else if (specindex == 1) {
        var ret = await SensorMethod.Dev_Opt_Two(80, 3);
        this.shutter_time_down = ret.shuttertimes;
        this.sensor_gain_down = ret.gain;
        this.GetOneDatadown();
      }

    },

    async GetOneDatadown() {
      let coeffweave1 = this.Devinfo.bochangxishu2.a0;
      let coeffweave2 = this.Devinfo.bochangxishu2.a1;
      let coeffweave3 = this.Devinfo.bochangxishu2.a2;
      let coeffweave4 = this.Devinfo.bochangxishu2.a3;
      await SensorMethod.Set_Gain(this.sensor_gain_down);
      // await SensorMethod.Get_Date_on_Derction("UP", this.shutter_time_down, false, 1)
      var data = await SensorMethod.Get_Date_on_Derction("DOWN", this.shutter_time_down, false, 1)
      this.DataDown = data;      //获取波长系数
      var lenthofdata = data.data.length;
      let dataforshow = [];
      for (var i = 0; i < lenthofdata; i++) {
        var weave = coeffweave1 * i * i * i + coeffweave2 * i * i + coeffweave3 * i + coeffweave4;
        dataforshow.push([weave, data.data[i]]);
      }
      this.optiondown.series[0].data = dataforshow;

      var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth_down);
      chart_up.setOption(this.optiondown);








      // console.log(dataforshow);

    },

    async GetOneData() {
      let coeffweave1 = this.Devinfo.bochangxishu.a0;
      let coeffweave2 = this.Devinfo.bochangxishu.a1;
      let coeffweave3 = this.Devinfo.bochangxishu.a2;
      let coeffweave4 = this.Devinfo.bochangxishu.a3;
      await SensorMethod.Set_Gain(this.sensor_gain_up);
      var data = await SensorMethod.Get_Date_on_Derction("UP", this.shutter_time_up, false, 1)
      this.Data = data;      //获取波长系数
      var lenthofdata = data.data.length;
      let dataforshow = [];
      for (var i = 0; i < lenthofdata; i++) {
        var weave = coeffweave1 * i * i * i + coeffweave2 * i * i + coeffweave3 * i + coeffweave4;
        dataforshow.push([weave, data.data[i]]);
      }
      this.option.series[0].data = dataforshow;

      var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth);
      chart_up.setOption(this.option);

      // this.GetOneDatadown()






      // console.log(dataforshow);

    },
    async CompuWeaveLenth(spectralnumber) {
      let orgdata = [];
      if (spectralnumber == 0) {
        orgdata = this.Peaks;

      } else if (spectralnumber == 1) {
        orgdata = this.PeaksDown;
      }
      let Xdata = [];
      let Ydata = [];
      orgdata.forEach(element => {
        if (element[3] == true) {
          Xdata.push(Number(element[2]));
          Ydata.push(Number(element[4]));
        }
      });
      if (Xdata.length < 4) {
        alert("至少选择4个峰");
        return;
      }
      let result = await invoke("compute_weave_coeff", { x: Xdata, y: Ydata });
      if (spectralnumber == 0) {
        this.Devinfo.bochangxishu.a0 = result[3];
        this.Devinfo.bochangxishu.a1 = result[2];
        this.Devinfo.bochangxishu.a2 = result[1];
        this.Devinfo.bochangxishu.a3 = result[0];
        let coeff = [];
        coeff[0] = this.Devinfo.bochangxishu.a0;
        coeff[1] = this.Devinfo.bochangxishu.a1;
        coeff[2] = this.Devinfo.bochangxishu.a2;
        coeff[3] = this.Devinfo.bochangxishu.a3;

        this.option.xAxis.max = coeff[3];
        let bandsum = this.Devinfo.bandsum;
        this.option.xAxis.min = bandsum * bandsum * bandsum * coeff[0] + bandsum * bandsum * coeff[1] + bandsum * coeff[2] + coeff[3];
        if (this.option.xAxis.max < this.option.xAxis.min) {
          let temp = this.option.xAxis.min;
          this.option.xAxis.min = this.option.xAxis.max;
          this.option.xAxis.max = temp;
        }
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth);
        chart_up.setOption(this.option);

      } else if (spectralnumber == 1) {
        this.Devinfo.bochangxishu2.a0 = result[3];
        this.Devinfo.bochangxishu2.a1 = result[2];
        this.Devinfo.bochangxishu2.a2 = result[1];
        this.Devinfo.bochangxishu2.a3 = result[0];
        let coeff = [];
        coeff[0] = this.Devinfo.bochangxishu2.a0;
        coeff[1] = this.Devinfo.bochangxishu2.a1;
        coeff[2] = this.Devinfo.bochangxishu2.a2;
        coeff[3] = this.Devinfo.bochangxishu2.a3;
        this.optiondown.xAxis.max = coeff[3];
        let bandsum = this.Devinfo.bandsum;
        this.optiondown.xAxis.min = bandsum * bandsum * bandsum * coeff[0] + bandsum * bandsum * coeff[1] + bandsum * coeff[2] + coeff[3];
        if (this.optiondown.xAxis.max < this.optiondown.xAxis.min) {
          let temp = this.optiondown.xAxis.min;
          this.optiondown.xAxis.min = this.optiondown.xAxis.max;
          this.optiondown.xAxis.max = temp;
        }
        var chart_up = echarts.getInstanceByDom(this.$refs.chart_weavelenth_down);
        chart_up.setOption(this.optiondown);

      }

    },
    async Set_Weave_Coeff() {
      SensorMethod.Set_Weave_Coeff(0, this.Devinfo.bochangxishu.a0, this.Devinfo.bochangxishu.a1, this.Devinfo.bochangxishu.a2, this.Devinfo.bochangxishu.a3);
      if (this.Devinfo.fiber_type == "Dual")
      SensorMethod.Set_Weave_Coeff(1, this.Devinfo.bochangxishu2.a0, this.Devinfo.bochangxishu2.a1, this.Devinfo.bochangxishu2.a2, this.Devinfo.bochangxishu2.a3);

    },
    
 /**
 * 光谱峰自动匹配函数
 * @param {number[]} detectedPeaks - 检测到的峰位置数组（单位：像素或通道号）
 * @param {number[]} referencePeaks - 参考峰波长数组（单位：nm）
 * @param {Object} [options] - 可选参数
 * @param {number} [options.tolerance=5] - 初始匹配容差（像素）
 * @param {number} [options.minMatches=3] - 要求的最小匹配数
 * @returns {number[]} 匹配成功的检测峰索引数组（按referencePeaks顺序对应）
 */
 async matchSpectrumPeaks(detected, reference, options = {}) {
  console.log("detectedPeaks");
  console.log(detected);
  console.log("referencePeaks");

  console.log(reference);
  const {
    ratioTolerance = 0.15,  // 比例允许误差±15%
    minPeakDistance = 5,    // 忽略间距过小的峰
    debug = true
  } = options;
  // 1. 生成参考峰的所有可能三点组合
  const refTriplets = [];
  for (let i = 0; i < reference.length - 2; i++) {
    const a = reference[i], b = reference[i+1], c = reference[i+2];
    const ratio = (c - b) / (b - a);
    refTriplets.push({ a, b, c, ratio, index: i });
    if (debug) console.log(`参考组合#${i}: [${a},${b},${c}] 比例=${ratio.toFixed(3)}`);
  }
  // 2. 预处理检测峰（合并过近的峰）
  const filteredPeaks = detected.filter((p, i) => 
    i === 0 || p - detected[i-1] > minPeakDistance
  );
  // 3. 在检测峰中寻找最佳匹配
  let bestMatch = null;
  for (let i = 0; i < filteredPeaks.length - 2; i++) {
    const da = filteredPeaks[i], db = filteredPeaks[i+1], dc = filteredPeaks[i+2];
    const detRatio = (dc - db) / (db - da);
    
    // 与所有参考组合对比
    for (const ref of refTriplets) {
      const ratioError = Math.abs(detRatio - ref.ratio) / ref.ratio;
      
      if (ratioError < ratioTolerance) {
        const scale = (db - da) / (ref.b - ref.a); // 计算缩放因子
        const confidence = 1 - ratioError;
        
        if (!bestMatch || confidence > bestMatch.confidence) {
          bestMatch = {
            refTriplet: [ref.a, ref.b, ref.c],
            detTriplet: [da, db, dc],
            scale,
            ratioError,
            confidence,
            refIndex: ref.index,
            detIndex: i
          };
        }
      }
    }
  }
  // 4. 结果验证与扩展
  if (bestMatch) {
    if (debug) {
      console.log(`最佳匹配:
      参考峰[${bestMatch.refTriplet.join(',')}] 比例=${((bestMatch.refTriplet[2]-bestMatch.refTriplet[1])/(bestMatch.refTriplet[1]-bestMatch.refTriplet[0])).toFixed(3)}
      检测峰[${bestMatch.detTriplet.join(',')}] 比例=${((bestMatch.detTriplet[2]-bestMatch.detTriplet[1])/(bestMatch.detTriplet[1]-bestMatch.detTriplet[0])).toFixed(3)}
      缩放因子=${bestMatch.scale.toFixed(2)} 置信度=${(bestMatch.confidence*100).toFixed(1)}%`);
    }
    // 扩展验证其他峰
    const predictedAll = reference.map(w => 
      bestMatch.detTriplet[0] + (w - bestMatch.refTriplet[0]) * bestMatch.scale
    );
    return { ...bestMatch, predictedAll };
  }
  return null;


}
  }

}
</script>


<template>
  <div class="weavecontainer" style="width:100%;height: 100% !important;margin: 0px;padding: 20px">
    <div class="row" style="height: 100%">


      <div class="col-2" style="height: 100%;">
        <BCard header="sensor 1" header-text-variant="white" header-tag="header" header-bg-variant="dark"
          style="max-width: 20rem">
          <BCardText><b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a0</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu.a0"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a1</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu.a1"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a2</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu.a2"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a3</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu.a3"></b-form-input>
            </b-input-group>
          </BCardText>
        </BCard>
        <BCard header="sensor 2" header-text-variant="white" header-tag="header" header-bg-variant="dark"
          style="max-width: 20rem" v-if="fiber_type == 'Dual'">
          <BCardText><b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a0</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu2.a0"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a1</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu2.a1"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a2</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu2.a2"></b-form-input>
            </b-input-group>

            <b-input-group class="my-1">
              <BInputGroupPrepend is-text class="myinputprepend">a3</BInputGroupPrepend>
              <b-form-input type="number" step="0.00000000000001" v-model="Devinfo.bochangxishu2.a3"></b-form-input>
            </b-input-group>
          </BCardText>
        </BCard>


        <p style="position:absolute ;bottom: 10px;width: 100%;height: 30px">
          <b-button @click="Set_Weave_Coeff" style="position:absolute;left: 20px ">设置</b-button>
          <b-button @click="GetSenSorInfo" style="position:absolute;right: 20px ">恢复</b-button>
        </p>

      </div>
      <div class="col-10" style="height: 100%;">

        <div style="height: 100%;width: 100%;">




          <div class="row linbox" :style="fiber_type == 'Dual' ? 'height: 50%' : 'height: 100%'">
            <b-button @click="findpeak(0)"
              style="position:absolute;right: 20%;margin-top:5px;z-index: 10;width: 60px; ">寻峰</b-button>
            <b-button @click="GetDataDrection(0)"
              style="position:absolute;right: 20%;margin-top:5%; z-index: 10; ;width: 60px ">采集</b-button>

            <a-tag style="position:absolute;right: 20%;margin-top:10%; z-index: 10; ;width: 80px ">{{
              shutter_time_up.toFixed(2) }} ms</a-tag>
            <a-tag style="position:absolute;right: 20%;margin-top:13%; z-index: 10; ;width: 80px ">{{
              sensor_gain_up.toFixed(2) }} </a-tag>
            <b-button @click="CompuWeaveLenth(0)"
              style="position:absolute;right: 20%;margin-top:15%; z-index: 10; ;width: 60px ">计算</b-button>
            <b-button @click="ClearArry(0)"
              style="position:absolute;right: 20%;margin-top:20%; z-index: 10; ;width: 60px ">清空</b-button>
            <div class="chart-container" ref="chart_weavelenth"></div>




            <div style="width: 20%; overflow: auto;height:80%;">

              <a-row style="border-top: 1px solid ;border-bottom: 1px solid ;border-color: gray;">

                <a-col :span="8" style="font-size:small; text-align: center;">像素</a-col>
                <a-col :span="4" style="font-size:small;text-align: center;">启用</a-col>
                <a-col :span="10" style="font-size:small;text-align: center;">波长</a-col>
              </a-row>

              <a-row v-for="peak in Peaks" :key="peak[2]"
                style="font-size: small;text-align: center;border-bottom: 1px solid ;border-color: gray;">

                <a-col :span="8" style="font-size:small; text-align: center;">{{ peak[2] }}</a-col>
                <a-col :span="4" style="font-size:small;text-align: center;"> <a-checkbox
                    v-model="peak[3]"></a-checkbox></a-col>
                <a-col :span="12" style="font-size:small;text-align: center;">
                  <!-- <a-input v-model="peak[4]" @change="ReplotWeaveInfo(0)"></a-input> -->
                  <select style="width: 100%;" placeholder="Please select ..." allow-create
                    @change="ReplotWeaveInfo(0)" v-model="peak[4]">
                  
                    <option v-for="item in WeavePeaksDeffine" :key="item" :value="item">
                      {{ item }}
                    </option>
                  </select>
                </a-col>
              </a-row>

            </div>




          </div>
          <div class="row linbox" v-if="fiber_type == 'Dual'">
            <b-button @click="findpeak(1)"
              style="position:absolute;right: 20%;margin-top:5px; z-index: 10; ;width: 60px ">寻峰</b-button>
            <b-button @click="GetDataDrection(1)"
              style="position:absolute;right: 20%;margin-top:5%; z-index: 10; ;width: 60px ">采集</b-button>
            <a-tag style="position:absolute;right: 20%;margin-top:13%; z-index: 10; ;width: 80px ">{{
              sensor_gain_down.toFixed(2) }} </a-tag>
            <a-tag style="position:absolute;right: 20%;margin-top:10%; z-index: 10; ;width: 80px ">{{
              shutter_time_down.toFixed(2) }} ms</a-tag>
            <b-button @click="CompuWeaveLenth(1)"
              style="position:absolute;right: 20%;margin-top:15%; z-index: 10; ;width: 60px ">计算</b-button>
                          <b-button @click="ClearArry(1)"
              style="position:absolute;right: 20%;margin-top:20%; z-index: 10; ;width: 60px ">清空</b-button>
            <!-- <b-button @click="findpeak(1)" style="position:absolute;right: 20%;margin-top:20%; z-index: 10; ;width: 60px ">寻峰</b-button> -->
            <div class="chart-container" ref="chart_weavelenth_down"></div>
            <div style="width: 20%; overflow: auto;height:80%;">

              <a-row style="border-top: 1px solid ;border-bottom: 1px solid ;border-color: gray;">

                <a-col :span="8" style="font-size:small; text-align: center;">像素</a-col>
                <a-col :span="4" style="font-size:small;text-align: center;">启用</a-col>
                <a-col :span="10" style="font-size:small;text-align: center;">波长</a-col>
              </a-row>

              <a-row v-for="peak in PeaksDown" :key="peak[2]"
                style="font-size: small;text-align: center;border-bottom: 1px solid ;border-color: gray;">

                <a-col :span="8" style="font-size:small; text-align: center;">{{ peak[2] }}</a-col>
                <a-col :span="4" style="font-size:small;text-align: center;"> <a-checkbox
                    v-model="peak[3]"></a-checkbox></a-col>
                <a-col :span="12" style="font-size:small;text-align: center;">
                  <!-- <a-input v-model="peak[4]"></a-input> -->
                  <a-select style="width: 100%;" placeholder="Please select ..." allow-create
                    @change="ReplotWeaveInfo(1)" v-model="peak[4]">
                    <a-option v-for="item in WeavePeaksDeffine" :key="item" :value="item">
                      {{ item }}
                    </a-option>
                  </a-select>
                </a-col>
              </a-row>

            </div>

          </div>
        </div>

      </div>
    </div>


  </div>



</template>

<style scoped>
.linbox {
  /* / width: 100vw; */
  height: 50%;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #d2dede;
  position: static;

}

.col-2 {
  background-color: #f8f9fa;
  padding-top: 0px;
  padding-bottom: 0px;
  padding: 0px;
  border-right: 1px solid #d2dede;
  position: relative;

}

.col-10 {
  padding: 0px;
  position: relative;

}

.chart-container {
  background-color: #f8f9fa;
  width: 80%;
  height: 100%;

}

.container {
  background-color: #f8f9fa;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
</style>
