From 23d41237edb507e60c0ecb12e656949267619631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Wed, 30 Jul 2025 17:36:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=BB=B4=E5=BA=A6-=E6=B0=B4?=
 =?UTF-8?q?=E8=A1=A8=E8=AE=BE=E5=A4=87=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iotsync/components/OrgApplyInfo.api.ts    |  12 +
 src/views/iotsync/components/OrgSelect.vue    | 417 +++++++++++++
 .../tq/water/components/BusinessTable.vue     | 210 +++++++
 .../tq/water/components/SelectNuList.vue      | 126 ++++
 .../tq/water/components/SelectNuModal.vue     |  70 +++
 .../tq/water/components/SelectedTable.vue     | 143 +++++
 .../tq/water/components/SourceTable.vue       | 204 +++++++
 .../tq/water/components/SyncLogList.vue       | 125 ++++
 src/views/iotsync/tq/water/index.vue          | 549 ++++++++++++++++++
 src/views/iotsync/tq/water/water.api.ts       |  49 ++
 src/views/iotsync/tq/water/water.data.ts      | 261 +++++++++
 11 files changed, 2166 insertions(+)
 create mode 100644 src/views/iotsync/components/OrgApplyInfo.api.ts
 create mode 100644 src/views/iotsync/components/OrgSelect.vue
 create mode 100644 src/views/iotsync/tq/water/components/BusinessTable.vue
 create mode 100644 src/views/iotsync/tq/water/components/SelectNuList.vue
 create mode 100644 src/views/iotsync/tq/water/components/SelectNuModal.vue
 create mode 100644 src/views/iotsync/tq/water/components/SelectedTable.vue
 create mode 100644 src/views/iotsync/tq/water/components/SourceTable.vue
 create mode 100644 src/views/iotsync/tq/water/components/SyncLogList.vue
 create mode 100644 src/views/iotsync/tq/water/index.vue
 create mode 100644 src/views/iotsync/tq/water/water.api.ts
 create mode 100644 src/views/iotsync/tq/water/water.data.ts

