From 8dfb37b10ffb2fcb41c85b3fa266d1ef2874aebc Mon Sep 17 00:00:00 2001
From: wuyouming666 <2265557248@qq.com>
Date: 星期四, 30 十一月 2023 08:53:27 +0800
Subject: [PATCH] 修改电气管理PLC通讯逻辑

---
 CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue |  679 +++++++++++++++++++++++++++++---------------------------
 1 files changed, 350 insertions(+), 329 deletions(-)

diff --git a/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue b/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue
index 8461e7e..a79506e 100644
--- a/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue
+++ b/CanadaMes-ui/src/views/Electrical/ManualonePosition2.vue
@@ -1,330 +1,351 @@
-<template>
-  <div class="app">
-    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
-      <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm')
-      }}</router-link>
-      <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State')
-      }}</router-link>
-      <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action')
-      }}</router-link>
-      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')
-      }}</router-link>
-      <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign')
-      }}</router-link>
-      <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{
-        $t('ServoManual')
-      }}</router-link>
-    </el-breadcrumb>
-
-    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
-
-      <router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{
-        $t('Servomanualone')
-      }}</router-link>
-      <router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1')
-      }}</router-link>
-      <!-- <router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2')
-        }}</router-link> -->
-      <router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{
-        $t('Positioning1')
-      }}</router-link>
-      <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{
-        $t('Positioning2')
-      }}</router-link>
-      <router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{
-        $t('ManualonePosition')
-      }}</router-link>
-      <router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{
-        $t('ManualonePosition2')
-      }}</router-link>
-      <router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{
-        $t('AutomaticParameterSetting')
-      }}</router-link>
-      <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{
-        $t('ManualJog')
-      }}</router-link>
-    </el-breadcrumb>
-
-    <el-row :gutter="20">
-      <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
-        <el-card class="json-block" style="width:485px;">
-          <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container">
-            <div class="item-row">
-              <span class="name" style="width:100px;">{{ item.name }}</span>
-              <el-input style="width:250px;" v-if="item.state != 0 && item.type === '0'" v-model="item.value"
-                class="input-box"></el-input>
-            </div>
-          </div>
-          <div class="button-row" style="display: flex; justify-content: space-between;">
-            <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex">
-              <el-button v-if="item.button && item.button.state != 0" :name="item.button.name" v-model="item.button.value"
-                :class="{ 'action-button': true, 'error-button': item.button.name === '鏁呴殰' && item.button.value === 1 }"
-                @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{
-                  item.button.name }}</el-button>
-            </div>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <!-- <el-button @click="submitDataToBackend">鎻愪氦鏁版嵁鍒板悗绔�</el-button> -->
-  </div>
-</template>
-
-<script>
-import LanguageMixin from '../../lang/LanguageMixin'
-import data from '../../configuration/Manualoneposition2'
-import { throttle } from 'lodash';
-let socket;
-export default {
-  name: "ManualonePosition2",
-  mixins: [LanguageMixin],
-  data () {
-    return {
-      jsonData: data // 鍔犺浇鏁翠釜data.json鏂囦欢浣滀负jsonData
-    }
-  },
-  created () {
-    this.initWebSocket();
-    // console.log('jsonData:', this.jsonData); 
-
-  },
-  methods: {
-    updateButtonValue (dataGroup, itemIndex) {
-      // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1
-
-      this.$set(dataGroup[itemIndex].button, 'value', 1);
-
-
-
-    },
-    submitDataToBackend (currentButtonName) {
-      if (currentButtonName === 'A01缈昏浆鍚姩') {
-        const data = [];
-
-        for (let i = 0; i < 1; i++) {
-          const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => {
-            return { value: item.value };
-          });
-
-          const values = inputData.map(item => item.value);
-
-          data.push(values);
-        }
-
-
-
-        const jsonObject = { data };
-
-        // 鎻愪氦鏁版嵁鍒板悗绔�
-        const jsonString = JSON.stringify(jsonObject);
-        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString);
-        socket?.send(jsonString);
-
-      }
-
-      if (currentButtonName === 'A02缈昏浆鍚姩') {
-        const data = [];
-
-        for (let i = 1; i < 2; i++) {
-          const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => {
-            return { value: item.value };
-          });
-
-          const values = inputData.map(item => item.value);
-          data.unshift([]);
-          data.push(values);
-        }
-
-
-
-        const jsonObject = { data };
-
-        // 鎻愪氦鏁版嵁鍒板悗绔�
-        const jsonString = JSON.stringify(jsonObject);
-        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString);
-        socket?.send(jsonString);
-
-      }
-
-      if (currentButtonName === '鏁呴殰') {
-
-        const data2 = [];
-        const resetButtonValues = this.jsonData.map(item => {
-          const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鏁呴殰');
-          return buttonItem ? buttonItem.button.value : null;
-        }).filter(value => value !== null);
-
-        // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓�
-        data2.push(...resetButtonValues);
-        data2.unshift([], []);
-        const jsonObject2 = { data2 };
-
-        // 鎻愪氦鏁版嵁鍒板悗绔�
-        const jsonString2 = JSON.stringify(jsonObject2);
-        console.log('鎵�鏈夋晠闅滅殑value:', jsonString2);
-        socket?.send(jsonString2);
-
-
-      }
-
-      if (currentButtonName === '澶嶄綅') {
-
-        const data2 = [];
-        const resetButtonValues = this.jsonData.map(item => {
-          const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '澶嶄綅');
-          return buttonItem ? buttonItem.button.value : null;
-        }).filter(value => value !== null);
-
-        // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓�
-        data2.push(...resetButtonValues);
-        data2.unshift([], [], []);
-        const jsonObject2 = { data2 };
-
-        // 鎻愪氦鏁版嵁鍒板悗绔�
-        const jsonString2 = JSON.stringify(jsonObject2);
-        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2);
-        socket?.send(jsonString2);
-
-
-      }
-
-
-    },
-
-
-    initWebSocket () {
-
-      let viewname = "ManualonePosition2";
-
-      if (typeof WebSocket === "undefined") {
-        console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
-      } else {
-        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
-
-        if (socket != null) {
-          socket.close();
-          socket = null;
-        }
-
-        // 寮�鍚竴涓獁ebsocket鏈嶅姟
-        socket = new WebSocket(socketUrl);
-
-        // 鎵撳紑浜嬩欢
-        socket.onopen = function () {
-          console.log("websocket宸叉墦寮�");
-        };
-
-        // 鏀跺埌娑堟伅
-        socket.onmessage = (msg) => {
-          if (!msg.data) {
-            return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫
-          }
-
-          let obj = JSON.parse(msg.data);
-          console.log(obj)
-          const jsonData2 = this.jsonData;
-
-          const handleMouseMove = throttle(function (event) {
-            const inputBox = document.querySelectorAll('.el-card__body');
-            const target = event.target;
-            if (inputBox && Array.from(inputBox).every(box => !box.contains(target))) {
-              // 鎵ц鏇存柊閫昏緫
-              for (let i = 0; i < 2; i++) {
-                jsonData2[i].forEach((item, index) => {
-                  if (typeof item.value !== 'undefined' && typeof obj[`zuhe${i + 1}`][0][index] !== 'undefined') {
-                    item.value = obj[`zuhe${i + 1}`][0][index];
-                  }
-                });
-              }
-
-              jsonData2.forEach((item) => {
-                item.forEach((subItem) => {
-                  if (subItem.sending === 4) {
-                    subItem.value = obj.shishi1[0][0];
-                  }
-                  if (subItem.sending === 5) {
-                    subItem.value = obj.shishi1[0][1];
-                  }
-                  if (subItem.sending === 6) {
-                    subItem.value = obj.shishi1[0][2];
-                  }
-                  if (subItem.sending === 7) {
-                    subItem.value = obj.shishi1[0][3];
-                  }
-                });
-              });
-
-              // 閬嶅巻guzhang鏁扮粍
-              for (let i = 0; i < obj.guzhang[0].length; i++) {
-                const guzhangValue = obj.guzhang[0][i];
-
-                // 鏌ユ壘jsonData2涓甫鏈�"button"鐨勫璞★紝骞朵笖name绛変簬"鏁呴殰"
-                for (let j = 0; j < jsonData2.length; j++) {
-                  const section = jsonData2[j];
-
-                  for (let k = 0; k < section.length; k++) {
-                    const item = section[k];
-
-                    if (item.button && item.button.name === "鏁呴殰") {
-                      // 鏇存柊value灞炴��
-                      item.button.value = guzhangValue;
-                      break;
-                    }
-                  }
-
-
-                }
-              }
-
-
-
-
-            }
-          }, 200);
-
-          document.addEventListener('mouseover', handleMouseMove);
-        };
-
-
-
-
-        // 鍏抽棴浜嬩欢
-        socket.onclose = function () {
-          console.log("websocket宸插叧闂�");
-        };
-
-        // 鍙戠敓閿欒浜嬩欢
-        socket.onerror = function () {
-          console.log("websocket鍙戠敓浜嗛敊璇�");
-        };
-
-      }
-    },
-    send () {
-
-
-      socket?.send(JSON.stringify(this.messagepack));
-    }
-
-  }
-}
-</script>
-
-<style scoped>
-.item-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 2px;
-  /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */
-}
-
-.action-button {
-  margin-right: 10px;
-  background: #66b1ff;
-  color: #FFF;
-}
-
-.blue-button {
-  background-color: skyblue;
-}
+<template>
+  <div class="app">
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
+      <router-link to="/Electrical/alarm" tag="el-button" type="text" active-class="blue-button">{{ $t('Alarm')
+      }}</router-link>
+      <router-link to="/Electrical/State" tag="el-button" type="text" active-class="blue-button">{{ $t('State')
+      }}</router-link>
+      <router-link to="/Electrical/Action" tag="el-button" type="text" active-class="blue-button">{{ $t('Action')
+      }}</router-link>
+      <router-link to="/Electrical/Parameter" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter')
+      }}</router-link>
+      <router-link to="/Electrical/Sign" tag="el-button" type="text" active-class="blue-button">{{ $t('Sign')
+      }}</router-link>
+      <router-link to="/Electrical/Servomanual" tag="el-button" type="text" active-class="blue-button">{{
+        $t('ServoManual')
+      }}</router-link>
+    </el-breadcrumb>
+
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="el-breadcrumb">
+
+      <router-link to="/Electrical/Servomanualone" tag="el-button" type="text" active-class="blue-button">{{
+        $t('Servomanualone')
+      }}</router-link>
+      <router-link to="/Electrical/Parameter1" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter1')
+      }}</router-link>
+      <!-- <router-link to="/Electrical/Parameter2" tag="el-button" type="text" active-class="blue-button">{{ $t('Parameter2')
+        }}</router-link> -->
+      <router-link to="/Electrical/Positioning1" tag="el-button" type="text" active-class="blue-button">{{
+        $t('Positioning1')
+      }}</router-link>
+      <router-link to="/Electrical/Positioning2" tag="el-button" type="text" active-class="blue-button">{{
+        $t('Positioning2')
+      }}</router-link>
+      <router-link to="/Electrical/ManualonePosition" tag="el-button" type="text" active-class="blue-button">{{
+        $t('ManualonePosition')
+      }}</router-link>
+      <router-link to="/Electrical/ManualonePosition2" tag="el-button" type="text" active-class="blue-button">{{
+        $t('ManualonePosition2')
+      }}</router-link>
+      <router-link to="/Electrical/AutomaticParameterSetting" tag="el-button" type="text" active-class="blue-button">{{
+        $t('AutomaticParameterSetting')
+      }}</router-link>
+      <router-link to="/Electrical/ManualJog" tag="el-button" type="text" active-class="blue-button">{{
+        $t('ManualJog')
+      }}</router-link>
+    </el-breadcrumb>
+
+    <el-row :gutter="20">
+      <el-col :span="12" v-for="(dataGroup, groupIndex) in jsonData" :key="groupIndex">
+        <el-card class="json-block" style="width:485px;">
+          <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex" class="item-container">
+            <div class="item-row">
+              <span class="name" style="width:100px;">{{ item.name }}</span>
+              <el-input style="width:250px;" v-if="item.state != 0 && item.type === '0'" v-model="item.value"
+                class="input-box"></el-input>
+            </div>
+          </div>
+          <div class="button-row" style="display: flex; justify-content: space-between;">
+            <div v-for="(item, itemIndex) in dataGroup" :key="itemIndex">
+              <el-button v-if="item.button && item.button.state != 0" :name="item.button.name" v-model="item.button.value"
+                :class="{ 'action-button': true, 'error-button': item.button.name === '鏁呴殰' && item.button.value === 1 }"
+                @click="updateButtonValue(dataGroup, itemIndex); submitDataToBackend(item.button.name);">{{
+                  item.button.name }}</el-button>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- <el-button @click="submitDataToBackend">鎻愪氦鏁版嵁鍒板悗绔�</el-button> -->
+  </div>
+</template>
+
+<script>
+import LanguageMixin from '../../lang/LanguageMixin'
+import data from '../../configuration/Manualoneposition2'
+import { throttle } from 'lodash';
+let socket;
+export default {
+  name: "ManualonePosition2",
+  mixins: [LanguageMixin],
+  data () {
+    return {
+      jsonData: data // 鍔犺浇鏁翠釜data.json鏂囦欢浣滀负jsonData
+    }
+  },
+  created () {
+    this.initWebSocket();
+    // console.log('jsonData:', this.jsonData); 
+
+  },
+  methods: {
+    updateButtonValue (dataGroup, itemIndex) {
+      // 灏嗗綋鍓嶆寜閽殑鍊艰涓�1
+
+      this.$set(dataGroup[itemIndex].button, 'value', 1);
+
+
+
+    },
+    submitDataToBackend (currentButtonName) {
+      if (currentButtonName === 'A01缈昏浆鍚姩') {
+        const data = [];
+
+        for (let i = 0; i < 1; i++) {
+          const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => {
+            return { value: item.value };
+          });
+
+          const values = inputData.map(item => item.value);
+
+          data.push(values);
+        }
+
+
+
+        const jsonObject = { data };
+
+        // 鎻愪氦鏁版嵁鍒板悗绔�
+        const jsonString = JSON.stringify(jsonObject);
+        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString);
+        socket?.send(jsonString);
+
+      }
+
+      if (currentButtonName === 'A02缈昏浆鍚姩') {
+        const data = [];
+
+        for (let i = 1; i < 2; i++) {
+          const inputData = this.jsonData[i].filter(item => item.type === '0').map(item => {
+            return { value: item.value };
+          });
+
+          const values = inputData.map(item => item.value);
+          data.unshift([]);
+          data.push(values);
+        }
+
+
+
+        const jsonObject = { data };
+
+        // 鎻愪氦鏁版嵁鍒板悗绔�
+        const jsonString = JSON.stringify(jsonObject);
+        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString);
+        socket?.send(jsonString);
+
+      }
+
+      if (currentButtonName === '鏁呴殰') {
+
+        const data2 = [];
+        const resetButtonValues = this.jsonData.map(item => {
+          const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鏁呴殰');
+          return buttonItem ? buttonItem.button.value : null;
+        }).filter(value => value !== null);
+
+        // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓�
+        data2.push(...resetButtonValues);
+        data2.unshift([], []);
+        const jsonObject2 = { data2 };
+
+        // 鎻愪氦鏁版嵁鍒板悗绔�
+        const jsonString2 = JSON.stringify(jsonObject2);
+        console.log('鎵�鏈夋晠闅滅殑value:', jsonString2);
+        socket?.send(jsonString2);
+
+
+      }
+
+      if (currentButtonName === '澶嶄綅') {
+
+        const data2 = [];
+        const resetButtonValues = this.jsonData.map(item => {
+          const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '澶嶄綅');
+          return buttonItem ? buttonItem.button.value : null;
+        }).filter(value => value !== null);
+
+        // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓�
+        data2.push(...resetButtonValues);
+        data2.unshift([], [], []);
+        const jsonObject2 = { data2 };
+
+        // 鎻愪氦鏁版嵁鍒板悗绔�
+        const jsonString2 = JSON.stringify(jsonObject2);
+        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2);
+        socket?.send(jsonString2);
+
+
+      }
+
+      if (currentButtonName === '鍥為浂') {
+
+        const data2 = [];
+        const resetButtonValues = this.jsonData.map(item => {
+          const buttonItem = item.find(subItem => subItem.button && subItem.button.name === '鍥為浂');
+          return buttonItem ? buttonItem.button.value : null;
+        }).filter(value => value !== null);
+
+        // 灏嗗緱鍒扮殑鍊兼坊鍔犲埌 data 鏁扮粍涓�
+        data2.push(...resetButtonValues);
+        data2.unshift([], [], [], []);
+        const jsonObject2 = { data2 };
+
+        // 鎻愪氦鏁版嵁鍒板悗绔�
+        const jsonString2 = JSON.stringify(jsonObject2);
+        console.log('鎵�鏈塗ype涓�0鐨剉alue:', jsonString2);
+        socket?.send(jsonString2);
+
+
+      }
+
+
+    },
+
+
+    initWebSocket () {
+
+      let viewname = "ManualonePosition2";
+
+      if (typeof WebSocket === "undefined") {
+        console.log("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔WebSocket");
+      } else {
+        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
+
+        if (socket != null) {
+          socket.close();
+          socket = null;
+        }
+
+        // 寮�鍚竴涓獁ebsocket鏈嶅姟
+        socket = new WebSocket(socketUrl);
+
+        // 鎵撳紑浜嬩欢
+        socket.onopen = function () {
+          console.log("websocket宸叉墦寮�");
+        };
+
+        // 鏀跺埌娑堟伅
+        socket.onmessage = (msg) => {
+          if (!msg.data) {
+            return; // 濡傛灉鏀跺埌绌烘暟鎹紝鍒欑洿鎺ヨ繑鍥烇紝涓嶆墽琛屽悗缁�昏緫
+          }
+
+          let obj = JSON.parse(msg.data);
+          // console.log(obj)
+          const jsonData2 = this.jsonData;
+
+          const handleMouseMove = throttle(function (event) {
+            const inputBox = document.querySelectorAll('.el-card__body');
+            const target = event.target;
+            if (inputBox && Array.from(inputBox).every(box => !box.contains(target))) {
+              // 鎵ц鏇存柊閫昏緫
+              for (let i = 0; i < 2; i++) {
+                jsonData2[i].forEach((item, index) => {
+                  if (typeof item.value !== 'undefined' && typeof obj[`zuhe${i + 1}`][0][index] !== 'undefined') {
+                    item.value = obj[`zuhe${i + 1}`][0][index];
+                  }
+                });
+              }
+
+              jsonData2.forEach((item) => {
+                item.forEach((subItem) => {
+                  if (subItem.sending === 4) {
+                    subItem.value = obj.shishi1[0][0];
+                  }
+                  if (subItem.sending === 5) {
+                    subItem.value = obj.shishi1[0][1];
+                  }
+                  if (subItem.sending === 6) {
+                    subItem.value = obj.shishi1[0][2];
+                  }
+                  if (subItem.sending === 7) {
+                    subItem.value = obj.shishi1[0][3];
+                  }
+                });
+              });
+
+              // 閬嶅巻guzhang鏁扮粍
+              for (let i = 0; i < obj.guzhang[0].length; i++) {
+                const guzhangValue = obj.guzhang[0][i];
+
+                // 鏌ユ壘jsonData2涓甫鏈�"button"鐨勫璞★紝骞朵笖name绛変簬"鏁呴殰"
+                for (let j = 0; j < jsonData2.length; j++) {
+                  const section = jsonData2[j];
+
+                  for (let k = 0; k < section.length; k++) {
+                    const item = section[k];
+
+                    if (item.button && item.button.name === "鏁呴殰") {
+                      // 鏇存柊value灞炴��
+                      item.button.value = guzhangValue;
+                      break;
+                    }
+                  }
+
+
+                }
+              }
+
+
+
+
+            }
+          }, 200);
+
+          document.addEventListener('mouseover', handleMouseMove);
+        };
+
+
+
+
+        // 鍏抽棴浜嬩欢
+        socket.onclose = function () {
+          console.log("websocket宸插叧闂�");
+        };
+
+        // 鍙戠敓閿欒浜嬩欢
+        socket.onerror = function () {
+          console.log("websocket鍙戠敓浜嗛敊璇�");
+        };
+
+      }
+    },
+    send () {
+
+
+      socket?.send(JSON.stringify(this.messagepack));
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.item-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+  /* 璋冩暣姣忎釜椤圭洰涔嬮棿鐨勯棿璺� */
+}
+
+.action-button {
+  margin-right: 10px;
+  background: #66b1ff;
+  color: #FFF;
+}
+
+.blue-button {
+  background-color: skyblue;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0