SpectralPlot/src/components/menubox/SetWavelenth.vue

<script>
import {invoke} from "@tauri-apps/api/tauri";
import { dialog, fs } from "@tauri-apps/api";
import * as echarts from "echarts";
import SerialportMethod from "../SerialPort/SerialportMethod.js";

export default {
  name: "SetWavelenth",
  data() {
    return {
      option: {},
      Devinfo: {
        work_mode: 0,
        bochangxishu: {
          a0: 0,
          a1: 0,
          a2: 0,
          a3: 0
        },

      },
      shutter_time_up: 0,
      Data:{}
    }
  },
 async mounted() {
    let that=this;
    //await
    await setTimeout(function() {
      that.GetSenSorInfo();
      // 这里是你要在100毫秒后执行的代码

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

  },


  methods: {
    async GetSenSorInfo() {
      var Command = {command: "get_sensor_info"};
      let data = {
        data: Command,
        datatype: "json"
      }
      let message = await invoke("sendtoport_andgetreturn", data);
      this.Devinfo = JSON.parse(message.content);

    },
    async OPT_devic(){
      var shuttertime = await SerialportMethod.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: 60,
          right: '5%',
          bottom: '5%',
          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 类型的起始位置
          }
        ]
      };
      let bandnum=this.Devinfo.bandnum-1;
      this.option.xAxis.max =coeff[3];

      this.option.xAxis.min = bandnum*bandnum*bandnum*coeff[0]+bandnum*bandnum*coeff[1]+bandnum*coeff[2]+coeff[3];

      chart.setOption(this.option);
      chart.dispatchAction({
        type: 'resize',

        // 可以指定宽和高，如果不指定则默认取容器的大小
        // width: '新的宽度',
        // height: '新的高度'
      });
      chart.resize();
    },
    async findpeak(){
      let dataforpeak=this.Data.data;
     var peaks=await invoke("find_peek",{data:dataforpeak,minheigh:1000});
      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;

      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]]);
      });





      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);



    },
    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;

      var data = await SerialportMethod.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);

       // console.log(dataforshow);

    },
    async Set_Weave_Coeff() {
      await SerialportMethod.Set_Weave_Coeff(0, this.Devinfo.bochangxishu.a0, this.Devinfo.bochangxishu.a1, this.Devinfo.bochangxishu.a2, this.Devinfo.bochangxishu.a3);
      await this.saveCoeffToFile();
    },
    async saveCoeffToFile() {
      const now = new Date();
      const pad = n => String(n).padStart(2, '0');
      const dateStr = `${now.getFullYear()}${pad(now.getMonth()+1)}${pad(now.getDate())}_${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
      const serial = this.Devinfo?.serialnumber || this.Devinfo?.SerilNumber || "Unknown";
      const defaultName = `${serial}_${dateStr}.json`;

      const savePath = await dialog.save({
        defaultPath: defaultName,
        filters: [{ name: "JSON文件", extensions: ["json"] }]
      });
      if (!savePath) return;

      const data = {
        serialnumber: serial,
        saveTime: now.toISOString(),
        sensor_type: this.Devinfo?.sensor_type || "",
        bochangxishu: {
          a0: this.Devinfo.bochangxishu.a0,
          a1: this.Devinfo.bochangxishu.a1,
          a2: this.Devinfo.bochangxishu.a2,
          a3: this.Devinfo.bochangxishu.a3,
        }
      };

      await fs.writeTextFile(savePath, JSON.stringify(data, null, 2));
    }
  }

}
</script>


<template >
  <div class="container" style="width: 100%;height: 100%;margin: 0px;padding: 0px">
    <div class="row" style="height: 100%">


      <div class="col-2">
        <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>

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

      </div>
      <div class="col-10">

        <div style="position: relative; height: 90%;width: 100%;">
          <b-button @click="findpeak()" style="position:absolute;right: 20px;z-index: 10; ">寻峰</b-button>
        <div class="chart-container" ref="chart_weavelenth"></div>
      </div>
        <p style="position:absolute ;bottom: 10px;width: 100%;height: 30px" >
          <b-input-group append="ms" style="position:absolute;left: 20px;width:20% ">
          <b-input-group-prepend>
          <b-button variant="secondary" style="margin: auto" @click="OPT_devic(0)">OPT</b-button>
          </b-input-group-prepend>
          <b-form-input v-model="shutter_time_up"></b-form-input>


        </b-input-group>
          <b-button @click="GetOneData" style="position:absolute;left: 25% ">获取数据</b-button>
          <b-button @click="updataName" style="position:absolute; right: 50% ">计算</b-button>
          <b-button @click="Set_Weave_Coeff" style="position:absolute;right: 20px ">设置</b-button>
        </p>
      </div>
    </div>


  </div>



</template>

<style scoped>
.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:100%;
  height: 100%;

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