diff --git a/src/views/iotsync/components/OrgApplyInfo.api.ts b/src/views/iotsync/components/OrgApplyInfo.api.ts
new file mode 100644
index 0000000..d1ab3b1
--- /dev/null
+++ b/src/views/iotsync/components/OrgApplyInfo.api.ts
@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getOrgInfo = '/admin/orgapplyinfo/orgApplyInfo/getOrgInfo',
+}
+
+/**
+ * 获取机构详细信息（包含sys_depart信息）
+ * @param params orgCode部门编码 不传查所有
+ * @returns
+ */
+export const getOrgInfo = (params) => defHttp.get({ url: Api.getOrgInfo, params });
diff --git a/src/views/iotsync/components/OrgSelect.vue b/src/views/iotsync/components/OrgSelect.vue
new file mode 100644
index 0000000..717b974
--- /dev/null
+++ b/src/views/iotsync/components/OrgSelect.vue
@@ -0,0 +1,417 @@
+<template>
+  <div class="p-2 base-class">
+    <a-card class="base-con-class">
+      <div class="org-info-card">
+        <div class="org-info-header">
+          <div class="org-title">
+            <span class="base-info-label">机构信息:</span>
+            <span v-if="!orgData" class="base-info-dn" style="color: #ff4d4f;"> 请先选择机构</span>
+            <span v-else class="org-name">{{ orgData?.departName }}</span>
+          </div>
+          <a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset">
+            <span>重新选择</span>
+          </a-button>
+        </div>
+        <div class="org-info-content">
+          <div class="info-row">
+            <div class="info-item">
+              <span class="label">机构编码：</span>
+              <span class="value">{{ orgData?.orgCode || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">加盟时间：</span>
+              <span class="value">{{ orgData?.franchiseTime?.substring(0, 10) || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">负责人：</span>
+              <span class="value">{{ orgData?.orgLeader || '-' }}</span>
+            </div>
+          </div>
+          <div class="info-row">
+            <div class="info-item">
+              <span class="label">电话：</span>
+              <span class="value">{{ orgData?.orgLeaderPhone || '-' }}</span>
+            </div>
+            <div class="info-item">
+              <span class="label">地址：</span>
+              <span class="value">{{ orgData?.comRegisterAddress || '-' }}</span>
+            </div>
+            <div class="info-item">
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </div>
+  <div class="p-2 con-class" style="margin-top: -10px;" v-show="orgSelectedCon">
+    <a-card :bordered="false" class="org-container">
+      <a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
+        <a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24"
+               :md="props.layout == 'full' ? 12 : 8"
+               :lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8"
+               :xxl="props.layout == 'full' ? 6 : 8"
+               style="padding: 8px;min-height: 290px;">
+          <div class="org-card" :class="{ 'active': item.orgId == orgData?.orgId }" @click="handleOrgSelected(item)">
+            <a-card
+              :class="{ 'selected-card': selectedOrgs.some(org => org.orgCode === item.orgCode) }"
+              style="width: 100%; border-radius: 8px; border:0px; "
+              :headStyle="{ height: '60px', padding: '0 24px' }"
+              :style="{ cursor: showChoose ? 'pointer' : 'default' }"
+              :bodyStyle="{ padding: '24px 24px 4px 24px !important' }">
+              <template #title>
+                <a-row style="font-weight: normal;">
+                  <a-col :span="props.layout == 'full' ? 22 : 21" style="font-size: 14px; padding-top: 4px;">
+                    <div>
+                      <span style="font-weight: bold;">{{ item.departName }}</span>
+                      <!-- 如果是已选择，显示"已选择" -->
+                      <span style="color: green; font-size: 12px; margin-left: 8px;" v-if="selectedOrgs.some(org => org.orgCode === item.orgCode)">已选择</span>
+                    </div>
+                  </a-col>
+                  <a-col :span="props.layout == 'full' ? 2 : 3" style="text-align: center; padding-top: 4px;">
+                    <div class="zxClass">{{ item.orgCode }}</div>
+                  </a-col>
+                </a-row>
+              </template>
+              <p>加盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
+              <p>机构负责人：{{ item.orgLeader }}</p>
+              <p>负责人电话：{{ item.orgLeaderPhone }}</p>
+              <p :title="item.comRegisterAddress">
+                机构地址：{{ item.comRegisterAddress }}</p>
+            </a-card>
+          </div>
+        </a-col>
+        <a-col v-if="orgTableList.length == 0">
+          <div style="margin: 30px auto;">
+            <a-empty/>
+          </div>
+        </a-col>
+      </a-row>
+      <div
+        style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
+        v-show="props.layout == 'full'">
+        <span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
+        <Pagination showLessItems v-model:current="pageParams.pageNo"
+                    :pageSize="pageParams.pageSize" size="small"
+                    show-quick-jumper :total="orgTableList.total" @change="reload"/>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" name="synchronization-directive" setup>
+import {ref, reactive, onMounted} from 'vue';
+import {Empty} from 'ant-design-vue';
+import {Modal} from 'ant-design-vue';
+import { Pagination } from 'ant-design-vue'
+import {getOrgInfo} from './OrgApplyInfo.api'
+
+const emit = defineEmits(['orgChanged']);
+
+const props = defineProps({
+  showChoose: {type: Boolean, default: false},
+  layout: {type: String, default: 'full'},  // 控制布局: 'full' 或 'half'
+})
+const orgTableList = ref<any>({records: [], total: 0})
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+
+
+interface OrganizationData {
+  orgId?: string;
+  departName: string;
+  orgCode: string;
+  franchiseTime?: string;
+  orgLeader?: string;
+  orgLeaderPhone?: string;
+  comRegisterAddress?: string;
+}
+
+const queryParam = reactive<any>({})
+const pageParams = ref({pageNo: 1, pageSize: 8})
+const orgData = ref<OrganizationData | null>(null);
+const orgSelectedCon = ref(true);
+
+// 当前选中的卡片 ID 数组
+const selectedOrgs = ref<string[]>([])
+
+const handleOrgSelected = async (org) => {
+  if (!!orgData.value && orgData.value.orgId != org.orgId) {
+    Modal.confirm({
+      title: '变更机构提醒',
+      content: '是否变更机构！',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        await loadOrgData(org);
+      },
+    });
+  } else {
+    await loadOrgData(org);
+  }
+};
+
+const loadOrgData = async (org) => {
+  // 更新机构数据
+  orgData.value = org;
+  emit('orgChanged', org)
+};
+
+const orgReset = () => {
+  orgSelectedCon.value = true;
+  emit('orgReset');
+}
+
+const resetOrgSelectedCon = (v_) => {
+  orgSelectedCon.value = v_
+}
+
+/** 数据加载 */
+function reload() {
+  queryParam.pageSize = pageParams.value.pageSize
+  queryParam.pageNo = pageParams.value.pageNo
+  if (props.layout == 'half') {
+    queryParam.pageSize = -1
+  }
+  getOrgInfo(queryParam).then(res => {
+    orgTableList.value = res
+  })
+}
+
+onMounted(() => {
+  reload()
+});
+
+defineExpose({
+  orgData,
+  resetOrgSelectedCon,
+});
+</script>
+
+<style lang="less" scoped>
+
+:deep(.ant-card-bordered) {
+  border-radius: 8px !important;
+}
+
+.base-class {
+  :deep(.ant-card .ant-card-body) {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+  }
+}
+
+.con-class {
+  :deep(.ant-card-body) {
+    padding: 0px !important;
+  }
+}
+
+.base-con-class {
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.org-info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 5px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #f0f0f0;
+  height: 38px;
+}
+
+.org-title {
+  display: flex;
+  align-items: center;
+
+  .base-info-label {
+    font-weight: 600;
+    color: #595959;
+    font-size: 15px;
+  }
+
+  .org-name {
+    margin-left: 10px;
+    font-weight: 600;
+    color: #262626;
+    font-size: 16px;
+  }
+}
+
+.reset-btn {
+  background-color: #1890ff;
+  border-color: #1890ff;
+  height: 32px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+
+
+/* 新增的机构卡片样式 */
+.org-cards-container {
+  max-height: 75vh;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.org-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+    background: radial-gradient(circle at center, #c7e6ff 0%, #d4eeff 70%, #e4f0ff 100%);
+  }
+
+  :deep(.ant-card-head) {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 0 16px;
+    min-height: 48px;
+
+    .ant-card-head-title {
+      padding: 12px 0;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+
+.org-container {
+  //background: transparent;
+  background: white;
+
+  .org-card {
+    padding: 0px;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    transition: all 0.3s;
+    background: white;
+
+    &:hover {
+      border-color: #1890ff;
+      box-shadow: 0 2px 12px rgba(24, 144, 255, 0.2);
+    }
+
+    &.active {
+      border: 1px solid #1890ff;
+      //background: #f0f8ff;
+    }
+
+    .org-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+
+      .org-title {
+        margin: 0 0 0 8px;
+        font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .contact-line {
+      display: flex;
+      justify-content: space-between;
+
+      >span {
+        display: inline-flex;
+        align-items: center;
+
+        .anticon {
+          margin-right: 4px;
+          color: #8c8c8c;
+        }
+      }
+    }
+
+    :deep(.ant-descriptions) {
+      .ant-descriptions-item-label {
+        width: 80px;
+        color: #666;
+      }
+    }
+  }
+}
+
+.org-info-content {
+  .info-row {
+    display: flex;
+    margin-bottom: 5px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .info-item {
+    flex: 1;
+    padding: 0 8px;
+
+    .label {
+      color: #8c8c8c;
+      font-size: 13px;
+      margin-right: 8px;
+    }
+
+    .value {
+      color: #262626;
+      font-size: 13px;
+      word-break: break-all;
+    }
+  }
+}
+
+.zxClass {
+  font-size: 12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 25px;
+  color: white;
+  line-height: 25px;
+}
+
+.tbClass {
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+
+.antTitle {
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+.ellipsis-one-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selected-card {
+  border: 2px solid #1890ff;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
+}
+
+
+
+
+
+</style>
diff --git a/src/views/iotsync/tq/water/components/BusinessTable.vue b/src/views/iotsync/tq/water/components/BusinessTable.vue
new file mode 100644
index 0000000..ff5f312
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/BusinessTable.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="p-2">
+    <BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" :rowSelection="rowSelection" :rowClassName="getRowClassName"  @selection-change="handleSelectionChange" size="small">
+      <template #tableTitle></template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="tq-water-businessTable" setup>
+import { ref, reactive, watch,computed } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { businessColumns } from '../water.data';
+import { businessListApi } from '../water.api';
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  },
+});
+
+const emit = defineEmits(['select-change']);
+const queryParam = reactive<any>({});
+const tableRef = ref();
+const selectedRowIds = ref<Set<string | number>>(new Set());
+const allSelectedRows = ref<any[]>([]);
+
+// 行类名函数
+const getRowClassName = (record) => {
+  return selectedRowIds.value.has(record.address) ? 'selected-row' : '';
+};
+
+watch(() => props.queryParams, (newParams) => {
+  reload();
+}, { deep: true });
+
+// 注册表格
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '已同步设备表',
+    api: businessListApi,
+    columns:businessColumns,
+    size: 'small',
+    showTableSetting: false,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    rowSelection: {type:'checkbox'},
+    rowKey: 'id',
+    actionColumn: {
+      width: 120,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      Object.assign(params, props.queryParams);
+      params.selectedRowIds = Array.from(selectedRowIds.value)
+      return params;
+    },
+  },
+});
+
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
+
+function getTableAction(record) {
+  const actions = [];
+  if (selectedRowIds.value.has(record.address)) {
+    actions.push({
+      label: '取消',
+      color: 'error',
+      onClick: () => {
+        removeSelected(record);
+      }
+    });
+  } else {
+    actions.push({
+      label: '重新选择',
+      onClick: () => {
+        toggleSelect(record);
+      }
+    });
+    actions.push({
+      label: '移除',
+      onClick: () => {
+        deleteSelect(record);
+      }
+    });
+  }
+  return actions;
+}
+
+function handleSelectionChange(selectedRowSet) {
+  // console.log('当前选中数据:', selectedRowSet);
+  allSelectedRows.value = selectedRowSet.rows;
+  selectedRowKeys.value = selectedRowSet.keys;
+}
+
+// 取消所有选中项
+function clearSelected(){
+  // console.log('取消选择数据');
+  selectedRowKeys.value = [];
+  allSelectedRows.value = [];
+}
+
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+// 切换选择状态
+const toggleSelect = (record) => {
+  if (!selectedRowIds.value.has(record.address)) {
+    selectedRowIds.value.add(record.address);
+  }
+  allSelectedRows.value = [];
+  allSelectedRows.value.push(record);
+  emit('editSelect');
+};
+
+// 切换选择状态
+const deleteSelect = (record) => {
+  if (!selectedRowIds.value.has(record.address)) {
+    selectedRowIds.value.add(record.address);
+  }
+  allSelectedRows.value = [];
+  allSelectedRows.value.push(record);
+  emit('deleteSelect');
+};
+
+// 移除选中项
+const removeSelected = (record) => {
+  selectedRowIds.value.delete(record.address);
+  emit('removeSelect',record);
+};
+
+const updateSelection = (selectedRecords) => {
+  selectedRowIds.value.clear();
+  selectedRecords.forEach((value, key) => {
+    selectedRowIds.value.add(key);
+  });
+  // 更新表格的选中状态
+  if (registerTable) {
+    registerTable.toggleRowSelection?.(Array.from(selectedRowIds.value), true);
+  }
+};
+
+// 暴露给父组件的方法
+defineExpose({
+  updateSelection,
+  clearSelected,
+  reload,
+  allSelectedRows,
+});
+
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+//:deep(.ant-table-title) {
+//  display: none !important;
+//}
+
+:deep(.selected-row) {
+  background-color: #e6f7ff !important;
+
+  &:hover td {
+    background-color: #e6f7ff !important;
+  }
+}
+</style>
diff --git a/src/views/iotsync/tq/water/components/SelectNuList.vue b/src/views/iotsync/tq/water/components/SelectNuList.vue
new file mode 100644
index 0000000..005384b
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/SelectNuList.vue
@@ -0,0 +1,126 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable">
+    <!--插槽:table标题-->
+    <template #tableTitle></template>
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+</template>
+
+<script lang="ts" name="yiweilian-apiLogList" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import {nuFormSchema, nusColumns} from '../water.data';
+  import {nuSyncListApi} from '../water.api';
+  import { useUserStore } from '/@/store/modules/user';
+  const emit = defineEmits(['register', 'success']);
+  // const props = defineProps({
+  //   orgCode: '',
+  // });
+  const formRef = ref();
+  const queryParam = reactive<any>({});
+  const toggleSearchStatus = ref<boolean>(false);
+  const registerModal = ref();
+  const userStore = useUserStore();
+  //注册table数据
+  const { prefixCls, tableContext } = useListPage({
+    tableProps: {
+      title: '区域列表',
+      api: nuSyncListApi,
+      columns:nusColumns,
+      canResize:false,
+      showActionColumn: true,
+      showTableSetting: false,
+      showIndexColumn: true,
+      formConfig: {
+        //labelWidth: 120,
+        schemas: nuFormSchema,
+        autoSubmitOnEnter:false,
+        showAdvancedButton:false,
+        fieldMapToNumber: [
+        ],
+        fieldMapToTime: [
+        ],
+      },
+      actionColumn: {
+        width: 120,
+        fixed: 'right',
+      },
+      beforeFetch: async (params) => {
+        queryParam.delFlag = '0'//查正常数据
+        queryParam.izSync = '1'//查未同步数据
+        // queryParam.orgCode = props.orgCode //查对应机构数据
+        queryParam.column = 'nuId' //排序字段
+        return Object.assign(params, queryParam);
+      },
+    },
+  });
+  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+  const labelCol = reactive({
+    xs:24,
+    sm:8,
+    xl:6,
+    xxl:8
+  });
+  const wrapperCol = reactive({
+    xs: 24,
+    sm: 16,
+  });
+
+  /**
+   * 成功回调
+   */
+  function handleSuccess() {
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 查询
+   */
+  function searchQuery() {
+    reload();
+  }
+
+  /**
+   * 重置
+   */
+  function searchReset() {
+    formRef.value.resetFields();
+    selectedRowKeys.value = [];
+    //刷新数据
+    reload();
+  }
+
+  // 编辑
+  async function handleSelectNu(record: Recordable) {
+    // console.log(record);
+    emit('ok',record);
+  }
+
+  function getTableAction(record) {
+    return [
+      {
+        label: '选择',
+        onClick: handleSelectNu.bind(null, record)
+      }
+    ]
+  }
+
+  function init(record,type) {
+  // console.log("🚀 ~ init ~ record:", record)
+    queryParam.orgCode = record.orgCode;
+    reload();
+  }
+
+  defineExpose({
+    init,
+  });
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/iotsync/tq/water/components/SelectNuModal.vue b/src/views/iotsync/tq/water/components/SelectNuModal.vue
new file mode 100644
index 0000000..ceea225
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/SelectNuModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <j-modal :title="title" width="70%" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <SelectNuList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></SelectNuList>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import SelectNuList from './SelectNuList.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+  const title = ref<string>('');
+  const width = ref<number>(800);
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success','cancel']);
+  const type = ref<string>('');
+
+  /**
+   * 日志
+   * @param record
+   */
+  function showNuList(record,_type) {
+    title.value = '选择区域';
+    visible.value = true;
+    type.value = _type;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(params) {
+    params.type = type.value;
+    visible.value = false;
+    emit('success',params);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    let params = {'type':type.value};
+    visible.value = false;
+    emit('cancel',params);
+  }
+
+  defineExpose({
+    showNuList,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/iotsync/tq/water/components/SelectedTable.vue b/src/views/iotsync/tq/water/components/SelectedTable.vue
new file mode 100644
index 0000000..9c3e3fa
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/SelectedTable.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="p-2">
+    <BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" size="small">
+      <template #tableTitle></template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="tq-water-selectedTable" setup>
+import { ref, reactive, watch,computed } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { selectedColumns } from '../water.data';
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  },
+  dataSource: { // 初始化数据
+    type: Array,
+    default: () => []
+  },
+});
+
+const emit = defineEmits(['select-change']);
+const queryParam = reactive<any>({});
+const tableRef = ref();
+const selectedRowIds = ref<Set<string | number>>(new Set());
+const allSelectedRows = ref<any[]>([]);
+
+watch(() => props.dataSource, (newParams) => {
+  // console.log(props.dataSource);
+  // reload();
+  // 使用表格实例的方法
+  tableRef.value?.setTableData(newParams);
+}, { deep: true });
+
+// 注册表格
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '已选择数据表',
+    columns:selectedColumns,
+    size: 'small',
+    showTableSetting: false,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    rowSelection: {type:'checkbox'},
+    rowKey: 'id',
+    actionColumn: {
+      width: 100,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      Object.assign(params, props.queryParams);
+      return params;
+    },
+  },
+});
+
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
+
+function getTableAction(record) {
+  return [
+    {
+      label: '取消',
+      color: 'error',
+      onClick: () => {
+        removeSelected(record);
+      }
+    }
+  ];
+}
+
+// 移除选中项
+const removeSelected = (record) => {
+  emit('removeSelect',record);
+};
+
+// 暴露给父组件的方法
+defineExpose({
+  reload,
+  allSelectedRows,
+});
+
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+:deep(.ant-table-title) {
+  display: none !important;
+}
+
+:deep(.selected-row) {
+  background-color: #e6f7ff !important;
+
+  &:hover td {
+    background-color: #e6f7ff !important;
+  }
+}
+</style>
diff --git a/src/views/iotsync/tq/water/components/SourceTable.vue b/src/views/iotsync/tq/water/components/SourceTable.vue
new file mode 100644
index 0000000..0c87a7a
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/SourceTable.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="p-2">
+    <BasicTable ref="tableRef" @register="registerTable" :scroll="{ y: '56vh' }" :rowSelection="rowSelection" :rowClassName="getRowClassName"  @selection-change="handleSelectionChange" size="small">
+      <template #tableTitle></template>
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="tq-water-sourceTable" setup>
+import { ref, reactive, watch,computed } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { selectedSourceColumns,unselectedSourceColumns } from '../water.data';
+import { sourceListApi } from '../water.api';
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  },
+});
+
+const emit = defineEmits(['select-change']);
+const queryParam = reactive<any>({});
+const tableRef = ref();
+const selectedRowIds = ref<Set<string | number>>(new Set());
+const allSelectedRows = ref<any[]>([]);
+
+// 行类名函数
+const getRowClassName = (record) => {
+  return selectedRowIds.value.has(record.address) ? 'selected-row' : '';
+};
+
+watch(() => props.queryParams, (newParams) => {
+  reload();
+}, { deep: true });
+
+const tableColumns = computed(() => {
+  return props.queryParams.viewType === 'selected' ? selectedSourceColumns : unselectedSourceColumns;
+});
+
+// 注册表格
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '设备源表',
+    api: sourceListApi,
+    columns:tableColumns,
+    size: 'small',
+    showTableSetting: false,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    rowSelection: {type:'checkbox'},
+    rowKey: 'id',
+    actionColumn: {
+      width: 100,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      Object.assign(params, props.queryParams);
+      params.column = 'createTime'
+      params.order = 'desc'
+      params.selectedRowIds = Array.from(selectedRowIds.value)
+      return params;
+    },
+  },
+});
+
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection,selectedRows, selectedRowKeys }] = tableContext;
+
+function getTableAction(record) {
+  const actions = [];
+  if (selectedRowIds.value.has(record.address)) {
+    actions.push({
+      label: '取消',
+      color: 'error',
+      onClick: () => {
+        removeSelected(record);
+      }
+    });
+  } else {
+    let label = '添加';
+    if(record.nuId){
+      label = '重新选择';
+    }
+    actions.push({
+      label: label,
+      onClick: () => {
+        toggleSelect(record);
+      }
+    });
+  }
+  return actions;
+}
+
+function handleSelectionChange(selectedRowSet) {
+  // console.log('当前选中数据:', selectedRowSet);
+  allSelectedRows.value = selectedRowSet.rows;
+  selectedRowKeys.value = selectedRowSet.keys;
+}
+
+// 取消所有选中项
+function clearSelected(){
+  // console.log('取消选择数据');
+  selectedRowKeys.value = [];
+  allSelectedRows.value = [];
+}
+
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+// 切换选择状态
+const toggleSelect = (record) => {
+  if (!selectedRowIds.value.has(record.address)) {
+    selectedRowIds.value.add(record.address);
+  }
+  allSelectedRows.value = [];
+  allSelectedRows.value.push(record);
+  emit('addSelect');
+};
+
+// 移除选中项
+const removeSelected = (record) => {
+  selectedRowIds.value.delete(record.address);
+  emit('removeSelect',record);
+};
+
+const updateSelection = (selectedRecords) => {
+  selectedRowIds.value.clear();
+  selectedRecords.forEach((value, key) => {
+    selectedRowIds.value.add(key);
+  });
+  // 更新表格的选中状态
+  if (registerTable) {
+    registerTable.toggleRowSelection?.(Array.from(selectedRowIds.value), true);
+  }
+};
+
+// 暴露给父组件的方法
+defineExpose({
+  updateSelection,
+  clearSelected,
+  reload,
+  allSelectedRows,
+});
+
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+//:deep(.ant-table-title) {
+//  display: none !important;
+//}
+
+:deep(.selected-row) {
+  background-color: #e6f7ff !important;
+
+  &:hover td {
+    background-color: #e6f7ff !important;
+  }
+}
+</style>
diff --git a/src/views/iotsync/tq/water/components/SyncLogList.vue b/src/views/iotsync/tq/water/components/SyncLogList.vue
new file mode 100644
index 0000000..5233d18
--- /dev/null
+++ b/src/views/iotsync/tq/water/components/SyncLogList.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="p-2">
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+      </template>
+      <template #expandedRowRender="{ record, index, indent, expanded }">
+        <a-table :columns="asyncSeedColumns" :data-source="record.seedList" :pagination="false" bordered
+          class="z-table-class" size="small">
+          <template #bodyCell="{ column }">
+          </template>
+        </a-table>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="asyncmain-asyncMain" setup>
+import { ref, reactive } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import {asyncMaincolumns, asyncSeedColumns, logFormSchema} from '../water.data';
+import { syncLogListApi } from '../water.api';
+import AsyncMainModal from './components/AsyncMainModal.vue'
+
+const props = defineProps({
+    orgCode: 'orgCode',
+});
+const queryParam = reactive<any>({});
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '数据同步日志主表',
+    api: syncLogListApi,
+    columns: asyncMaincolumns,
+    formConfig: {
+      schemas: logFormSchema
+    },
+    canResize: false,
+    useSearchForm: true,
+    showTableSetting: false,
+    showActionColumn: false,
+    beforeFetch: async (params) => {
+      queryParam.departServerUrl = props.orgCode
+      return Object.assign(params, queryParam);
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+defineExpose({
+  searchQuery
+});
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+:deep(.ant-table-title) {
+  display: none !important;
+}
+
+:deep(.darkened-table) {
+  .ant-table-thead>tr>th {
+    background-color: #dadadaee;
+  }
+  .ant-table-tbody>tr>td {
+    background-color: #f3f3f3f5;
+  }
+
+}
+
+:deep(.z-table-class) {
+  .ant-table-thead>tr>th {
+    background-color: #e6f0fd;
+  }
+
+  .ant-table-tbody>tr>td {
+    background-color: #FBFBFB;
+  }
+}
+</style>
diff --git a/src/views/iotsync/tq/water/index.vue b/src/views/iotsync/tq/water/index.vue
new file mode 100644
index 0000000..59e6282
--- /dev/null
+++ b/src/views/iotsync/tq/water/index.vue
@@ -0,0 +1,549 @@
+<template>
+  <OrgSelectComponent ref="orgSelectComRef" @orgChanged="orgChanged" @orgReset="orgReset"></OrgSelectComponent>
+
+  <div class="p-2 base-class" style="margin-top: -0.5rem;" v-if="showDevices">
+<!--  <div class="p-2 base-class" style="margin-top: -0.5rem;">-->
+      <a-card class="container" v-show="toggleSearchStatus && tabActiveKey == 'dataAsync'" >
+        <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
+                :wrapper-col="wrapperCol">
+          <a-row :gutter="24">
+            <a-col :span="4">
+              <a-form-item name="dataType">
+                <template #label><span title="dataType">来源</span></template>
+                <a-select v-model:value="dataType" placeholder="请选择来源" allowClear @change="dataTypeChanged(dataType)">
+                  <a-select-option value="source" key="source">源数据</a-select-option>
+                  <a-select-option value="business" key="business">已同步</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <a-form-item name="sn">
+                <template #label><span title="SN">SN</span></template>
+                <a-input v-model:value="queryParam.address" placeholder="请输入SN" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="5" v-show="viewType =='selected'||dataType=='business'">
+              <a-form-item name="departId">
+                <template #label><span title="机构">机构</span></template>
+                <a-select v-model:value="queryParam.departId" placeholder="请选择机构" allowClear @change="handleDepartChange">
+                  <a-select-option :value="item.departId" v-for="item in departList" :key="item.departId">{{item.departName}}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="5" v-show="viewType =='selected'||dataType=='business'">
+              <a-form-item name="nuId">
+                <template #label><span title="区域">区域</span></template>
+                <a-select v-model:value="queryParam.nuId" placeholder="请选择区域" allowClear>
+                  <a-select-option :value="item.nuId" v-for="item in nuList" :key="item.nuId">{{item.nuName}}</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="5">
+              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                <a-button type="primary" preIcon="ant-design:search-outlined"
+                          @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
+                          style="margin-left: 8px">重置</a-button>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-card>
+      <a-card class="container">
+        <div class="tab-header-container" v-if="showDevices">
+<!--        <div class="tab-header-container">-->
+          <a-tabs v-model:activeKey="tabActiveKey" class="tabs-container">
+            <a-tab-pane key="dataAsync" tab="数据同步">
+              <a-card>
+                <a-row>
+                  <a-col :span="sourceScreenSpan">
+                    <div style="height: 16px;margin-left: 15px">
+                      <a-tag color="#2DB7F5">源数据</a-tag>
+                      <a-radio-group v-model:value="viewType" size="small" style="margin-left: 10px;" @change="viewTypeChanged(viewType)">
+                        <a-radio-button value="unselected">未选择</a-radio-button>
+                        <a-radio-button value="selected">已选择</a-radio-button>
+                      </a-radio-group>
+                      <div class="toggle-add-button-container">
+                        <a-button type="primary" size="small" @click="handleAddSourceSelect"
+                                style="margin-left: 8px">{{sourceButtonText}}</a-button>
+                      </div>
+                    </div>
+                    <SourceTable ref="sourceComRef" :queryParams="sourceParam" @addSelect="handleAddSourceSelect" @removeSelect="handleRemoveSourceSelect"/>
+                  </a-col>
+                  <a-col :span="selectedScreenSpan">
+                    <div style="height: 16px;margin-left: 15px">
+                      <a-tag color="#2db7f5">待同步
+                        <span style="font-size: 13px;font-weight: bold;">{{ ' ' + Array.from(allSelectedItems.values()).length + ' ' }}</span>条
+                      </a-tag>
+                      <a-radio-group v-model:value="businessView" size="small" style="margin-left: 10px;">
+                        <a-radio-button value="unselected">待同步</a-radio-button>
+                        <a-radio-button value="selected">已同步</a-radio-button>
+                      </a-radio-group>
+                      <div class="toggle-add-button-container" v-show="businessView=='selected'">
+                        <a-button type="primary" size="small" @click="handleEditBusinessSelect" style="margin-left: 8px">重新选择</a-button>
+                        <a-button type="primary" size="small" @click="handleDeleteBusinessSelect" style="margin-left: 8px">移除</a-button>
+                      </div>
+                    </div>
+                    <SelectedTable v-show="businessView=='unselected'" ref="selectedComRef" :dataSource="Array.from(allSelectedItems.values())" @removeSelect="handleRemoveSelect"/>
+                    <BusinessTable v-show="businessView=='selected'" ref="businessComRef" :queryParams="businessParam" @editSelect="handleEditBusinessSelect" @deleteSelect="handleDeleteBusinessSelect"  @removeSelect="handleRemoveBusinessSelect"/>
+                  </a-col>
+                </a-row>
+              </a-card>
+            </a-tab-pane>
+            <a-tab-pane key="syncLogList" tab="同步历史">
+              <SyncLogList ref="syncLogListRef" :orgCode="orgData.orgCode"></SyncLogList>
+            </a-tab-pane>
+          </a-tabs>
+          <div class="toggle-button-container">
+            <a-button type="primary" size="small" @click.stop="refreshHistory()" style="margin-right: 10px;"
+                      v-show="tabActiveKey == 'syncLogList'">
+              <span>刷新</span>
+            </a-button>
+            <a-button type="warning" size="small" @click.stop="handleAsync()"
+                      style="margin-left: 5px;margin-right: 5px;" v-show="tabActiveKey == 'dataAsync'">
+              <span>同步</span>
+            </a-button>
+            <a-divider type="vertical" style="background-color: #CDCDCF"
+                       v-show="tabActiveKey == 'dataAsync'" />
+            <a-button type="primary" size="small" @click.stop="handleReload"
+                      v-show="tabActiveKey == 'dataAsync'" style="margin-left: 8px">还原</a-button>
+            <a-divider type="vertical" style="background-color: #CDCDCF"
+                       v-show="tabActiveKey == 'dataAsync'" />
+            <a-radio-group v-model:value="splitVal" button-style="solid" size="small"
+                           @change="splitScreenChanged" style="margin-left: 5px;margin-right: 5px;"
+                           v-show="tabActiveKey == 'dataAsync'">
+              <a-radio-button value="sc">源数据</a-radio-button>
+              <a-radio-button value="sc2sed1">分屏1</a-radio-button>
+              <a-radio-button value="sc1sed1">分屏2</a-radio-button>
+              <a-radio-button value="sc1sed2">分屏3</a-radio-button>
+              <a-radio-button value="sed">已选择</a-radio-button>
+            </a-radio-group>
+            <a-divider type="vertical" style="background-color: #CDCDCF" v-show="tabActiveKey == 'dataAsync'" />
+            <a @click="toggleSearchStatus = !toggleSearchStatus" class="toggle-button"  v-show="tabActiveKey == 'dataAsync'"
+               style="margin-left: 5px;margin-right: 5px;">
+              {{ toggleSearchStatus ? '收缩' : '展开' }}
+              <Icon :icon="toggleSearchStatus ? 'humbleicons:align-objects-top' : 'humbleicons:align-objects-bottom'" />
+            </a>
+          </div>
+        </div>
+      </a-card>
+  </div>
+  <SelectNuModal ref="selectNuModal" @success="selectNuHandleSuccess" @cancel="selectNuHandleCancel"></SelectNuModal>
+
+</template>
+
+<script setup name="tq-water-index" lang="ts">
+
+import {ref, reactive, onMounted, watch} from 'vue'
+import OrgSelectComponent from '../../components/OrgSelect.vue'
+import SourceTable from './components/SourceTable.vue'
+import SelectedTable from './components/SelectedTable.vue'
+import BusinessTable from './components/BusinessTable.vue'
+import SelectNuModal from './components/SelectNuModal.vue'
+import SyncLogList from './components/SyncLogList.vue'
+import { useMessage } from "/@/hooks/web/useMessage";
+import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import {departListApi, nuListApi, syncDevicesApi} from './water.api';
+import {selectedColumns} from './water.data';
+const { createMessage } = useMessage();
+const orgSelectComRef = ref(null);
+const showDevices = ref(false);
+const selectNuModal = ref();
+const labelCol = reactive({
+  xs: 24,
+  sm: 4,
+  xl: 6,
+  xxl: 5
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 20,
+});
+const queryParam = ref()//源数据查询参数
+const sourceParam = ref({viewType: 'unselected',departServerUrl:''})//源数据查询参数
+const businessParam = ref({departServerUrl:''})//源数据查询参数
+const sourceComRef = ref();
+const selectedComRef = ref();
+const businessComRef = ref();
+const syncLogListRef = ref();
+const toggleSearchStatus = ref<boolean>(true);
+
+const tabActiveKey = ref('dataAsync');
+const sourceScreenSpan = ref(12);
+const selectedScreenSpan = ref(12);
+const sourceButtonText = ref('添加');
+//源数据查询参数
+const dataType = ref('source');
+const viewType = ref('unselected');
+const businessView = ref('unselected');
+const splitVal = ref<string>('sc1sed1');
+const orgData = ref();
+const allSelectedItems = ref<Map<string | number, any>>(new Map());
+const selectedItems = ref([]);//已选择数据
+/**
+ * 机构变更
+ */
+const orgChanged = async (org) => {
+  orgData.value = org;
+  viewType.value = 'unselected';
+  businessView.value = 'unselected';
+  tabActiveKey.value = 'dataAsync';
+  //清空当前选择
+  allSelectedItems.value.clear();
+  //清空查询条件
+  queryParam.value = {};
+  //源数据
+  sourceParam.value = { viewType: 'unselected',departServerUrl:org.orgCode};
+  //已选择
+  businessParam.value = {departServerUrl: org.orgCode};
+  // 切换视图
+  orgSelectComRef?.value?.resetOrgSelectedCon(false);
+  showDevices.value = true;
+  toggleSearchStatus.value = true;
+}
+
+/**
+ * 机构重新选择
+ */
+const orgReset = async (org) => {
+  showDevices.value = false;
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  if(dataType.value=='source'){
+    sourceParam.value.address = queryParam.value.address;
+    sourceParam.value.departId = queryParam.value.departId;
+    sourceParam.value.nuId = queryParam.value.nuId;
+    sourceComRef.value.reload();
+  }else{
+    businessParam.value.address = queryParam.value.address;
+    businessParam.value.departId = queryParam.value.departId;
+    businessParam.value.nuId = queryParam.value.nuId;
+    businessComRef.value.reload();
+  }
+}
+
+function searchReset() {
+  queryParam.value = {};
+  if(dataType.value=='source'){
+    let vt = sourceParam.value.viewType;
+    let dsu = sourceParam.value.departServerUrl;
+    sourceParam.value = { viewType: vt,departServerUrl:dsu };
+  }else{
+    let dsu = businessParam.value.departServerUrl;
+    businessParam.value = { departServerUrl: dsu };
+  }
+}
+
+const splitScreenChanged = (val) => {
+  let v_ = val.target.value;
+  if (v_ == 'sc') {
+    sourceScreenSpan.value = 24;
+    selectedScreenSpan.value = 0;
+  }
+  if (v_ == 'sc2sed1') {
+    sourceScreenSpan.value = 16;
+    selectedScreenSpan.value = 8;
+  }
+  if (v_ == 'sc1sed1') {
+    sourceScreenSpan.value = 12;
+    selectedScreenSpan.value = 12;
+  }
+  if (v_ == 'sc1sed2') {
+    sourceScreenSpan.value = 8;
+    selectedScreenSpan.value = 16;
+  }
+  if (v_ == 'sed') {
+    sourceScreenSpan.value = 0;
+    selectedScreenSpan.value = 24;
+  }
+};
+
+const dataTypeChanged = (value) => {
+  if(value=='source'){
+    if(viewType.value=='selected'){
+      sourceButtonText.value = '重新选择';
+      const departServerUrl = sourceParam.value.departServerUrl;
+      getDepartList({dataType:'source',departServerUrl:departServerUrl});
+      getNuList({dataType:'source',departServerUrl:departServerUrl});
+    }else{
+      sourceButtonText.value = '添加';
+    }
+  }else{
+    const departServerUrl = businessParam.value.departServerUrl;
+    getDepartList({dataType:'business',departServerUrl:departServerUrl});
+    getNuList({dataType:'business',departServerUrl:departServerUrl});
+  }
+}
+
+const viewTypeChanged = (value) => {
+  sourceButtonText.value = '添加';
+  sourceParam.value.viewType = value
+  if(value=='selected'){
+    const departServerUrl = sourceParam.value.departServerUrl;
+    sourceButtonText.value = '重新选择';
+    getDepartList({dataType:'source',departServerUrl:departServerUrl});
+    getNuList({dataType:'source',departServerUrl:departServerUrl});
+  }
+}
+
+const departList = ref();
+async function getDepartList(record){
+  departList.value = await departListApi(record);
+}
+
+const nuList = ref();
+async function getNuList(record){
+  nuList.value = await nuListApi(record);
+}
+
+async function handleDepartChange(record){
+  let params = {departId:record,dataType:'',departServerUrl:''};
+  if(dataType.value=='source'){
+    params.dataType = 'source';
+    params.departServerUrl = sourceParam.value.departServerUrl;
+  }else{
+    params.dataType = 'business';
+    params.departServerUrl = businessParam.value.departServerUrl;
+  }
+  nuList.value = await nuListApi(params);
+}
+
+const handleRemoveFromRight = (key: string | number) => {
+  selectedItems.value.delete(key);
+  sourceComRef.value?.removeSelectedItem?.(key);
+};
+
+function handleAddSourceSelect(){
+  const allSelectedRows = sourceComRef.value.allSelectedRows;
+  if (allSelectedRows && allSelectedRows.length > 0) {
+    selectNuModal.value.disableSubmit = true;
+    selectNuModal.value.showNuList(orgData.value,'source');
+  }else{
+    createMessage.warning('请先选择源数据');
+  }
+}
+
+function handleEditBusinessSelect(){
+  const allSelectedRows = businessComRef.value.allSelectedRows;
+  if (allSelectedRows && allSelectedRows.length > 0) {
+    selectNuModal.value.disableSubmit = true;
+    selectNuModal.value.showNuList(orgData.value,'business');
+  }else{
+    createMessage.warning('请先选择已同步数据');
+  }
+}
+
+function handleDeleteBusinessSelect(){
+  const businessSelectedRows = businessComRef.value.allSelectedRows;
+  if (businessSelectedRows && businessSelectedRows.length > 0) {
+    businessSelectedRows.forEach(record => {
+      if (allSelectedItems.value.has(record.address)) {
+        allSelectedItems.value.delete(record.address);
+      }
+      let item = {};
+      item["address"] = record.address;
+      item["actionType"] = '删除';
+      item["dataType"] = 'business';
+      item["dataTypeText"] = '已同步区';
+      item["nuId"] = record.nuId;
+      item["nuName"] = record.nuName;
+      item["areaFlag_dictText"] = record.areaFlag_dictText;
+      item["orgCode"] = '';
+      item["departId"] = '';
+      item["departName"] = '';
+      item["oldOrgCode"] = record.departServerUrl;
+      item["oldDepartId"] = record.departId;
+      item["oldDepartName"] = record.departName;
+      allSelectedItems.value.set(record.address, item);
+    });
+    updateBusinessSelection();
+  }
+}
+
+function handleRemoveSourceSelect(record){
+  if (allSelectedItems.value.has(record.address)) {
+    allSelectedItems.value.delete(record.address);
+  }
+  updateSourceSelection();
+}
+
+function handleRemoveBusinessSelect(record){
+  if (allSelectedItems.value.has(record.address)) {
+    allSelectedItems.value.delete(record.address);
+  }
+  updateBusinessSelection();
+}
+
+function handleRemoveSelect(record){
+  if (allSelectedItems.value.has(record.address)) {
+    allSelectedItems.value.delete(record.address);
+  }
+  if(record.dataType == 'source'){
+    updateSourceSelection();
+  }
+  if(record.dataType == 'business'){
+    updateBusinessSelection();
+  }
+}
+
+function selectNuHandleSuccess(nuInfo){
+  if(nuInfo.type == 'source'){
+    const sourceSelectedRows = sourceComRef.value.allSelectedRows;
+    if (sourceSelectedRows && sourceSelectedRows.length > 0) {
+      sourceSelectedRows.forEach(record => {
+        if (allSelectedItems.value.has(record.address)) {
+          allSelectedItems.value.delete(record.address);
+        }
+        let item = {};
+        item["address"] = record.address;
+        item["actionType"] = sourceButtonText.value;
+        item["dataType"] = 'source';
+        item["dataTypeText"] = '源数据区';
+        item["nuId"] = nuInfo.nuId;
+        item["nuName"] = nuInfo.nuName;
+        item["areaFlag_dictText"] = nuInfo.areaFlag_dictText;
+        item["orgCode"] = orgData.value.orgCode;
+        item["departId"] = orgData.value.orgId;
+        item["departName"] = orgData.value.departName;
+        item["oldOrgCode"] = record.departServerUrl;
+        item["oldDepartId"] = record.departId;
+        item["oldDepartName"] = record.departName;
+        allSelectedItems.value.set(record.address, item);
+      });
+      updateSourceSelection();
+    }
+  }else{
+    const businessSelectedRows = businessComRef.value.allSelectedRows;
+    if (businessSelectedRows && businessSelectedRows.length > 0) {
+      businessSelectedRows.forEach(record => {
+        if (allSelectedItems.value.has(record.address)) {
+          allSelectedItems.value.delete(record.address);
+        }
+        let item = {};
+        item["address"] = record.address;
+        item["actionType"] = '修改';
+        item["dataType"] = 'business';
+        item["dataTypeText"] = '已同步区';
+        item["nuId"] = nuInfo.nuId;
+        item["nuName"] = nuInfo.nuName;
+        item["areaFlag_dictText"] = nuInfo.areaFlag_dictText;
+        item["orgCode"] = orgData.value.orgCode;
+        item["departId"] = orgData.value.orgId;
+        item["departName"] = orgData.value.departName;
+        item["oldOrgCode"] = record.departServerUrl;
+        item["oldDepartId"] = record.departId;
+        item["oldDepartName"] = record.departName;
+        allSelectedItems.value.set(record.address, item);
+      });
+      updateBusinessSelection();
+    }
+  }
+}
+
+function selectNuHandleCancel(nuInfo){
+  console.log(nuInfo);
+  if(nuInfo.type == 'source'){
+    updateSourceSelection();
+  }else{
+    updateBusinessSelection();
+  }
+}
+
+//清除源数据勾选和更新选中状态
+function updateSourceSelection(){
+  //清空多选框勾选
+  sourceComRef.value.clearSelected();
+  // 更新左侧列表的选中状态
+  sourceComRef.value?.updateSelection?.(allSelectedItems.value);
+}
+
+//清除已选数据勾选和更新选中状态
+function updateBusinessSelection(){
+  //清空多选框勾选
+  businessComRef.value.clearSelected();
+  // 更新左侧列表的选中状态
+  businessComRef.value?.updateSelection?.(allSelectedItems.value);
+}
+
+//还原
+function handleReload(){
+  allSelectedItems.value.clear();
+  updateSourceSelection();
+  updateBusinessSelection();
+}
+
+//同步
+async function handleAsync(){
+  const arr = Array.from(allSelectedItems.value.values())
+  console.log(arr);
+  const res = await syncDevicesApi(arr);
+  console.log(res);
+  handleReload();
+}
+
+//刷新同步日志数据
+const refreshHistory = () => {
+  syncLogListRef.value?.searchQuery()
+}
+
+
+</script>
+
+<style lang="less" scoped>
+
+.container {
+  max-width: 100% !important;
+  margin-bottom: 10px;
+}
+
+.ant-form-item{
+  margin-bottom: 0px;
+}
+
+.base-class {
+  :deep(.ant-card .ant-card-body) {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+  }
+}
+
+.tabs-container {
+  width: 100%;
+
+  :deep(.ant-tabs-content) {
+    height: calc(100% - 40px); // 减去tab标题高度
+    overflow: auto;
+  }
+}
+
+.selected-list-container {
+  height: calc(100vh - 310px);
+  overflow: auto;
+
+  :deep(.ant-table) {
+    width: 100% !important;
+    max-width: 100%;
+  }
+}
+
+.toggle-add-button-container {
+  position: absolute;
+  right: 16px;
+  top: 0px;
+  z-index: 1;
+}
+
+
+.toggle-button-container {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  z-index: 1;
+}
+
+</style>
diff --git a/src/views/iotsync/tq/water/water.api.ts b/src/views/iotsync/tq/water/water.api.ts
new file mode 100644
index 0000000..259cdc1
--- /dev/null
+++ b/src/views/iotsync/tq/water/water.api.ts
@@ -0,0 +1,49 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  sourceList = '/iot/tq/waterMeter/sourceList',
+  departList = '/iot/tq/waterMeter/departList',
+  nuList = '/iot/tq/waterMeter/nuList',
+  businessList = '/iot/tq/waterMeter/businessList',
+  nuSyncList = '/admin/nuBaseInfo/nuBaseInfo/list',
+  syncDevices = '/iot/tq/waterMeter/syncDevices',
+  syncLogList = '/iot/tq/waterMeter/syncLogList',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const sourceListApi = (params) => defHttp.get({ url: Api.sourceList, params });
+/**
+ * 列表接口
+ * @param params
+ */
+export const departListApi = (params) => defHttp.get({ url: Api.departList, params });
+/**
+ * 列表接口
+ * @param params
+ */
+export const nuListApi = (params) => defHttp.get({ url: Api.nuList, params });
+/**
+ * 列表接口
+ * @param params
+ */
+export const businessListApi = (params) => defHttp.get({ url: Api.businessList, params });
+/**
+ * 列表接口
+ * @param params
+ */
+export const nuSyncListApi = (params) => defHttp.get({ url: Api.nuSyncList, params });
+/**
+ * 同步设备
+ * @param params
+ */
+export const syncDevicesApi = (params) => {
+  return defHttp.post({ url: Api.syncDevices, params });
+}
+/**
+ * 列表接口
+ * @param params
+ */
+export const syncLogListApi = (params) => defHttp.get({ url: Api.syncLogList, params });
diff --git a/src/views/iotsync/tq/water/water.data.ts b/src/views/iotsync/tq/water/water.data.ts
new file mode 100644
index 0000000..58c1613
--- /dev/null
+++ b/src/views/iotsync/tq/water/water.data.ts
@@ -0,0 +1,261 @@
+import {BasicColumn, FormSchema} from '/@/components/Table';
+
+export const businessColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: 'center',
+    dataIndex: 'address',
+    width: 140,
+  },
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+    resizable: true,
+  },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName',
+    resizable: true,
+  },
+  {
+    title: '区域标签',
+    align: "center",
+    dataIndex: 'areaFlag_dictText',
+    resizable: true,
+  }
+];
+
+//列表数据
+export const unselectedSourceColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: 'center',
+    dataIndex: 'address',
+    width: 140,
+  },
+  // {
+  //   title: '设备状态',
+  //   align: "center",
+  //   dataIndex: 'relayState',
+  //   customRender:({record})=>{
+  //     return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
+  //   },
+  //   width: 80,
+  // },
+  // {
+  //   title: '在线状态',
+  //   align: "center",
+  //   dataIndex: 'online',
+  //   customRender:({record})=>{
+  //     return record.online?(record.online=='true'?'在线':'离线'):'';
+  //   },
+  //   width: 80,
+  // },
+  // {
+  //   title: '用水量m³',
+  //   align: "center",
+  //   dataIndex: 'waterValue',
+  //   width: 80,
+  // },
+];
+
+//列表数据
+export const selectedSourceColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: 'center',
+    dataIndex: 'address',
+    width: 140,
+  },
+  {
+    title: '机构',
+    align: "center",
+    dataIndex: 'departName',
+    resizable: true,
+  },
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+    resizable: true,
+  },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName',
+    resizable: true,
+  },
+  {
+    title: '区域标签',
+    align: "center",
+    dataIndex: 'areaFlag_dictText',
+    resizable: true,
+  },
+  // {
+  //   title: '设备状态',
+  //   align: "center",
+  //   dataIndex: 'relayState',
+  //   customRender:({record})=>{
+  //     return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
+  //   },
+  //   width: 80,
+  // },
+  // {
+  //   title: '在线状态',
+  //   align: "center",
+  //   dataIndex: 'online',
+  //   customRender:({record})=>{
+  //     return record.online?(record.online=='true'?'在线':'离线'):'';
+  //   },
+  //   width: 80,
+  // },
+  // {
+  //   title: '用水量m³',
+  //   align: "center",
+  //   dataIndex: 'waterValue',
+  //   width: 80,
+  // },
+];
+
+export const nusColumns: BasicColumn[] = [
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+    resizable: true,
+  },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName',
+    resizable: true,
+  },
+  {
+    title: '区域标签',
+    align: "center",
+    dataIndex: 'areaFlag_dictText',
+    resizable: true,
+  }
+];
+
+export const nuFormSchema: FormSchema[] = [
+  {
+    label: '区域标签',
+    field: 'areaFlag',
+    component: 'JDictSelectTag',
+    componentProps: {
+      dictCode: 'nu_type',
+    },
+    colProps: { span: 6 },
+  },
+];
+
+
+export const selectedColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: 'center',
+    dataIndex: 'address',
+    width: 140,
+  },
+  {
+    title: '操作区域',
+    align: 'center',
+    dataIndex: 'dataTypeText',
+    width: 80,
+  },
+  {
+    title: '操作类型',
+    align: 'center',
+    dataIndex: 'actionType',
+    width: 80,
+  },
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+    resizable: true,
+  },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName',
+    resizable: true,
+  },
+  {
+    title: '区域标签',
+    align: "center",
+    dataIndex: 'areaFlag_dictText',
+    resizable: true,
+  }
+];
+
+export const asyncMaincolumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: 'center',
+    dataIndex: 'sn',
+  },
+  {
+    title: '设备名称',
+    align: "center",
+    dataIndex: 'deviceName',
+  },
+  {
+    title: '设备类型',
+    align: "center",
+    dataIndex: 'serverType',
+  },
+  {
+    title: '同步时间',
+    align: "center",
+    dataIndex: 'createTime',
+  }
+];
+
+export const asyncSeedColumns: BasicColumn[] = [
+  {
+    title: '同步类型',
+    align: "center",
+    dataIndex: 'syncType',
+  },
+  {
+    title: '同步时间',
+    align: "center",
+    dataIndex: 'createTime',
+  },
+  {
+    title: '现机构',
+    align: "center",
+    dataIndex: 'departName',
+  },
+  {
+    title: '现区域',
+    align: "center",
+    dataIndex: 'nuId',
+  },
+  {
+    title: '原机构',
+    align: "center",
+    dataIndex: 'oldDepartName',
+  },
+  {
+    title: '原区域',
+    align: "center",
+    dataIndex: 'oldNuId',
+  },
+];
+
+export const logFormSchema: FormSchema[] = [
+  {
+    label: 'SN',
+    field: 'sn',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入SN',
+    },
+    // colProps: { span: 6 },
+  },
+];