From 6943d78c97f345eb2b80aadfe91e7f43a1a5e855 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 26 Aug 2022 15:08:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=81=94=E5=8A=A8=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/common/ClientConnection.ts                |  52 ++-
 src/common/EventBus.ts                        |   2 +
 src/common/RemoteDataExangeProcesser.ts       |   5 +-
 .../EditJointActionEquipmentDialog.vue        | 331 ++++++++++++++++++
 .../ListJointActionEquipmentDialog.vue        | 205 +++++++++++
 src/components/ModeDialog.vue                 | 196 ++++++++++-
 .../JointActionEquipmentTableEntity.ts        |  14 +
 src/entities/ModeEntity.ts                    |   5 +-
 src/entities/WSProtocol.ts                    |  90 ++++-
 src/i18n/en-US/index.ts                       |  10 +
 src/i18n/zh-CN/index.ts                       |  10 +
 src/pages/TopToolBar.vue                      |  18 +
 13 files changed, 924 insertions(+), 16 deletions(-)
 create mode 100644 src/components/EditJointActionEquipmentDialog.vue
 create mode 100644 src/components/ListJointActionEquipmentDialog.vue
 create mode 100644 src/entities/JointActionEquipmentTableEntity.ts

diff --git a/package.json b/package.json
index 2702f71..3d4b0ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",
diff --git a/src/common/ClientConnection.ts b/src/common/ClientConnection.ts
index 7f4a46a..7e5edda 100644
--- a/src/common/ClientConnection.ts
+++ b/src/common/ClientConnection.ts
@@ -1,5 +1,5 @@
-import { ConnectTableEntity } from "./../entities/ConnectTableEntity";
-import { PollingEntity } from "./../entities/PollingEntity";
+import { ConnectTableEntity } from "src/entities/ConnectTableEntity";
+import { PollingEntity } from "src/entities/PollingEntity";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
 import { PlanEntity } from "src/entities/PlanEntity";
@@ -12,6 +12,7 @@ import { EdgeBlendingPoint } from "src/entities/EdgeBlendingEntities";
 import { ExternalControlTableEntity } from "src/entities/ExternalControlTableEntity";
 import { SerialPortConfigEntity } from "src/entities/SerialPortConfigEntity";
 import TimingTaskEntity from "src/entities/TimingTaskEntity";
+import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
 
 class _RpcInfo {
   send_timestamp: number;
@@ -494,10 +495,21 @@ export default class ClientConnection {
     }
   }
 
