first

src/components/Greet.vue

@@ -0,0 +1,194 @@
+<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("sendtoportAndgetreturn",{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>
+    <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>