From cf647a65fc477af3fcaf8b8119f1343fd66b911b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Tue, 5 Aug 2025 17:42:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E8=A1=A8=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../electricity/components/BusinessTable.vue  | 214 +++++++
 .../electricity/components/SelectNuList.vue   | 123 ++++
 .../electricity/components/SelectNuModal.vue  |  70 +++
 .../electricity/components/SelectedTable.vue  | 147 +++++
 .../tq/electricity/components/SourceTable.vue | 209 +++++++
 .../tq/electricity/components/SyncLogList.vue | 125 ++++
 .../iotsync/tq/electricity/electricity.api.ts |  49 ++
 .../tq/electricity/electricity.data.ts        | 223 +++++++
 src/views/iotsync/tq/electricity/index.vue    | 561 ++++++++++++++++++
 9 files changed, 1721 insertions(+)
 create mode 100644 src/views/iotsync/tq/electricity/components/BusinessTable.vue
 create mode 100644 src/views/iotsync/tq/electricity/components/SelectNuList.vue
 create mode 100644 src/views/iotsync/tq/electricity/components/SelectNuModal.vue
 create mode 100644 src/views/iotsync/tq/electricity/components/SelectedTable.vue
 create mode 100644 src/views/iotsync/tq/electricity/components/SourceTable.vue
 create mode 100644 src/views/iotsync/tq/electricity/components/SyncLogList.vue
 create mode 100644 src/views/iotsync/tq/electricity/electricity.api.ts
 create mode 100644 src/views/iotsync/tq/electricity/electricity.data.ts
 create mode 100644 src/views/iotsync/tq/electricity/index.vue

