添加部分客户端切换代码

src/common/ClientConnection.ts

@@ -1,3 +1,4 @@
+import { ConnectTableEntity } from "./../entities/ConnectTableEntity";
 import { PollingEntity } from "./../entities/PollingEntity";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
@@ -970,6 +971,17 @@ export default class ClientConnection {
     );
   }
 
+  public async getConnectList() {
+    return await this.doRpc<Protocol.GetConnectionListResponseEntity>(
+      new Protocol.GetConnectionListRequestEntity()
+    );
+  }
+  public async setConnectItem(entity: ConnectTableEntity) {
+    return await this.doRpc<Protocol.SetConnectionItemResponseEntity>(
+      new Protocol.SetConnectionItemRequestEntity(entity)
+    );
+  }
+
   public destory() {
     if (this.ws) {
       this.ws.onclose = null;

src/common/EventBus.ts

@@ -31,4 +31,5 @@ export namespace EventNamesDefine {
   export const WebSocketConnected = "onWebSocketConnected";
   export const CurrentConnectDisconnect = "onCurrentConnectDisconnect";
   export const CurrentConnectConnected = "onCurrentConnectConnected";
+  export const CurrentClientChanged = "onCurrentClientChanged";
 }

src/common/GlobalData.ts

@@ -182,7 +182,9 @@ export default class GlobalData {
 
   removeClient(name: string | null) {
     if (name) {
+      const connection = this.clients.get(name);
       this.clients.delete(name);
+      connection?.destory();
     }
   }
 }

src/entities/ConnectTableEntity.ts

@@ -0,0 +1,11 @@
+import BaseEntity from "./BaseEntity";
+
+export class ConnectTableEntity extends BaseEntity {
+  static WSType = "websocket";
+
+  type = "";
+  host = "";
+  name = "";
+  user = "";
+  password = "";
+}

src/entities/WSProtocol.ts

@@ -8,6 +8,7 @@ import { PollingEntity, PollingGroupEntity } from "./PollingEntity";
 import { EdgeBlendingPoint } from "./EdgeBlendingEntities";
 import { ExternalControlTableEntity } from "./ExternalControlTableEntity";
 import { SerialPortConfigEntity } from "./SerialPortConfigEntity";
+import { ConnectTableEntity } from "./ConnectTableEntity";
 
 export namespace Protocol {
   export class Commands {
@@ -378,6 +379,12 @@ export namespace Protocol {
     public static get kRpcSetExternalControlSerialPortConfig() {
       return Commands.PROTOCOL_PREFIX + "RpcSetExternalControlSerialPortConfig";
     }
+    public static get kRpcGetConnectionList() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetConnectionList";
+    }
+    public static get kRpcSetConnectionItem() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetConnectionItem";
+    }
 
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
@@ -473,6 +480,8 @@ export namespace Protocol {
       Commands.kCallExternalControlData,
       Commands.kRpcGetExternalControlSerialPortConfig,
       Commands.kRpcSetExternalControlSerialPortConfig,
+      Commands.kRpcGetConnectionList,
+      Commands.kRpcSetConnectionItem,
     ]);
 
     public static get AllCommands() {
@@ -2264,7 +2273,6 @@ export namespace Protocol {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    RpcDeleteExternalControlDataResponseEntity() {}
 
     success = false;
   }
@@ -2297,7 +2305,6 @@ export namespace Protocol {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    RpcEditExternalControlDataResponseEntity() {}
 
     success = false;
   }
@@ -2330,7 +2337,6 @@ export namespace Protocol {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    RpcAddExternalControlDataResponseEntity() {}
 
     success = false;
   }
@@ -2347,15 +2353,15 @@ export namespace Protocol {
   }
 
   export class CallExternalControlDataRequestEntity extends PacketEntity {
-    constructor(uuid:string) {
+    constructor(uuid: string) {
       super();
       super.command = Commands.kCallExternalControlData;
       super.flag = PacketEntity.FLAG_REQUEST;
       super.rpc_id = 0;
-      this.uuid = uuid
+      this.uuid = uuid;
     }
 
-    uuid:string;
+    uuid: string;
   }
 
   export class RpcGetExternalControlSerialPortConfigRequestEntity extends PacketEntity {
@@ -2374,7 +2380,6 @@ export namespace Protocol {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    RpcGetExternalControlSerialPortConfigResponseEntity() {}
 
     config = new SerialPortConfigEntity();
   }
@@ -2396,7 +2401,47 @@ export namespace Protocol {
       super();
       super.flag = PacketEntity.FLAG_RESPONSE;
     }
-    RpcSetExternalControlSerialPortConfigResponseEntity() {}
+
+    success = false;
+  }
+
+  export class GetConnectionListRequestEntity extends PacketEntity {
+    constructor(rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcGetConnectionList;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+    }
+
+    timestamp = 0;
+  }
+
+  export class GetConnectionListResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    connects: ConnectTableEntity[] = [];
+  }
+
+  export class SetConnectionItemRequestEntity extends PacketEntity {
+    constructor(entity: ConnectTableEntity, rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcSetConnectionItem;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+      this.entity = entity;
+    }
+
+    entity: ConnectTableEntity;
+  }
+
+  export class SetConnectionItemResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
 
     success = false;
   }

src/i18n/zh-CN/index.ts

@@ -460,4 +460,8 @@ export default {
   button: "按钮",
   "send power on command": "发送开机指令",
   "send power off command": "发送关机指令",
+  client: "客户端",
+  connection: "连接中",
+  "please check ipaddress or username or password":
+    "请检查用户名或用户名或密码",
 };

src/pages/Index.vue

@@ -66,6 +66,10 @@ export default defineComponent({
       GlobalData.getInstance().getCurrentClientName()
     );
 
+    EventBus.getInstance().on(EventNamesDefine.CurrentClientChanged, () => {
+      new Initializer(options).initialize();
+    });
+
     return {};
   },
 });

