SpectralPlot/src/components/Greet.vue

<script >
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/tauri";
import 'jsoneditor'
import { defineComponent, reactive, toRefs } from 'vue'
import { Vue3JsonEditor } from 'vue3-json-editor'

export default {
  name: "Greet",
  components: {

    Vue3JsonEditor
  },
  data() {
    return {
      greetMsg: "",
      name: "",
      datatype: "json",
      ComePort: [],
      portname: "",
      bandrate: 115200,
      Statusnow: { isopen: false,buttonstring:"打开串口" },
      jsondata: { command: "get_sensor_info" },
      jsonoutdata: {},

      editorOptions: {
        onRenderMenu: (menuItems, node) => {
          // Customize or modify the context menu items here
          // For example, adding a custom action
          menuItems.push({
            label: 'Custom Action',
            action: () => {
              // Your custom action logic here
              console.log('Custom action clicked!');
            },
          });

          return menuItems;
        },
      },


    };
  },
  mounted() {
    var that = this;
      // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
      invoke("getportnames").then((message) => {
        that.ComePort = message;
        console.log(message);
        if (message.length > 0) {
          that.portname = that.ComePort[0];
        }
      });

  },
  methods: {
    async greet() {
      if (this.Statusnow.isopen == false) {
        alert("串口未打开");
        return;
      }
      var that = this;
      console.log(this.jsondata);
 
      invoke("sendtoport_andgetreturn",{data:this.jsondata,datatype:"json"}).then((message) => {
        that.greetMsg = message;
        that.jsonoutdata = JSON.parse(message.content);
        console.log(message);
      });


    },
    async onJsonChange(json) {
      console.log('json change', json);
      this.jsondata = json;
    },
    async onModeChange(mode) {
      console.log('mode change', mode);
    },
    async opencom() {
      if(this.Statusnow.isopen){
        invoke("closecome").then((message) => {
          this.greetMsg = message;
         // alert(message);
          if (message == "Port is closed") {
            this.Statusnow.isopen = false;
            this.Statusnow.buttonstring = "打开串口";
          }

        });

      }else{
        var that = this;
      invoke("opencom",{portname:this.portname,baudrate:this.bandrate}).then((message) => {
        that.greetMsg = message;
        console.log(message);
      //  alert(message);
        if (message == "Port is open") {
          that.Statusnow.isopen = true;
          that.Statusnow.buttonstring = "关闭串口";



        }
      });
      }

    },
  }
 
};



// const greetMsg = ref("");
// const name = ref("");
// const datatype = ref("json");

// async function greet() {
//   var that= this;
//   // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
//   invoke('getportnames').then((message) =>{
//     that.greetMsg = message;
//     console.log(message);
    
//   })

// }




</script>

<template>
  <div>
    <p>选择串口号:
      <select  v-model="portname">
      <option v-for="item in ComePort" :key="item">{{item}}</option>

    </select> 
    <select v-model="bandrate">
      <option value="4800">4800</option>
      <option value="9600">9600</option>
      <option value="19200">19200</option>
      <option value="38400">38400</option>
      <option value="57600">57600</option>
      <option value="115200">115200</option>
      <option value="480600">480600</option>
      <option value="921600">921600</option>


    </select>
    <input type="checkbox" v-model="Statusnow.isopen" />
    <button @click="opencom" >{{Statusnow.buttonstring }}</button>
    
    <select v-model="datatype" >
      <option value="string">字符串</option>
      <option value="json">json</option>
      <option value="bytes">二进制</option>
    </select>

  </p>





    <input v-if="datatype!='json'" v-model="name" placeholder="Enter your name" />
    
    <Vue3JsonEditor class="jsonview" v-if="datatype=='json'" lang="zh"  :options="editorOptions" v-model="jsondata"  @json-change="onJsonChange" @mode-change="onModeChange"  />
    <button @click="greet" style="z-index: 99;">发送</button>
<!--    <p>{{ greetMsg }}</p>-->
    <vue3-json-editor  class="jsonview" v-model="jsonoutdata" />


    
  </div>
</template>
<style scoped>

</style>
<style>

.jsoneditor-tree{
  min-width: 100px !important;
  
}
.jsoneditor-outer{
  min-width: 100px !important;
  height: 35vh !important;
}

</style>