From c52cb0db65c51e962faddee14c68973138141e5c Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Tue, 9 May 2023 17:45:14 +0800
Subject: [PATCH] local storage

---
 index.html | 308 +++++++++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 259 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index deb765e..2d9b4e1 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,7 @@
         height: 100vh;
         box-sizing: border-box;
         flex: 1;
+        max-width: calc(100vw - 500px);
       }
       .btn {
         padding: 36px;
@@ -495,133 +496,300 @@
               >
                 <div class="single">
                   <p>ID</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="dianji_id" />
                 </div>
                 <div
                   class="single"
                   style="margin-left: 10px; margin-right: 5px"
                 >
                   <p>BASE</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="dianji_base" />
                 </div>
                 <div
                   class="single"
                   style="margin-left: 5px; margin-right: 10px"
                 >
                   <p>OFFSET</p>
-                  <input type="text" class="input" />
+                  <input type="text" class="input" id="dianji_offset" />
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">状态</h3>
                 <div class="form">
                   <p class="label">设备状态</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="dianji_status_1" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_status_1', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">异常状态</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="dianji_status_2" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_status_2', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">当前转速</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="dianji_status_3" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_status_3', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">当前位置</p>
-                  <input type="text" class="input" />
-                  <button class="btn">读</button>
+                  <input type="text" class="input" id="dianji_status_4" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_status_4', 'read')"
+                  >
+                    读
+                  </button>
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">配置</h3>
                 <div class="form">
                   <p class="label">加速度</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_1"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_1', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_1', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">减速度</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_2"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_2', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_2', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">速度</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_3"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_3', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_3', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">零点偏移</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_4"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_4', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_4', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">归零速度</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_5"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_5', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_5', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">归零减速度</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_6"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_6', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_6', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">归零最大位移</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_7"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_7', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_7', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">归零第一阶段移动距离</p>
-                  <input type="text" class="input_config" />
-                  <button class="btn">读</button>
-                  <button class="btn">写</button>
+                  <input
+                    type="text"
+                    class="input_config"
+                    id="dianji_config_8"
+                  />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_8', 'read')"
+                  >
+                    读
+                  </button>
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_config_8', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
               </div>
               <div class="card_container">
                 <h3 class="title">动作</h3>
                 <div class="form">
                   <p class="label">速度模式控制</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_1" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_1', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">位置模式控制</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_2" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_2', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">位置模式相对位置</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_3" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_3', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">归零</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_4" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_4', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">零位校准</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_5" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_5', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">停止</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_6" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_6', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
                 <div class="form">
                   <p class="label">清空异常</p>
-                  <input type="text" class="input" />
-                  <button class="btn">写</button>
+                  <input type="text" class="input" id="dianji_move_7" />
+                  <button
+                    class="btn"
+                    onclick="readValueD('#dianji_move_7', 'write')"
+                  >
+                    写
+                  </button>
                 </div>
               </div>
             </div>
@@ -645,8 +813,16 @@
     window.onload = () => {
       const commonI = document.querySelector("#common_id");
       const commonB = document.querySelector("#common_base");
+      const dianI = document.querySelector("#dianji_id");
+      const dianB = document.querySelector("#dianji_base");
+      const duoI = document.querySelector("#duoji_id");
+      const duoB = document.querySelector("#duoji_base");
       commonI.value = localStorage.getItem("id");
       commonB.value = localStorage.getItem("base");
+      dianI.value = localStorage.getItem("d_id");
+      dianB.value = localStorage.getItem("d_base");
+      duoI.value = localStorage.getItem("du_id");
+      duoB.value = localStorage.getItem("du_base");
     };
     var ws = null;
     const websocketInput = document.querySelector("#ws_connnect_input");
@@ -672,12 +848,28 @@
 
     const commonI = document.querySelector("#common_id");
     const commonB = document.querySelector("#common_base");
+    const dianI = document.querySelector("#dianji_id");
+    const dianB = document.querySelector("#dianji_base");
+    const duoI = document.querySelector("#duoji_id");
+    const duoB = document.querySelector("#duoji_base");
     commonI.addEventListener("input", (e) => {
       localStorage.setItem("id", e.target.value);
     });
     commonB.addEventListener("input", (e) => {
       localStorage.setItem("base", e.target.value);
     });
+    dianI.addEventListener("input", (e) => {
+      localStorage.setItem("d_id", e.target.value);
+    });
+    dianB.addEventListener("input", (e) => {
+      localStorage.setItem("d_base", e.target.value);
+    });
+    duoI.addEventListener("input", (e) => {
+      localStorage.setItem("du_id", e.target.value);
+    });
+    duoB.addEventListener("input", (e) => {
+      localStorage.setItem("du_base", e.target.value);
+    });
 
     const tabs = document.querySelector(".tabs");
     const tabBars = document.querySelectorAll(".tab-bar .tab");
@@ -912,5 +1104,23 @@
   </script>
   <script>
     // 电机js
+    const readValueD = (id, type) => {
+      const duoId = document.querySelector("#dianji_id");
+      const duoBase = document.querySelector("#dianji_base");
+      const duoOff = document.querySelector("#dianji_offset");
+      const ele = document.querySelector(id);
+      const { protocol, message } = commonMessage;
+      const msg = JSON.stringify({
+        protocol,
+        message: {
+          ...message,
+          targetId: parseInt(duoId.value),
+          ctrlPointAddr: parseInt(duoBase.value) + parseInt(duoOff.value),
+          ctrlPointVal: parseInt(ele.value),
+          type,
+        },
+      });
+      sendOrder(msg);
+    };
   </script>
 </html>