src/pages/Login.vue

@@ -351,6 +351,7 @@ export default defineComponent({
               if (is_login && web_socket) {
                 global_data.addClient(data.ip_address, web_socket);
                 global_data.setCurrentClientName(data.ip_address);
+
                 SessionStorage.set("auth", PermissionLevel.Root);
                 SessionStorage.set("url", url);
                 SessionStorage.set("name", data.ip_address);
@@ -362,6 +363,8 @@ export default defineComponent({
                     : Md5.hashStr(data.password ?? "admin")
                 );
 
+                // TODO add self to setConnects
+
                 if (remember_password.value) {
                   Cookies.set("remember_password", JSON.stringify(true));
                   Cookies.set("auto_login", JSON.stringify(auto_login.value));

src/pages/TopToolBar.vue

@@ -35,6 +35,31 @@
         class="q-mr-sm"
       >
         <q-list>
+          <div v-if="false">
+            <div
+              v-for="(item, index) in $store.state.connect_list"
+              :key="index"
+            >
+              <q-item clickable v-close-popup @click="changeHost(item)">
+                <q-item-section avatar>
+                  <q-icon
+                    name="computer"
+                    :color="
+                      item.host == $store.state.device_ip_address ? 'green' : ''
+                    "
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>
+                    {{ item.name ? item.name : $t("client") + index }}
+                  </q-item-label>
+                  <q-item-label caption>
+                    {{ item.host }}
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </div>
+          </div>
           <q-item clickable v-close-popup @click="logout">
             <q-item-section avatar> <q-icon name="logout" /> </q-item-section>
             <q-item-section>
@@ -356,6 +381,8 @@ import {
   date as $date,
 } from "quasar";
 import { useI18n } from "vue-i18n";
+import { ConnectTableEntity } from "src/entities/ConnectTableEntity";
+import ClientConnection from "src/common/ClientConnection";
 
 export default defineComponent({
   name: "PageTopToolBar",
@@ -463,6 +490,20 @@ export default defineComponent({
     };
     setInterval(checkRegistered, 5000);
 
+    EventBus.getInstance().on(
+      EventNamesDefine.CurrentConnectConnected,
+      async () => {
+        try {
+          const client = GlobalData.getInstance().getCurrentClient();
+          if (client) {
+            const response = await client.getConnectList();
+            if (response) {
+              $store.commit("setConnects", response.connects);
+            }
+          }
+        } catch {}
+      }
+    );
     return {
       show_advanced_menu,
       plan_running,
@@ -645,6 +686,71 @@ export default defineComponent({
           timeout: 1500,
         });
       },
+      async changeHost(item: ConnectTableEntity) {
+        if (item) {
+          const url =
+            "ws://" +
+            item.host +
+            ":" +
+            GlobalData.kDefaultWebsocektPort.toString() +
+            GlobalData.kWebsocketResource;
+          const web_socket = new ClientConnection(
+            url,
+            item.user,
+            item.password
+          );
+          $q.loading.hide();
+          $q.loading.show({
+            message: $t.t("connection") + "...",
+          });
+
+          const wait_for = (ms: number) => {
+            return new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve(true);
+              }, ms);
+            });
+          };
+
+          let login_success = false;
+          for (let i = 0; i < 20; ++i) {
+            await wait_for(500);
+            if (web_socket._is_login) {
+              login_success = true;
+              break;
+            }
+          }
+
+          $q.loading.hide();
+
+          {
+            $q.notify({
+              color: login_success ? "positive" : "negative",
+              icon: login_success ? "done" : "warning",
+              message:
+                $t.t("login") +
+                (login_success
+                  ? $t.t("success")
+                  : $t.t("fail") +
+                    $t.t("please check ipaddress or username or password")) +
+                "!",
+              position: "top",
+              timeout: 1500,
+            });
+            if (login_success) {
+              GlobalData.getInstance().addClient(item.host, web_socket);
+              GlobalData.getInstance().setCurrentClientName(item.host);
+              $store.commit("setDeviceIpAddress", item.host);
+              EventBus.getInstance().emit(
+                EventNamesDefine.CurrentClientChanged
+              );
+            } else {
+              web_socket.destory();
+              GlobalData.getInstance().removeClient(item.host);
+            }
+          }
+        }
+      },
     };
   },
 });