diff --git a/src/views/iotsync/tq/electricity/components/BusinessTable.vue b/src/views/iotsync/tq/electricity/components/BusinessTable.vue
new file mode 100644
index 0000000..e013d1b
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/components/BusinessTable.vue
@@ -0,0 +1,214 @@
+<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-electricity-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 '../electricity.data';
+import { businessListApi } from '../electricity.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);
+  }
+};
+
+function reloadData(){
+  reload();
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  updateSelection,
+  clearSelected,
+  reloadData,
+  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/electricity/components/SelectNuList.vue b/src/views/iotsync/tq/electricity/components/SelectNuList.vue
new file mode 100644
index 0000000..881a191
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/components/SelectNuList.vue
@@ -0,0 +1,123 @@
+<template>
+  <!--引用表格-->
+  <BasicTable @register="registerTable">
+    <!--插槽:table标题-->
+    <template #tableTitle></template>
+    <template #action="{ record }">
+      <TableAction :actions="getTableAction(record)" />
+    </template>
+  </BasicTable>
+</template>
+
+<script lang="ts" name="tq-electricity-apiLogList" setup>
+  import { ref, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import {nuFormSchema, nusColumns} from '../electricity.data';
+  import {nuSyncListApi} from '../electricity.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.orgCode = props.orgCode //查对应机构数据
+        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/electricity/components/SelectNuModal.vue b/src/views/iotsync/tq/electricity/components/SelectNuModal.vue
new file mode 100644
index 0000000..ceea225
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/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/electricity/components/SelectedTable.vue b/src/views/iotsync/tq/electricity/components/SelectedTable.vue
new file mode 100644
index 0000000..1a5e739
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/components/SelectedTable.vue
@@ -0,0 +1,147 @@
+<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-electricity-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 '../electricity.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);
+};
+
+function reloadData(){
+  reload();
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  reloadData,
+  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/electricity/components/SourceTable.vue b/src/views/iotsync/tq/electricity/components/SourceTable.vue
new file mode 100644
index 0000000..025d9d6
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/components/SourceTable.vue
@@ -0,0 +1,209 @@
+<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-electricity-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 '../electricity.data';
+import { sourceListApi } from '../electricity.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);
+  }
+};
+
+function reloadData(){
+  reload();
+}
+
+
+// 暴露给父组件的方法
+defineExpose({
+  updateSelection,
+  clearSelected,
+  reloadData,
+  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/electricity/components/SyncLogList.vue b/src/views/iotsync/tq/electricity/components/SyncLogList.vue
new file mode 100644
index 0000000..447c839
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/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="tq-electricity-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 '../electricity.data';
+import { syncLogListApi } from '../electricity.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/electricity/electricity.api.ts b/src/views/iotsync/tq/electricity/electricity.api.ts
new file mode 100644
index 0000000..e14cfa4
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/electricity.api.ts
@@ -0,0 +1,49 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  sourceList = '/iot/tq/electricityMeter/sourceList',
+  departList = '/iot/tq/electricityMeter/departList',
+  nuList = '/iot/tq/electricityMeter/nuList',
+  businessList = '/iot/tq/electricityMeter/businessList',
+  nuSyncList = '/iot/tq/electricityMeter/nuSyncList',
+  syncDevices = '/iot/tq/electricityMeter/syncDevices',
+  syncLogList = '/iot/tq/electricityMeter/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/electricity/electricity.data.ts b/src/views/iotsync/tq/electricity/electricity.data.ts
new file mode 100644
index 0000000..377878a
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/electricity.data.ts
@@ -0,0 +1,223 @@
+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,
+  },
+];
+
+//列表数据
+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,
+  },
+];
+
+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,
+  },
+  {
+    title: '绑定设备数量',
+    align: "center",
+    dataIndex: 'deviceNum'
+  }
+];
+
+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: 'status',
+  },
+  {
+    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 },
+  },
+];
diff --git a/src/views/iotsync/tq/electricity/index.vue b/src/views/iotsync/tq/electricity/index.vue
new file mode 100644
index 0000000..7fd6d54
--- /dev/null
+++ b/src/views/iotsync/tq/electricity/index.vue
@@ -0,0 +1,561 @@
+<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="4" 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="4" 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="4" v-show="viewType =='selected'||dataType=='business'">
+              <a-form-item name="status">
+                <template #label><span title="状态">状态</span></template>
+                <a-select v-model:value="queryParam.status" placeholder="请选择状态" allowClear>
+                  <a-select-option value="0" key="0">正常</a-select-option>
+                  <a-select-option value="1" key="1">作废</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <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-electricity-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 './electricity.api';
+import {selectedColumns} from './electricity.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({status: '0'})//源数据查询参数
+const sourceParam = ref({viewType: 'unselected',departServerUrl:'',status: '0'})//源数据查询参数
+const businessParam = ref({departServerUrl:'',status: '0'})//源数据查询参数
+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 = {status: '0'};
+  //源数据
+  sourceParam.value = { viewType: 'unselected',departServerUrl:org.orgCode,status: '0'};
+  //已选择
+  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;
+    sourceParam.value.status = queryParam.value.status;
+    sourceComRef.value.reloadData();
+  }else{
+    businessParam.value.address = queryParam.value.address;
+    businessParam.value.departId = queryParam.value.departId;
+    businessParam.value.nuId = queryParam.value.nuId;
+    businessParam.value.status = queryParam.value.status;
+    businessComRef.value.reloadData();
+  }
+}
+
+function searchReset() {
+  queryParam.value = {
+    status: '0'
+  };
+  if(dataType.value=='source'){
+    let vt = sourceParam.value.viewType;
+    let dsu = sourceParam.value.departServerUrl;
+    sourceParam.value = { viewType: vt,departServerUrl:dsu,status: '0' };
+  }else{
+    let dsu = businessParam.value.departServerUrl;
+    businessParam.value = { departServerUrl: dsu,status: '0' };
+  }
+}
+
+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){
+  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())
+  await syncDevicesApi(arr);
+  sourceComRef.value.reloadData();
+  businessComRef.value.reloadData();
+  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>