-  public async addMode(group_uuid?: string, name?: string, index?: number) {
+  public async addMode(
+    group_uuid?: string,
+    name?: string,
+    index?: number,
+    joint_action_equipments?: StringKeyValueEntity[]
+  ) {
     try {
       return await this.doRpc<Protocol.AddModeResponseEntity>(
-        new Protocol.AddModeRequestEntity(0, name, group_uuid, index)
+        new Protocol.AddModeRequestEntity(
+          0,
+          name,
+          group_uuid,
+          index,
+          joint_action_equipments
+        )
       );
     } catch (e) {
       console.error(e);
@@ -508,11 +520,19 @@ export default class ClientConnection {
     uuid?: string,
     name?: string,
     index?: number,
-    group_uuid?: string
+    group_uuid?: string,
+    joint_action_equipments?: StringKeyValueEntity[]
   ) {
     try {
       return await this.doRpc<Protocol.EditModeResponseEntity>(
-        new Protocol.EditModeRequestEntity(0, name, uuid, index, group_uuid)
+        new Protocol.EditModeRequestEntity(
+          0,
+          name,
+          uuid,
+          index,
+          group_uuid,
+          joint_action_equipments
+        )
       );
     } catch (e) {
       console.error(e);
@@ -1148,6 +1168,26 @@ export default class ClientConnection {
     }
   }
 
+  public async getJointActionEquipments() {
+    return await this.doRpc<Protocol.GetJointActionEquipmentResponseEntity>(
+      new Protocol.GetJointActionEquipmentRequestEntity()
+    );
+  }
+
+  public async setJointActionEquipment(
+    entity: JointActionEquipmentTableEntity
+  ) {
+    return await this.doRpc<Protocol.SetJointActionEquipmentResponseEntity>(
+      new Protocol.SetJointActionEquipmentRequestEntity(entity)
+    );
+  }
+
+  public async deleteJointActionEquipment(uuid: string) {
+    return await this.doRpc<Protocol.DeleteJointActionEquipmentResponseEntity>(
+      new Protocol.DeleteJointActionEquipmentRequestEntity(uuid)
+    );
+  }
+
   public destory() {
     this.ws?.close();
     if (this.ws) {
diff --git a/src/common/EventBus.ts b/src/common/EventBus.ts
index aef7b75..9f40088 100644
--- a/src/common/EventBus.ts
+++ b/src/common/EventBus.ts
@@ -33,4 +33,6 @@ export namespace EventNamesDefine {
   export const CurrentConnectConnected = "onCurrentConnectConnected";
   export const CurrentClientChanged = "onCurrentClientChanged";
   export const DropToWall = "onDropToWall";
+  export const RefreshJointActionEquipmentList =
+    "onRefreshJointActionEquipmentList";
 }
diff --git a/src/common/RemoteDataExangeProcesser.ts b/src/common/RemoteDataExangeProcesser.ts
index e47783b..3eda68c 100644
--- a/src/common/RemoteDataExangeProcesser.ts
+++ b/src/common/RemoteDataExangeProcesser.ts
@@ -174,12 +174,13 @@ export default class RemoteDataExangeProcesser {
               let pos = GlobalData.getInstance().modes.findIndex(
                 (element) => element && element.uuid == temp.mode.uuid
               );
-
               let refresh_flag = false;
               if (pos != -1) {
                 refresh_flag =
                   GlobalData.getInstance().modes[pos].group_uuid !=
-                  temp.mode.group_uuid;
+                    temp.mode.group_uuid ||
+                  GlobalData.getInstance().modes[pos].joint_action_equipments !=
+                    temp.mode.joint_action_equipments;
                 GlobalData.getInstance().modes[pos] = temp.mode;
               }
               $store.commit("setArrayValue", {
diff --git a/src/components/EditJointActionEquipmentDialog.vue b/src/components/EditJointActionEquipmentDialog.vue
new file mode 100644
index 0000000..2fe3057
--- /dev/null
+++ b/src/components/EditJointActionEquipmentDialog.vue
@@ -0,0 +1,331 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (!loading && evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form @submit="onSubmit">
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ is_add ? $t("add") : $t("edit") }}
+              {{ $t("joint action equipment") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="max-height: 50vh; width: 45vw" class="scroll">
+          <q-list>
+            <q-item>
+              <q-item-section avatar class="form_header">{{
+                $t("name")
+              }}</q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="show_name"
+                  maxlength="255"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section avatar class="form_header">{{
+                $t("type")
+              }}</q-item-section>
+              <q-item-section>
+                <q-select
+                  :options="types"
+                  @update:model-value="onTypeSelectChanged"
+                  emit-value
+                  map-options
+                  v-model="show_type"
+                  option-value="key"
+                  option-label="label"
+                  lazy-rules
+                  :rules="[
+                    (val) =>
+                      (is_add ? show_type != 'UNKNOW' : true) ||
+                      $t('type can not be unknow'),
+                  ]"
+                />
+              </q-item-section>
+            </q-item>
+            <q-item v-if="connect_type == 'network'">
+              <q-item-section avatar class="form_header">{{
+                $t("host")
+              }}</q-item-section>
+              <q-item-section>
+                <q-input
+                  v-model="host"
+                  maxlength="255"
+                  :rules="[
+                    (val) =>
+                      (val && val.length > 0) || $t('Please type something'),
+                    (val) =>
+                      isIpAddress(val) || $t('Please input vaild ip address'),
+                  ]"
+                  lazy-rules
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Close')"
+            no-caps
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Accept')"
+            type="submit"
+            no-caps
+            color="primary"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+
+.form_header {
+  width: 20%;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed, reactive, Ref } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { uid, useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import { api } from "boot/axios";
+import { HttpProtocol } from "src/entities/HttpProtocol";
+import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+
+export default defineComponent({
+  name: "ComponentEditJointActionEquipmentDialog",
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    let show_dialog = ref(false);
+    const loading = ref(false);
+    const is_add = ref(false);
+
+    const kDefaultTypeIndex = 1;
+
+    const types = [
+      {
+        key: "UNKNOW",
+        label: $t.t("unknow"),
+        value: {
+          protocol: "UNKNOW",
+          protocol_version: "UNKNOW",
+        },
+      },
+      {
+        key: "VTRON",
+        label: $t.t("VTRON"),
+        value: {
+          protocol: "VTRON",
+          protocol_version: "Normal",
+          connect_type: "network",
+        },
+      },
+      // {
+      //   key: "VTRON2",
+      //   label: $t.t("VTRON2"),
+      //   value: {
+      //     protocol: "VTRON",
+      //     protocol_version: "Normal2",
+      //     connect_type: "serialport",
+      //   },
+      // },
+    ];
+
+    let equipment: JointActionEquipmentTableEntity =
+      new JointActionEquipmentTableEntity();
+    const show_name = ref($t.t("new name"));
+    const show_type = ref("");
+    const connect_type: Ref<string | undefined> = ref("network");
+    const host = ref("192.168.1.1");
+
+    const onTypeSelectChanged = (value: string) => {
+      const type = types.find((element) => element && element.key == value);
+      if (type) {
+        connect_type.value = type.value.connect_type;
+      } else {
+        connect_type.value = "";
+      }
+    };
+
+    const copy_propertys = (
+      const_obj: any,
+      obj: JointActionEquipmentTableEntity
+    ) => {
+      if (const_obj) {
+        try {
+          for (const item of Object.keys(const_obj)) {
+            if (typeof const_obj[item] != "undefined") {
+              (<any>obj)[item] = const_obj[item];
+            }
+          }
+        } catch {}
+      }
+    };
+
+    return {
+      show_dialog,
+      loading,
+      is_add,
+      show_name,
+      show_type,
+      types,
+      connect_type,
+      host,
+
+      onTypeSelectChanged,
+      async showDialog(data: JointActionEquipmentTableEntity | null) {
+        show_dialog.value = true;
+        is_add.value = !data;
+        equipment = new JointActionEquipmentTableEntity();
+
+        show_type.value = types[kDefaultTypeIndex].key;
+        if (data) {
+          copy_propertys(data, equipment);
+          show_name.value = data.name;
+
+          {
+            const temp = types.find(
+              (element) =>
+                element &&
+                element.value &&
+                element.value.protocol == data.protocol &&
+                element.value.protocol_version == data.protocol_version
+            );
+            if (temp) {
+              show_type.value = temp.key;
+            }
+          }
+
+          host.value = data.address;
+        }
+        onTypeSelectChanged(show_type.value);
+      },
+
+      resetData() {
+        show_name.value = $t.t("new name");
+        show_type.value = types[kDefaultTypeIndex].key;
+        EventBus.getInstance().emit(
+          EventNamesDefine.RefreshJointActionEquipmentList
+        );
+
+        loading.value = false;
+      },
+      async onSubmit() {
+        loading.value = true;
+        let success = false;
+        try {
+          let request_data = null;
+          if (is_add.value) {
+            request_data = new JointActionEquipmentTableEntity();
+            request_data.uuid = uid().replace(/-/g, "");
+          } else {
+            request_data = equipment;
+          }
+          if (request_data) {
+            request_data.name = show_name.value;
+            request_data.address = host.value;
+            const temp = types.find(
+              (element) => element && element.key == show_type.value
+            );
+            if (temp && temp.value) {
+              request_data.protocol = temp.value.protocol;
+              request_data.protocol_version = temp.value.protocol_version;
+            }
+            const response = await GlobalData.getInstance()
+              .getCurrentClient()
+              ?.setJointActionEquipment(request_data);
+            success = !!(response && response.success);
+          }
+        } catch {}
+        $q.notify({
+          color: success ? "positive" : "negative",
+          icon: success ? "done" : "warning",
+          message:
+            (is_add.value ? $t.t("add") : $t.t("edit")) +
+            $t.t(" ") +
+            $t.t(" equipment data") +
+            (success ? $t.t("success") : $t.t("fail")) +
+            "!",
+          position: "top",
+          timeout: 1500,
+        });
+        loading.value = false;
+        if (success) {
+          show_dialog.value = false;
+        }
+      },
+      isIpAddress(str: string) {
+        return (
+          str == "localhost" ||
+          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+            str
+          ) ||
+          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(
+            str
+          )
+        );
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/ListJointActionEquipmentDialog.vue b/src/components/ListJointActionEquipmentDialog.vue
new file mode 100644
index 0000000..107b8f6
--- /dev/null
+++ b/src/components/ListJointActionEquipmentDialog.vue
@@ -0,0 +1,205 @@
+<template>
+  <q-dialog
+    persistent
+    v-model="show_dialog"
+    @before-hide="resetData"
+    @keydown="
+      (evt) => {
+        if (!loading && evt.keyCode == 27) {
+          show_dialog = false;
+        }
+      }
+    "
+  >
+    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 45vw">
+      <q-form>
+        <q-card-section class="q-ma-none q-pa-sm">
+          <div class="row">
+            <div class="col-auto text-h6">
+              {{ $t("joint action equipment") }}{{ $t("list") }}
+            </div>
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loading"
+                flat
+                round
+                icon="close"
+                color="red"
+                v-close-popup
+              >
+                <q-tooltip>
+                  {{ $t("close") }}
+                </q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-section style="height: 50vh; width: 45vw" class="scroll">
+          <q-scroll-area style="height: 46vh">
+            <q-list class="fit">
+              <q-item
+                clickable
+                v-for="(item, index) of equipments"
+                :key="index"
+              >
+                <q-item-section>
+                  <q-item-label>{{ item.name }}</q-item-label>
+                  <q-item-label caption>{{ item.address }}</q-item-label>
+                </q-item-section>
+
+                <q-space />
+                <q-item-section avatar>
+                  <q-btn
+                    round
+                    @click="editEquipment(item)"
+                    flat
+                    icon="edit"
+                    color="blue"
+                  >
+                    <q-tooltip>
+                      {{ $t("edit") }}
+                    </q-tooltip>
+                  </q-btn>
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-btn
+                    @click="deleteEquipment(item)"
+                    round
+                    flat
+                    icon="delete"
+                    color="red"
+                  >
+                    <q-tooltip>
+                      {{ $t("delete") }}
+                    </q-tooltip>
+                  </q-btn>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-scroll-area>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('Close')"
+            no-caps
+            color="primary"
+            v-close-popup
+          />
+          <q-btn
+            :loading="loading"
+            flat
+            :label="$t('add') + $t('equipment')"
+            no-caps
+            color="primary"
+            @click="$refs.edit_joint_action_equipment_dialog.showDialog()"
+          />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <edit-joint-action-equipment-dialog
+    ref="edit_joint_action_equipment_dialog"
+  />
+</template>
+
+<style scoped>
+.disable_tree {
+  background: #9e9e9e;
+  cursor: wait;
+  pointer-events: none;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed, Ref, nextTick } from "vue";
+import { useStore } from "src/store";
+import GlobalData from "src/common/GlobalData";
+import { useQuasar } from "quasar";
+import { useI18n } from "vue-i18n";
+import EditJointActionEquipmentDialog from "src/components/EditJointActionEquipmentDialog.vue";
+import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+
+export default defineComponent({
+  name: "ComponentListJointActionEquipmentDialog",
+  components: { EditJointActionEquipmentDialog },
+
+  setup() {
+    let $store = useStore();
+    let $q = useQuasar();
+    let $t = useI18n();
+
+    const edit_joint_action_equipment_dialog: Ref<any> = ref(null);
+
+    let show_dialog = ref(false);
+    const loading = ref(false);
+    const equipments: Ref<Array<JointActionEquipmentTableEntity>> = ref([]);
+
+    const refresh_joint_action_equipment_list = () => {
+      GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getJointActionEquipments()
+        .then(async (response) => {
+          if (response) {
+            await nextTick(() => {});
+            equipments.value = response.entities;
+          }
+        });
+    };
+
+    EventBus.getInstance().on(
+      EventNamesDefine.RefreshJointActionEquipmentList,
+      () => {
+        refresh_joint_action_equipment_list();
+      }
+    );
+
+    return {
+      show_dialog,
+      loading,
+      equipments,
+
+      edit_joint_action_equipment_dialog,
+
+      showDialog() {
+        refresh_joint_action_equipment_list();
+        show_dialog.value = true;
+      },
+      resetData() {},
+      deleteEquipment(
+        entity: JointActionEquipmentTableEntity | undefined | null
+      ) {
+        if (entity) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.deleteJointActionEquipment(entity.uuid)
+            .then((response) => {
+              if (response && response.success) {
+                EventBus.getInstance().emit(
+                  EventNamesDefine.RefreshJointActionEquipmentList
+                );
+              }
+            });
+        }
+      },
+      editEquipment(
+        entity: JointActionEquipmentTableEntity | undefined | null
+      ) {
+        if (entity) {
+          if (edit_joint_action_equipment_dialog.value) {
+            edit_joint_action_equipment_dialog.value.showDialog(entity);
+          }
+        }
+      },
+    };
+  },
+});
+</script>
diff --git a/src/components/ModeDialog.vue b/src/components/ModeDialog.vue
index 818843f..f5dcbae 100644
--- a/src/components/ModeDialog.vue
+++ b/src/components/ModeDialog.vue
@@ -147,6 +147,63 @@
                 </q-input>
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-card class="full-width" style="height: 25vh">
+                <q-card-section
+                  ><span>{{ $t("joint action equipment") }}</span>
+                  <q-btn
+                    style="float: right; top: -10px"
+                    round
+                    flat
+                    icon="add"
+                    color="green"
+                    @click="addEquipment"
+                  >
+                    <q-tooltip>{{ $t("add") }}</q-tooltip>
+                  </q-btn>
+                </q-card-section>
+                <q-separator />
+                <q-scroll-area style="height: 19vh" class="full-width scroll">
+                  <q-list class="fit">
+                    <q-item v-for="(item, index) of equipments" :key="index">
+                      <q-item-section avatar class="q-mr-md">
+                        {{ $t("equipment") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        <q-select
+                          :options="equipment_options"
+                          emit-value
+                          map-options
+                          v-model="item.key"
+                          option-value="key"
+                          option-label="value"
+                          lazy-rules
+                        />
+                        <!-- {{ getEquipmentName(item.key) }} -->
+                      </q-item-section>
+                      <q-item-section avatar class="q-mr-md">
+                        {{ $t("mode") }}:
+                      </q-item-section>
+                      <q-item-section>
+                        <q-input v-model="item.value"></q-input>
+                      </q-item-section>
+                      <q-space />
+                      <q-item-section avatar>
+                        <q-btn
+                          @click="deleteEquipment(index)"
+                          round
+                          flat
+                          icon="delete"
+                          color="red"
+                        >
+                          <q-tooltip>{{ $t("delete") }}</q-tooltip>
+                        </q-btn>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-scroll-area>
+              </q-card>
+            </q-item>
           </q-list>
         </q-card-section>
 
@@ -174,6 +231,9 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <list-joint-action-equipment-dialog
+    ref="list_joint_action_equipment_dialog"
+  />
 </template>
 
 <style scoped>
@@ -185,17 +245,23 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, ref, watch, computed } from "vue";
+import { defineComponent, ref, watch, computed, Ref } from "vue";
 import { useStore } from "src/store";
 import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { api } from "boot/axios";
 import { HttpProtocol } from "src/entities/HttpProtocol";
+import { StringKeyValueEntity } from "src/entities/StringKeyValueEntity";
+import ListJointActionEquipmentDialog from "src/components/ListJointActionEquipmentDialog.vue";
+import JointActionEquipmentTableEntity from "src/entities/JointActionEquipmentTableEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
 export default defineComponent({
   name: "ComponentModeDialog",
 
+  components: { ListJointActionEquipmentDialog },
+
   setup() {
     let $store = useStore();
     let $q = useQuasar();
@@ -210,6 +276,11 @@ export default defineComponent({
     const selected: any = ref(null);
     let loading = ref(false);
 
+    const equipments: Ref<StringKeyValueEntity[]> = ref([]);
+    const list_joint_action_equipment_dialog: Ref<any> = ref(null);
+
+    const equipment_options: Ref<StringKeyValueEntity[]> = ref([]);
+
     const tree_nodes = computed({
       get: () => $store.state.mode_tree,
       set: (val) => {},
@@ -227,7 +298,12 @@ export default defineComponent({
     const requestAddMode = async () => {
       let response = await GlobalData.getInstance()
         .getCurrentClient()
-        ?.addMode(selected.value, name.value ?? "", index.value);
+        ?.addMode(
+          selected.value,
+          name.value ?? "",
+          index.value,
+          equipments.value
+        );
       if (response) {
         $q.notify({
           color: response.success ? "positive" : "negative",
@@ -245,7 +321,13 @@ export default defineComponent({
     const requestEditMode = async () => {
       let response = await GlobalData.getInstance()
         .getCurrentClient()
-        ?.editMode(uuid.value, name.value ?? "", index.value, selected.value);
+        ?.editMode(
+          uuid.value,
+          name.value ?? "",
+          index.value,
+          selected.value,
+          equipments.value
+        );
       if (response) {
         $q.notify({
           color: response.success ? "positive" : "negative",
@@ -260,6 +342,32 @@ export default defineComponent({
       }
     };
 
+    const updateEquipmentOptions = () => {
+      GlobalData.getInstance()
+        .getCurrentClient()
+        ?.getJointActionEquipments()
+        .then((response) => {
+          if (response && Array.isArray(response.entities)) {
+            equipment_options.value = [];
+            for (const item of response.entities) {
+              if (item) {
+                equipment_options.value.push({
+                  key: item.uuid,
+                  value: item.name,
+                });
+              }
+            }
+          }
+        });
+    };
+
+    EventBus.getInstance().on(
+      EventNamesDefine.RefreshJointActionEquipmentList,
+      () => {
+        updateEquipmentOptions();
+      }
+    );
+
     return {
       show_dialog,
       type,
@@ -269,6 +377,11 @@ export default defineComponent({
       selected,
       loading,
       tree_nodes,
+      equipments,
+      equipment_options,
+
+      list_joint_action_equipment_dialog,
+
       showDialog(options: any) {
         if (options) {
           type.value = options.type ?? 1;
@@ -278,17 +391,54 @@ export default defineComponent({
             uuid.value = options.data?.item_data?.uuid ?? null;
             index.value = options.data?.item_data?.number ?? 0;
             backup_index = index.value;
+            equipments.value =
+              options.data?.item_data?.joint_action_equipments ?? [];
           } else {
             selected.value = options.data?.uuid ?? null;
             uuid.value = options.data?.uuid ?? null;
             index.value = 0;
           }
+
+          updateEquipmentOptions();
+          equipments.value = [];
+          {
+            let obj = null;
+            if (
+              typeof options.data?.item_data?.joint_action_equipments ==
+              "string"
+            ) {
+              try {
+                obj = JSON.parse(
+                  options.data?.item_data?.joint_action_equipments
+                );
+              } catch (e) {
+                console.error(e);
+              }
+            }
+            if (Array.isArray(obj)) {
+              for (const item of obj) {
+                if (item && typeof item != "undefined") {
+                  const temp_item = item as StringKeyValueEntity;
+                  if (temp_item) {
+                    const f = equipment_options.value.find(
+                      (element) => element && element.key == temp_item.key
+                    );
+                    if (f) {
+                      equipments.value.push(temp_item);
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
         show_dialog.value = true;
       },
       resetData() {
         loading.value = false;
-        (selected.value = null), (name.value = null);
+        equipments.value = [];
+        selected.value = null;
+        name.value = null;
         type.value = 1;
         backup_index = 0;
       },
@@ -337,6 +487,44 @@ export default defineComponent({
         } catch {}
         loading.value = false;
       },
+      async addEquipment() {
+        const response = await GlobalData.getInstance()
+          .getCurrentClient()
+          ?.getJointActionEquipments();
+        if (response && Array.isArray(response.entities)) {
+          if (response.entities.length) {
+            const v = new StringKeyValueEntity();
+            v.key = response.entities[0].uuid;
+            v.value = "mode name";
+            equipments.value.push(v);
+          } else {
+            $q.notify({
+              color: "warning",
+              icon: "warning",
+              message: $t.t(
+                "joint action equipment is empty! please add equipment first!"
+              ),
+              position: "top",
+              timeout: 1500,
+            });
+
+            if (list_joint_action_equipment_dialog.value) {
+              list_joint_action_equipment_dialog.value.showDialog();
+            }
+          }
+        } else {
+          $q.notify({
+            color: "negative",
+            icon: "warning",
+            message: "data error!",
+            position: "top",
+            timeout: 1500,
+          });
+        }
+      },
+      deleteEquipment(index: number) {
+        equipments.value.splice(index, 1);
+      },
     };
   },
 });
diff --git a/src/entities/JointActionEquipmentTableEntity.ts b/src/entities/JointActionEquipmentTableEntity.ts
new file mode 100644
index 0000000..1e652a0
--- /dev/null
+++ b/src/entities/JointActionEquipmentTableEntity.ts
@@ -0,0 +1,14 @@
+import BaseEntity from "./BaseEntity";
+
+export default class JointActionEquipmentTableEntity extends BaseEntity {
+  name = "";
+  protocol = "";
+  protocol_version = "";
+  address = "";
+  user_name = "";
+  password = "";
+  address_ext_data = "";
+  connect_ext_data = "";
+  ext_data = "";
+  note = "";
+}
diff --git a/src/entities/ModeEntity.ts b/src/entities/ModeEntity.ts
index 49eb1ee..8ccace8 100644
--- a/src/entities/ModeEntity.ts
+++ b/src/entities/ModeEntity.ts
@@ -1,10 +1,13 @@
+import { StringKeyValueEntity } from "./StringKeyValueEntity";
 import BaseEntity from "./BaseEntity";
 
 export class ModeEntity extends BaseEntity {
   group_uuid: string = "";
   name: string = "";
   number: number = 0;
-
+  grid_row = 2;
+  grid_col = 2;
+  joint_action_equipments: StringKeyValueEntity[] = [];
   public static copy(dest: ModeEntity, src?: ModeEntity) {
     if (!src) {
       src = new ModeEntity();
diff --git a/src/entities/WSProtocol.ts b/src/entities/WSProtocol.ts
index 0e99f7b..30b7792 100644
--- a/src/entities/WSProtocol.ts
+++ b/src/entities/WSProtocol.ts
@@ -11,6 +11,7 @@ import { ExternalControlTableEntity } from "./ExternalControlTableEntity";
 import { SerialPortConfigEntity } from "./SerialPortConfigEntity";
 import { ConnectTableEntity } from "./ConnectTableEntity";
 import TimingTaskEntity from "./TimingTaskEntity";
+import JointActionEquipmentTableEntity from "./JointActionEquipmentTableEntity";
 
 export namespace Protocol {
   export class Commands {
@@ -444,6 +445,17 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "SetLanguage";
     }
 
+    public static get kRpcGetJointActionEquipment() {
+      return Commands.PROTOCOL_PREFIX + "RpcGetJointActionEquipment";
+    }
+
+    public static get kRpcSetJointActionEquipment() {
+      return Commands.PROTOCOL_PREFIX + "RpcSetJointActionEquipment";
+    }
+    public static get kRpcDeleteJointActionEquipment() {
+      return Commands.PROTOCOL_PREFIX + "RpcDeleteJointActionEquipment";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -553,6 +565,9 @@ export namespace Protocol {
       Commands.kRpcSetHdmiInDecodeType,
       Commands.kRpcGetCityList,
       Commands.kRpcGetPowerState,
+      Commands.kRpcGetJointActionEquipment,
+      Commands.kRpcSetJointActionEquipment,
+      Commands.kRpcDeleteJointActionEquipment,
     ]);
     public static get AllCommands() {
       return this._all_commands;
@@ -1151,11 +1166,13 @@ export namespace Protocol {
     name: string;
     group_uuid: string;
     number: number;
+    joint_action_equipments: StringKeyValueEntity[] = [];
     constructor(
       rcp_id?: number,
       name?: string,
       group_uuid?: string,
-      number?: number
+      number?: number,
+      joint_action_equipments?: StringKeyValueEntity[]
     ) {
       super();
       this.rpc_id = rcp_id ?? 0;
@@ -1163,6 +1180,9 @@ export namespace Protocol {
       this.name = name ?? "";
       this.group_uuid = group_uuid ?? "";
       this.number = number ?? 0;
+      if (Array.isArray(joint_action_equipments)) {
+        this.joint_action_equipments = joint_action_equipments;
+      }
     }
   }
 
@@ -1180,13 +1200,15 @@ export namespace Protocol {
     uuid: string;
     number: number;
     group_uuid: string;
+    joint_action_equipments: StringKeyValueEntity[] = [];
 
     constructor(
       rcp_id?: number,
       name?: string,
       uuid?: string,
       number?: number,
-      group_uuid?: string
+      group_uuid?: string,
+      joint_action_equipments?: StringKeyValueEntity[]
     ) {
       super();
       this.rpc_id = rcp_id ?? 0;
@@ -1195,6 +1217,9 @@ export namespace Protocol {
       this.uuid = uuid ?? "";
       this.number = number ?? 0;
       this.group_uuid = group_uuid ?? "";
+      if (Array.isArray(joint_action_equipments)) {
+        this.joint_action_equipments = joint_action_equipments;
+      }
     }
   }
 
@@ -2850,4 +2875,65 @@ export namespace Protocol {
     }
     language = "zh-CN";
   }
+
+  export class GetJointActionEquipmentRequestEntity extends PacketEntity {
+    constructor(rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcGetJointActionEquipment;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+    }
+    timestamp = Date.now();
+  }
+
+  export class GetJointActionEquipmentResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    entities: Array<JointActionEquipmentTableEntity> = [];
+  }
+
+  export class SetJointActionEquipmentRequestEntity extends PacketEntity {
+    constructor(entity: JointActionEquipmentTableEntity, rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcSetJointActionEquipment;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+      if (entity) {
+        this.entity = entity;
+      }
+    }
+    entity = new JointActionEquipmentTableEntity();
+  }
+
+  export class SetJointActionEquipmentResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    success = false;
+  }
+
+  export class DeleteJointActionEquipmentRequestEntity extends PacketEntity {
+    constructor(uuid: string, rpc_id = 0) {
+      super();
+      super.command = Commands.kRpcDeleteJointActionEquipment;
+      super.flag = PacketEntity.FLAG_REQUEST;
+      super.rpc_id = rpc_id;
+      this.uuid = uuid;
+    }
+    uuid = "";
+  }
+
+  export class DeleteJointActionEquipmentResponseEntity extends PacketEntity {
+    constructor() {
+      super();
+      super.flag = PacketEntity.FLAG_RESPONSE;
+    }
+
+    success = false;
+  }
 }
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index b0020ea..ad7cfab 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -335,4 +335,14 @@ export default {
   "delete group should be delete all child! do you want to delete this group?":
     "Delete Group Should Be Delete All Child! Do You Want To Delete This Group?",
   "do you want to delete the item": "Do You Want To Delete The Item",
+  "joint action equipment": "Joint Action Equipment",
+  equipment: "Equipment",
+  list: "List",
+  Close: "Close",
+  type: "Type",
+  host: "Host",
+  "new name": "New Name",
+  "type can not be unknow": "Type Can Not Be UnKnow",
+  "joint action equipment is empty! please add equipment first!":
+    "Joint Action Equipment Is Empty! Please Add Equipment First!",
 };
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 02aaad1..5f6a2b3 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -612,4 +612,14 @@ export default {
   "delete group should be delete all child! do you want to delete this group?":
     "删除组会删除组里面所有的子项目! 确定要删除该组吗?",
   "do you want to delete the item": "确定删除该项目吗",
+  "joint action equipment": "联动设备",
+  equipment: "设备",
+  list: "列表",
+  type: "类型",
+  host: "地址",
+  Close: "关闭",
+  "new name": "New Name",
+  "type can not be unknow": "类型不能为未知",
+  "joint action equipment is empty! please add equipment first!":
+    "当前没有联动设备! 请先添加设备!",
 };
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 2bcd9f2..665ce86 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -293,6 +293,19 @@
               {{ $t("database export") }}
             </q-item-section>
           </q-item>
+          <q-item
+            clickable
+            v-close-popup
+            @click="$refs.list_joint_action_equipment_dialog.showDialog()"
+          >
+            <q-item-section avatar>
+              <q-icon name="devices_other" color="cyan-12" />
+              <!-- <q-icon name="img:new_icon/upgrade.png" /> -->
+            </q-item-section>
+            <q-item-section>
+              {{ $t("joint action equipment") }}
+            </q-item-section>
+          </q-item>
           <q-item
             clickable
             v-close-popup
@@ -394,6 +407,9 @@
   <center-control-dialog ref="center_control_dialog" />
   <advanced-debug-dialog ref="advanced_debug_dialog" />
   <window-rect-edit-dialog ref="window_rect_edit_dialog" />
+  <list-joint-action-equipment-dialog
+    ref="list_joint_action_equipment_dialog"
+  />
 </template>
 
 <style scoped>
@@ -430,6 +446,7 @@ import RegisterDialog from "src/components/RegisterDialog.vue";
 import CenterControlDialog from "src/components/CenterControlDialog.vue";
 import AdvancedDebugDialog from "src/components/AdvancedDebugDialog.vue";
 import WindowRectEditDialog from "src/components/WindowRectEditDialog.vue";
+import ListJointActionEquipmentDialog from "src/components/ListJointActionEquipmentDialog.vue";
 
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { Protocol } from "src/entities/WSProtocol";
@@ -459,6 +476,7 @@ export default defineComponent({
     CenterControlDialog,
     AdvancedDebugDialog,
     WindowRectEditDialog,
+    ListJointActionEquipmentDialog,
   },
 
   setup() {