src/store/index.ts

@@ -1,3 +1,4 @@
+import { ConnectTableEntity } from "./../entities/ConnectTableEntity";
 import {
   PollingEntity,
   PollingTreeItemEntity,
@@ -52,6 +53,7 @@ export interface StateInterface {
   selected_window: string;
   selected_signal_source: string;
   current_running_plan: string;
+  connect_list: ConnectTableEntity[];
 }
 
 // provide typings for `this.$store`
@@ -291,6 +293,7 @@ export default store(function (/* { ssrContext } */) {
       selected_signal_source:
         "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF",
       current_running_plan: "",
+      connect_list: [],
     },
 
     mutations: {
@@ -831,6 +834,20 @@ export default store(function (/* { ssrContext } */) {
       setCurrentRunningPlan(state: StateInterface, playload?: any) {
         state.current_running_plan = playload;
       },
+      setConnects(state: StateInterface, playload?: any) {
+        state.connect_list = playload;
+      },
+      addConnectItem(state: StateInterface, playload?: any) {
+        state.connect_list.push(playload);
+      },
+      cleanConnectItem(state: StateInterface, playload?: any) {
+        const index = state.connect_list.findIndex(
+          (element) => element && element.uuid == playload
+        );
+        if (index != -1) {
+          state.connect_list.slice(index, 1);
+        }
+      },
     },
 
     // enable strict mode (adds overhead!)