diff --git a/src/assets/iot/a1.png b/src/assets/iot/a1.png
new file mode 100644
index 0000000..8ae04dd
Binary files /dev/null and b/src/assets/iot/a1.png differ
diff --git a/src/assets/iot/a10.png b/src/assets/iot/a10.png
new file mode 100644
index 0000000..d14400a
Binary files /dev/null and b/src/assets/iot/a10.png differ
diff --git a/src/assets/iot/a11.png b/src/assets/iot/a11.png
new file mode 100644
index 0000000..6df1764
Binary files /dev/null and b/src/assets/iot/a11.png differ
diff --git a/src/assets/iot/a12.png b/src/assets/iot/a12.png
new file mode 100644
index 0000000..001070a
Binary files /dev/null and b/src/assets/iot/a12.png differ
diff --git a/src/assets/iot/a13.png b/src/assets/iot/a13.png
new file mode 100644
index 0000000..501b4f1
Binary files /dev/null and b/src/assets/iot/a13.png differ
diff --git a/src/assets/iot/a14.png b/src/assets/iot/a14.png
new file mode 100644
index 0000000..5d6499c
Binary files /dev/null and b/src/assets/iot/a14.png differ
diff --git a/src/assets/iot/a15.png b/src/assets/iot/a15.png
new file mode 100644
index 0000000..333dd19
Binary files /dev/null and b/src/assets/iot/a15.png differ
diff --git a/src/assets/iot/a2.png b/src/assets/iot/a2.png
new file mode 100644
index 0000000..1a6bf6c
Binary files /dev/null and b/src/assets/iot/a2.png differ
diff --git a/src/assets/iot/a3.png b/src/assets/iot/a3.png
new file mode 100644
index 0000000..a3de4ac
Binary files /dev/null and b/src/assets/iot/a3.png differ
diff --git a/src/assets/iot/a4.png b/src/assets/iot/a4.png
new file mode 100644
index 0000000..0afa16d
Binary files /dev/null and b/src/assets/iot/a4.png differ
diff --git a/src/assets/iot/a5.png b/src/assets/iot/a5.png
new file mode 100644
index 0000000..ed05722
Binary files /dev/null and b/src/assets/iot/a5.png differ
diff --git a/src/assets/iot/a6.png b/src/assets/iot/a6.png
new file mode 100644
index 0000000..81d4fe8
Binary files /dev/null and b/src/assets/iot/a6.png differ
diff --git a/src/assets/iot/a7.png b/src/assets/iot/a7.png
new file mode 100644
index 0000000..9a954d5
Binary files /dev/null and b/src/assets/iot/a7.png differ
diff --git a/src/assets/iot/a8.png b/src/assets/iot/a8.png
new file mode 100644
index 0000000..64be82c
Binary files /dev/null and b/src/assets/iot/a8.png differ
diff --git a/src/assets/iot/a9.png b/src/assets/iot/a9.png
new file mode 100644
index 0000000..8a23cb0
Binary files /dev/null and b/src/assets/iot/a9.png differ
diff --git a/src/views/deviceSync/DeviceSync.api.ts b/src/views/deviceSync/DeviceSync.api.ts
new file mode 100644
index 0000000..2e6a46d
--- /dev/null
+++ b/src/views/deviceSync/DeviceSync.api.ts
@@ -0,0 +1,19 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  getOrgInfo = '/admin/orgapplyinfo/orgApplyInfo/getOrgInfo',
+  
+  addNuIot = '/admin/nuBaseInfo/nuBaseInfo/addNuIot',
+}
+
+/**
+ * 获取机构详细信息（包含sys_depart信息）
+ * @param params orgCode部门编码 不传查所有
+ * @returns
+ */
+export const getOrgInfo = (params) => defHttp.get({ url: Api.getOrgInfo, params });
+
+
+export const addNuIot = (params, isUpdate) => {
+  return defHttp.post({ url: Api.addNuIot, params }, { isTransformResponse: false });
+};
diff --git a/src/views/deviceSync/DeviceSync.data.ts b/src/views/deviceSync/DeviceSync.data.ts
new file mode 100644
index 0000000..4ba1c9a
--- /dev/null
+++ b/src/views/deviceSync/DeviceSync.data.ts
@@ -0,0 +1,176 @@
+import {BasicColumn} from '/@/components/Table';
+import {FormSchema} from '/@/components/Table';
+import { rules} from '/@/utils/helper/validator';
+import { render } from '/@/utils/common/renderUtils';
+import { getWeekMonthQuarterYear } from '/@/utils';
+//列表数据
+export const baseSxtColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: "center",
+    dataIndex: 'sn',
+    width: 120,
+  },
+  {
+    title: '设备名称',
+    align: "center",
+    dataIndex: 'deviceName'
+  },
+  {
+    title: '设备状态',
+    align: "center",
+    dataIndex: 'deviceStatus_dictText',
+    width: 120,
+  },
+  {
+    title: '设备型号',
+    align: "center",
+    dataIndex: 'deviceModel',
+    width: 220,
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+
+//列表数据
+export const baseDbColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: "center",
+    dataIndex: 'address',
+  },
+  {
+    title: '设备状态',
+    align: "center",
+    dataIndex: 'relayState',
+    customRender:({record})=>{
+      return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
+    },
+  },
+  {
+    title: '在线状态',
+    align: "center",
+    dataIndex: 'online',
+    customRender:({record})=>{
+      return record.online?(record.online=='true'?'在线':'离线'):'';
+    },
+  },
+  {
+    title: '信号强度',
+    align: "center",
+    dataIndex: 'csq',
+    customRender:({record})=>{
+      if(record.csq){
+        if(record.csq < 10){
+          return '低';
+        }else if(record.csq > 20){
+          return '高';
+        }else{
+          return '中';
+        }
+      }else{
+        return '';
+      }
+    }
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+
+//列表数据
+export const baseSbColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: "center",
+    dataIndex: 'address',
+  },
+  {
+    title: '设备状态',
+    align: "center",
+    dataIndex: 'relayState',
+    customRender:({record})=>{
+      return record.relayState?(record.relayState=='1'?'开阀':'关阀'):'';
+    },
+  },
+  {
+    title: '在线状态',
+    align: "center",
+    dataIndex: 'online',
+    customRender:({record})=>{
+      return record.online?(record.online=='true'?'在线':'离线'):'';
+    },
+  },
+  {
+    title: '信号强度',
+    align: "center",
+    dataIndex: 'csq',
+    customRender:({record})=>{
+      if(record.csq){
+        if(record.csq < 10){
+          return '低';
+        }else if(record.csq > 20){
+          return '高';
+        }else{
+          return '中';
+        }
+      }else{
+        return '';
+      }
+    }
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+
+
+
+//列表数据
+export const baseWsdColumns: BasicColumn[] = [
+  {
+    title: 'SN',
+    align: "center",
+    dataIndex: 'sn'
+  },
+  {
+    title: '设备名称',
+    align: "center",
+    dataIndex: 'deviceName'
+  },
+  {
+    title: '在线状态',
+    align: "center",
+    dataIndex: 'status',
+    customRender:({record})=>{
+      return record.status?(record.status=='0'?'在线':'离线'):'';
+    },
+  },
+  {
+    title: '启用状态',
+    align: "center",
+    dataIndex: 'delFlag',
+    customRender:({record})=>{
+      return record.delFlag?(record.delFlag=='0'?'启用':'停用'):'';
+    },
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
\ No newline at end of file
diff --git a/src/views/deviceSync/compoents/AddNuIotForm.vue b/src/views/deviceSync/compoents/AddNuIotForm.vue
new file mode 100644
index 0000000..0bcacc4
--- /dev/null
+++ b/src/views/deviceSync/compoents/AddNuIotForm.vue
@@ -0,0 +1,197 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <JFormContainer :disabled="disabled">
+      <template #detail>
+        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"
+          name="NuBaseInfoForm">
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="区域名称" v-bind="validateInfos.nuName" id="NuBaseInfoForm-nuName" name="nuName">
+                <a-input v-model:value="formData.nuName" placeholder="区域名称自动生成" allow-clear
+                  :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="区域编码" v-bind="validateInfos.nuId" id="NuBaseInfoForm-nuId" name="nuId">
+                <a-input v-model:value="formData.nuId" placeholder="编码自动生成" allow-clear
+                  :disabled="true"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="区域标签" v-bind="validateInfos.areaFlag" id="NuBaseInfoForm-areaFlag" name="areaFlag">
+                <j-dict-select-tag v-model:value="formData.areaFlag" dictCode="nu_type" placeholder="请选择区域标签"
+                  allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="摄像头" v-bind="validateInfos.iotSn" id="NuBaseInfoForm-iotSn" name="iotSn">
+                <a-input-search v-model:value="formData.iotSn" placeholder="请选择摄像头" enter-button="选择" readonly @search="chercSxt" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </template>
+    </JFormContainer>
+    <CheckSxtModal ref="checkSxtModal" @success="handleSxtSuccess"/>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { getValueType } from '/@/utils';
+import { addNuIot } from '../DeviceSync.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+import CheckSxtModal from '/@/views/deviceSync/compoents/CheckSxtModal.vue'
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true },
+});
+const formRef = ref();
+const checkSxtModal = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  nuName: '',
+  nuId: '',
+  orgCode: '',
+  areaFlag: '',
+  status: '',
+  iotSn:'',
+});
+const orgInfo = ref<any>({})
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  areaFlag : [{ required: true, message: '请选择区域标签!'},],
+  iot : [{ required: true, message: '请选择摄像头!'},],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+//选择摄像头
+function chercSxt(){
+  checkSxtModal.value.disabled = true;
+  checkSxtModal.value.init({})
+
+}
+//选择摄像头成功
+function handleSxtSuccess(record) {
+console.log("🚀 ~ handleSxtSuccess ~ record:", record)
+  formData.iotSn = record.sn;
+}
+
+/**
+ * 新增
+ */
+function add(record) {
+  console.log("🚀 ~ add ~ record:", record)
+  orgInfo.value = record;
+  edit(record);
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+  });
+}
+//选择摄像头
+function onSearch() {
+  console.log('orgInfo', orgInfo.value);
+  formData.iot = '111';
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  try {
+    // 触发表单验证
+    await validate();
+  } catch ({ errorFields }) {
+    if (errorFields) {
+      const firstField = errorFields[0];
+      if (firstField) {
+        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
+      }
+    }
+    return Promise.reject(errorFields);
+  }
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+  if (!model.id) {
+    model.status = "0";
+  }
+  await addNuIot(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success("暂存成功！");
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  padding: 14px;
+}
+</style>
diff --git a/src/views/deviceSync/compoents/AddNuIotModal.vue b/src/views/deviceSync/compoents/AddNuIotModal.vue
new file mode 100644
index 0000000..1a5246e
--- /dev/null
+++ b/src/views/deviceSync/compoents/AddNuIotModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <NuBaseInfoForm ref="registerForm" @ok="submitCallback" :orgCode="orgCode" :formDisabled="disableSubmit"
+      :formBpm="false"></NuBaseInfoForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import NuBaseInfoForm from './AddNuIotForm.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']);
+
+/**
+ * 新增
+ */
+function add(record) {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add(record);
+  });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
+</script>
+
+<style lang="less">
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/CheckDbForm.vue b/src/views/deviceSync/compoents/CheckDbForm.vue
new file mode 100644
index 0000000..0fe9bff
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckDbForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="p-2">
+    <SectionDivider :title="'电表列表'" />
+    <a-table :columns="baseDbColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleSelect(record)">选择</a>
+          </span>
+        </template>
+      </template>
+    </a-table>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { baseDbColumns } from '../DeviceSync.data';
+  import { Pagination } from 'ant-design-vue';
+
+  const formRef = ref();
+  const queryParam = reactive<any>({checkType:''});
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  const dataList= ref<any>([]);
+  const checkDataList= ref<any>([]);
+  const baseIotInfo= ref<any>({});
+  const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
+  
+
+  /**
+   * 初始化
+   */
+  function init(record) {
+    console.log("🚀 ~ init ~ record:", record)
+    baseIotInfo.value = record;
+    queryParam.pageNo = 1;
+    queryParam.checkType = '0';
+    getDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  function handleTableChange(record){
+    queryParam.pageNo = record.current;
+    getDataList();
+  }
+  /**
+   * 获取数据列表
+   */
+  function getDataList() { 
+    queryParam.pageSize = pageParams.value.pageSize;
+    defHttp.get({ url: '/iot/tq/electricityMeter/list',params:queryParam }).then((res) => { 
+      dataList.value = res;
+      pageParams.value.total = res.total;
+    });
+  }
+
+  function handleSelect(record){
+    emit("ok",record)
+  }
+  /**
+   * 提交数据
+   */
+  function submitForm() {  
+
+  }
+
+
+  defineExpose({
+    init,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .jcxxClass{
+    margin-left: 35px;
+  }
+</style>
diff --git a/src/views/deviceSync/compoents/CheckDbModal.vue b/src/views/deviceSync/compoents/CheckDbModal.vue
new file mode 100644
index 0000000..f935b1d
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckDbModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <DbForm ref="registerForm" @ok="submitCallback"></DbForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import DbForm from './CheckDbForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '电表';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(record) {
+    handleCancel();
+    emit('success',record);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/CheckSbForm.vue b/src/views/deviceSync/compoents/CheckSbForm.vue
new file mode 100644
index 0000000..56b8191
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckSbForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="p-2">
+    <SectionDivider :title="'水表列表'" />
+    <a-table :columns="baseSbColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleSelect(record)">选择</a>
+          </span>
+        </template>
+      </template>
+    </a-table>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { baseSbColumns } from '../DeviceSync.data';
+  import { Pagination } from 'ant-design-vue';
+
+  const formRef = ref();
+  const queryParam = reactive<any>({checkType:''});
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  const dataList= ref<any>([]);
+  const checkDataList= ref<any>([]);
+  const baseIotInfo= ref<any>({});
+  const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
+  
+
+  /**
+   * 初始化
+   */
+  function init(record) {
+    console.log("🚀 ~ init ~ record:", record)
+    baseIotInfo.value = record;
+    queryParam.pageNo = 1;
+    queryParam.checkType = '0';
+    getDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  function handleTableChange(record){
+    queryParam.pageNo = record.current;
+    getDataList();
+  }
+  /**
+   * 获取数据列表
+   */
+  function getDataList() { 
+    queryParam.pageSize = pageParams.value.pageSize;
+    defHttp.get({ url: '/iot/tq/waterMeter/list',params:queryParam }).then((res) => { 
+      dataList.value = res;
+      pageParams.value.total = res.total;
+    });
+  }
+
+  function handleSelect(record){
+    emit("ok",record)
+  }
+  /**
+   * 提交数据
+   */
+  function submitForm() {  
+
+  }
+
+
+  defineExpose({
+    init,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .jcxxClass{
+    margin-left: 35px;
+  }
+</style>
diff --git a/src/views/deviceSync/compoents/CheckSbModal.vue b/src/views/deviceSync/compoents/CheckSbModal.vue
new file mode 100644
index 0000000..44968b9
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckSbModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <CheckSbForm ref="registerForm" @ok="submitCallback"></CheckSbForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import CheckSbForm from './CheckSbForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '电表';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(record) {
+    handleCancel();
+    emit('success',record);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/CheckSxtForm.vue b/src/views/deviceSync/compoents/CheckSxtForm.vue
new file mode 100644
index 0000000..455993e
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckSxtForm.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="p-2">
+    <SectionDivider :title="'摄像头列表'" />
+    <a-table :columns="baseSxtColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleSelect(record)">选择</a>
+          </span>
+        </template>
+      </template>
+    </a-table>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { baseSxtColumns } from '../DeviceSync.data';
+  import { Pagination } from 'ant-design-vue';
+
+  const formRef = ref();
+  const queryParam = reactive<any>({checkType:''});
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  const dataList= ref<any>([]);
+  const checkDataList= ref<any>([]);
+  const baseIotInfo= ref<any>({});
+  const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
+  
+
+  /**
+   * 初始化
+   */
+  function init(record) {
+    console.log("🚀 ~ init ~ record:", record)
+    baseIotInfo.value = record;
+    queryParam.pageNo = 1;
+    queryParam.checkType = '0';
+    getDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  function handleTableChange(record){
+    queryParam.pageNo = record.current;
+    getDataList();
+  }
+  /**
+   * 获取数据列表
+   */
+  function getDataList() { 
+    queryParam.pageSize = pageParams.value.pageSize;
+    defHttp.get({ url: '/iot/tplink/cameraInfo/list',params:queryParam }).then((res) => { 
+      dataList.value = res;
+      pageParams.value.total = res.total;
+    });
+  }
+  /**
+   * 选择摄像头
+   */
+  function handleSelect(record){
+    console.log("🚀 ~ handleSelect ~ record:", record)
+    emit("ok",record)
+  }
+  function handleUnSelect(record){ 
+    checkDataList.value.records = checkDataList.value.records.filter(item => item.id !== record.id)
+  }
+  /**
+   * 提交数据
+   */
+  function submitForm() { 
+    // const list = checkDataList.value.records;
+    // const orgInfo = baseIotInfo.value.orgInfo;
+    // const params = {nuId:baseIotInfo.value.nuId,
+    // nuName:baseIotInfo.value.nuName,
+    // dataSourceCode:baseIotInfo.value.sysOrgCode,
+    // departId: orgInfo.id,
+    // departName: orgInfo.departName,
+    // list}
+    // defHttp.post({url:"/iot/tplink/cameraInfo/syncCameraList",params}).then((res)=>{ 
+    //   console.log("🚀 ~ submitForm ~ res:", res)
+    //   emit("ok")
+    // })
+
+  }
+
+
+  defineExpose({
+    init,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .jcxxClass{
+    margin-left: 35px;
+  }
+</style>
diff --git a/src/views/deviceSync/compoents/CheckSxtModal.vue b/src/views/deviceSync/compoents/CheckSxtModal.vue
new file mode 100644
index 0000000..8b84b08
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckSxtModal.vue
@@ -0,0 +1,71 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <SxtForm ref="registerForm" @ok="submitCallback"></SxtForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <!-- <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> -->
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import SxtForm from './CheckSxtForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '摄像头';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(record) {
+    handleCancel();
+    emit('success',record);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/CheckWsdjForm.vue b/src/views/deviceSync/compoents/CheckWsdjForm.vue
new file mode 100644
index 0000000..eaecf5d
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckWsdjForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="p-2">
+    <SectionDivider :title="'温湿度计列表'" />
+    <a-table :columns="baseWsdColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleSelect(record)">选择</a>
+          </span>
+        </template>
+      </template>
+    </a-table>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+  import { defHttp } from '/@/utils/http/axios';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { baseWsdColumns } from '../DeviceSync.data';
+  import { Pagination } from 'ant-design-vue';
+
+  const formRef = ref();
+  const queryParam = reactive<any>({checkType:''});
+  const emit = defineEmits(['register', 'ok']);
+  const { createMessage } = useMessage();
+  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+  const confirmLoading = ref<boolean>(false);
+  const dataList= ref<any>([]);
+  const checkDataList= ref<any>([]);
+  const baseIotInfo= ref<any>({});
+  const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
+  
+
+  /**
+   * 初始化
+   */
+  function init(record) {
+    console.log("🚀 ~ init ~ record:", record)
+    baseIotInfo.value = record;
+    queryParam.pageNo = 1;
+    queryParam.checkType = '0';
+    getDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  function handleTableChange(record){
+    queryParam.pageNo = record.current;
+    getDataList();
+  }
+  /**
+   * 获取数据列表
+   */
+  function getDataList() { 
+    queryParam.pageSize = pageParams.value.pageSize;
+    defHttp.get({ url: '/iot/yiweilian/humidDevice/list',params:queryParam }).then((res) => { 
+      dataList.value = res;
+      pageParams.value.total = res.total;
+    });
+  }
+
+  function handleSelect(record){
+    emit("ok",record)
+  }
+  /**
+   * 提交数据
+   */
+  function submitForm() {  
+
+  }
+
+
+  defineExpose({
+    init,
+    submitForm,
+  });
+</script>
+
+<style lang="less" scoped>
+  .antd-modal-form {
+    padding: 14px;
+  }
+  .jcxxClass{
+    margin-left: 35px;
+  }
+</style>
diff --git a/src/views/deviceSync/compoents/CheckWsdjModal.vue b/src/views/deviceSync/compoents/CheckWsdjModal.vue
new file mode 100644
index 0000000..cb51718
--- /dev/null
+++ b/src/views/deviceSync/compoents/CheckWsdjModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <CheckWsdjForm ref="registerForm" @ok="submitCallback"></CheckWsdjForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import CheckWsdjForm from './CheckWsdjForm.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const title = ref<string>('');
+  const width = ref<string>('80%');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '电表';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+  /**
+   * 确定按钮点击事件
+   */
+  function handleOk() {
+    registerForm.value.submitForm();
+  }
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback(record) {
+    handleCancel();
+    emit('success',record);
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/DbList.vue b/src/views/deviceSync/compoents/DbList.vue
new file mode 100644
index 0000000..40237c4
--- /dev/null
+++ b/src/views/deviceSync/compoents/DbList.vue
@@ -0,0 +1,188 @@
+<template>
+      <a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+          <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="18" style="font-size: 14px;">
+                      <div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.address}}</span></div>
+                      <div style="font-size: 12px;">设备类型：电表</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+              <a-row>
+                <a-col :span="12" style="margin-top: -10px;">
+                  <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
+                </a-col>
+                <a-col :span="12" style="margin-top: -10px;">
+                  用电量：{{item.eleValue?item.eleValue:'0.0'}}KWH
+                </a-col>
+                <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
+            </a-col>
+            <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              维修状态：
+              <span v-if="item.maintainStatus=='0'">正常</span>
+              <span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
+              <span v-if="item.maintainStatus=='2'">报废</span>
+            </a-col>
+            <a-col :span="24" style="text-align: center;margin-top: 20px;">
+              <span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
+                <span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">抄表</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
+                <span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">移除</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
+                <span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">维修</span>
+              </span>
+            </a-col>
+          </a-row> 
+        </a-card>
+      </a-col>
+    
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
+      <div style="padding: 10px;text-align: center;">
+        <div style="line-height: 60px;">
+          维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
+        </div>
+      </div>
+    </a-modal>
+</template>
+
+<script lang="ts" name="iot-nuIotCameraInfo" setup>
+import {ref} from 'vue';
+import {Modal} from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
+import { defHttp } from '/@/utils/http/axios';
+  
+ const wxvisible = ref<boolean>(false);
+ const bxInfo = ref<any>({});
+ const maintainStatus = ref<string>('');
+const previewModal = ref();
+const { createMessage } = useMessage();
+  const emit = defineEmits(['register', 'ok']);
+  const props = defineProps({
+    tableData: { type: Object, default: () => ([]) },
+  });
+const plainOptions = [
+  { label: '正常', value: '0' },
+  { label: '报废', value: '2' },
+];
+  function handleWxOk() {
+    if(!maintainStatus.value){
+      createMessage.error('请选择报修状态！');
+    }else{
+      wxvisible.value = false;
+      var params = {
+        id: bxInfo.value.id,
+        maintainStatus: maintainStatus.value,
+      }
+      defHttp.post({ url: '/iot/tq/electricityMeter/edit', params }).then(() => {
+        emit("ok");
+      });
+      
+    }
+  }
+  /**
+   * 维修
+   */
+  function handleWeixiu(record){
+    bxInfo.value = record;
+    wxvisible.value = true;
+  }
+  
+  // 抄电表
+  async function handleRead(record) {
+    const params = {
+      'cid' : record.cid,
+      'address' : record.address,
+    };
+    await defHttp.get({ url: '/iot/tq/electricityMeter/eleRead', params }).then((res) => { 
+    console.log("🚀 ~ handleRead ~ res:", res)
+    });
+    setTimeout(() => {
+      emit("ok");
+    }, 4000);
+  }
+  /**
+   * 删除
+   */
+  function handleDel(record) {
+    console.log("🚀 ~ handleDel ~ record:", record)
+      Modal.confirm({
+        title: '移除电表',
+        content: '是否要移除此电表？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: async () => {
+          // todo 删除
+          defHttp.post({ url: '/iot/tq/electricityMeter/updateDepartById', params: { id: record.id } }).then(() => {
+            emit("ok");
+          });
+        },
+      });
+  }
+
+</script>
+
+<style lang="less" scoped>
+
+
+.zxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+
+
+.ytbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+.wtbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+</style>
diff --git a/src/views/deviceSync/compoents/DevicesForm.vue b/src/views/deviceSync/compoents/DevicesForm.vue
new file mode 100644
index 0000000..bb64fef
--- /dev/null
+++ b/src/views/deviceSync/compoents/DevicesForm.vue
@@ -0,0 +1,225 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-row>
+      <a-col :span="24">
+        <a-button type="primary" @click="checkSxt" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 摄像头</a-button>
+        <a-button type="primary" @click="checkDb" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 电表</a-button>
+        <a-button type="primary" @click="checkSb" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 水表</a-button>
+        <a-button type="primary" @click="checkWsdj" preIcon="ant-design:plus-outlined" style="margin-left:10px;"> 温湿度计</a-button>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:sync-outlined" style="margin-left:10px;"> 同步</a-button>
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:snippets-outlined" style="margin-left:10px;"> 日志</a-button>
+      </a-col>
+      <a-col :span="24">
+        <a-row>
+            <SxtList :tableData="dataList.cameraInfoList" @ok="hadleSuccess"></SxtList>
+            <DbList :tableData="dataList.electricityMeterList" @ok="hadleSuccess"></DbList>
+            <SbList :tableData="dataList.waterMeterList" @ok="hadleSuccess"></SbList>
+            <WsdjList :tableData="dataList.humidDeviceList" @ok="hadleSuccess"></WsdjList>
+        </a-row>
+      </a-col>
+    </a-row>
+    <CheckSxtModal ref="checkSxtModal" @success="handleSxtSuccess"/>
+    <CheckDbModal ref="checkDbModal" @success="handleDbSuccess"/>
+    <CheckSbModal ref="checkSbModal" @success="handleSbSuccess"/>
+    <CheckWsdjModal ref="checkWsdjModal" @success="handleWsdjSuccess"/>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { getValueType } from '/@/utils';
+import { addNuIot } from '../DeviceSync.api';
+import { Form } from 'ant-design-vue';
+import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
+import SxtList from '/@/views/deviceSync/compoents/SxtList.vue'
+import DbList from '/@/views/deviceSync/compoents/DbList.vue'
+import SbList from '/@/views/deviceSync/compoents/SbList.vue'
+import WsdjList from '/@/views/deviceSync/compoents/WsdjList.vue'
+import CheckSxtModal from '/@/views/deviceSync/compoents/CheckSxtModal.vue'
+import CheckDbModal from '/@/views/deviceSync/compoents/CheckDbModal.vue'
+import CheckSbModal from '/@/views/deviceSync/compoents/CheckSbModal.vue'
+import CheckWsdjModal from '/@/views/deviceSync/compoents/CheckWsdjModal.vue'
+
+
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => ({}) },
+  formBpm: { type: Boolean, default: true },
+});
+const formRef = ref();
+const checkSxtModal = ref();
+const checkDbModal = ref();
+const checkSbModal = ref();
+const checkWsdjModal = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  nuName: '',
+  nuId: '',
+  orgCode: '',
+  areaFlag: '',
+  status: '',
+  iotSn:'',
+});
+const nuInfo = ref<any>({})
+const dataList = ref<any>({cameraInfoList:[], waterMeterList:[], electricityMeterList:[], humidDeviceList:[]})
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = reactive({
+  areaFlag : [{ required: true, message: '请选择区域标签!'},],
+  iot : [{ required: true, message: '请选择摄像头!'},],
+});
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+//选择温湿度计
+function checkWsdj(){
+  checkWsdjModal.value.disabled = true;
+  checkWsdjModal.value.init({nuId:nuInfo.value.nuId})
+}
+//选择水表
+function checkSb(){
+  checkSbModal.value.disabled = true;
+  checkSbModal.value.init({nuId:nuInfo.value.nuId})
+}
+//选择电表
+function checkDb(){
+  checkDbModal.value.disabled = true;
+  checkDbModal.value.init({nuId:nuInfo.value.nuId})
+}
+//选择摄像头
+function checkSxt(){
+  checkSxtModal.value.disabled = true;
+  checkSxtModal.value.init({nuId:nuInfo.value.nuId})
+}
+//选择摄像头成功回调
+function handleSxtSuccess(record) {
+  formData.iotSn = record.sn;
+  var params = {
+        id: record.id,
+        nuId: nuInfo.value.nuId,
+        nuName: nuInfo.value.nuId,
+        departId:nuInfo.value.departId,
+        departName:nuInfo.value.departName,
+        departServerUrl: nuInfo.value.departServerUrl,
+      }
+      defHttp.post({ url: '/iot/tplink/cameraInfo/edit', params }).then(() => {
+        reload();
+      });
+}
+
+//选择电表成功回调
+function handleDbSuccess(record) {
+  var params = {
+        id: record.id,
+        nuId: nuInfo.value.nuId,
+        nuName: nuInfo.value.nuId,
+        departId:nuInfo.value.departId,
+        departName:nuInfo.value.departName,
+        departServerUrl: nuInfo.value.departServerUrl,
+  }
+  defHttp.post({ url: '/iot/tq/electricityMeter/edit', params }).then(() => {
+    reload();
+  });
+  console.log("🚀 ~ handleDbSuccess ~ params:", params)
+}
+
+//选择水表成功回调
+function handleSbSuccess(record) {
+  var params = {
+        id: record.id,
+        nuId: nuInfo.value.nuId,
+        nuName: nuInfo.value.nuId,
+        departId:nuInfo.value.departId,
+        departName:nuInfo.value.departName,
+        departServerUrl: nuInfo.value.departServerUrl,
+  }
+  defHttp.post({ url: '/iot/tq/waterMeter/edit', params }).then(() => {
+    reload();
+  });
+  console.log("🚀 ~ handleDbSuccess ~ params:", params)
+}
+
+//选择温湿度计成功回调
+function handleWsdjSuccess(record) {
+  var params = {
+        id: record.id,
+        nuId: nuInfo.value.nuId,
+        nuName: nuInfo.value.nuId,
+        departId:nuInfo.value.departId,
+        departName:nuInfo.value.departName,
+        departServerUrl: nuInfo.value.departServerUrl,
+  }
+  defHttp.post({ url: '/iot/yiweilian/humidDevice/edit', params }).then(() => {
+    reload();
+  });
+  console.log("🚀 ~ handleDbSuccess ~ params:", params)
+}
+function hadleSuccess(){
+  reload();
+}
+/**
+ * 新增
+ */
+function add(record) {
+  console.log("🚀 ~ add ~ record:", record)
+  nextTick(() => {
+    resetFields();
+    nuInfo.value = record;
+    reload();
+  });
+}
+
+function reload() {
+  defHttp.get({ url: '/iot/ddvicesIot/list', params: { nuId: nuInfo.value.nuId } }).then((res) => {
+    console.log("🚀 ~ reload ~ res:", res)
+    dataList.value = res;
+  });
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  nextTick(() => {
+    resetFields();
+  });
+}
+
+/**
+ * 提交数据
+ */
+async function submitForm() { 
+}
+
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  padding: 14px;
+}
+</style>
diff --git a/src/views/deviceSync/compoents/DevicesModal.vue b/src/views/deviceSync/compoents/DevicesModal.vue
new file mode 100644
index 0000000..b297280
--- /dev/null
+++ b/src/views/deviceSync/compoents/DevicesModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <a-drawer :title="title" :width="width"  v-model:visible="visible" :closable="true"
+    :footer-style="{ textAlign: 'right' }" @close="handleCancel">
+    <DevicesForm ref="devicesForm" @ok="submitCallback" :orgCode="orgCode" :formDisabled="disableSubmit"
+      :formBpm="false"></DevicesForm>
+    <template #footer>
+      <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
+      <!-- <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button> -->
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import DevicesForm from './DevicesForm.vue'
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+const title = ref<string>('');
+const width = ref<string>('80%');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const devicesForm = ref();
+const emit = defineEmits(['register', 'success']);
+
+/**
+ * 新增
+ */
+function add(record) {
+  title.value = '设备管理';
+  visible.value = true;
+  nextTick(() => {
+    devicesForm.value.add(record);
+  });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    devicesForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  devicesForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+});
+</script>
+
+<style lang="less">
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/deviceSync/compoents/SbList.vue b/src/views/deviceSync/compoents/SbList.vue
new file mode 100644
index 0000000..2a27095
--- /dev/null
+++ b/src/views/deviceSync/compoents/SbList.vue
@@ -0,0 +1,195 @@
+<template>
+      <a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+          <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="18" style="font-size: 14px;">
+                      <div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.address}}</span></div>
+                      <div style="font-size: 12px;">设备类型：水表</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.relayState=='1'?'zxClass':'lxClass'">{{item.relayState=='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+              <a-row>
+                <a-col :span="12" style="margin-top: -10px;">
+                  <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
+                </a-col>
+                <a-col :span="12" style="margin-top: -10px;">
+                  用水量：{{item.eleValue?item.eleValue:'0.0'}}m³
+                </a-col>
+                <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
+            </a-col>
+            <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              维修状态：
+              <span v-if="item.maintainStatus=='0'">正常</span>
+              <span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
+              <span v-if="item.maintainStatus=='2'">报废</span>
+            </a-col>
+                <!-- <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:18px;">
+                  <span>{{item.eleValue?item.eleValue:'0.00'}}</span>
+                </a-col>
+                <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
+                  <div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
+                  <div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
+                </a-col>-->
+            <a-col :span="24" style="text-align: center;margin-top: 20px;">
+              <span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
+                <span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">抄表</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
+                <span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">移除</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
+                <span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">维修</span>
+              </span>
+            </a-col>
+          </a-row> 
+        </a-card>
+      </a-col>
+    
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
+      <div style="padding: 10px;text-align: center;">
+        <div style="line-height: 60px;">
+          维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
+        </div>
+      </div>
+    </a-modal>
+</template>
+
+<script lang="ts" name="iot-nuIotCameraInfo" setup>
+import {ref} from 'vue';
+import {Modal} from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
+import { defHttp } from '/@/utils/http/axios';
+  
+ const wxvisible = ref<boolean>(false);
+ const bxInfo = ref<any>({});
+ const maintainStatus = ref<string>('');
+const previewModal = ref();
+const { createMessage } = useMessage();
+  const emit = defineEmits(['register', 'ok']);
+  const props = defineProps({
+    tableData: { type: Object, default: () => ([]) },
+  });
+const plainOptions = [
+  { label: '正常', value: '0' },
+  { label: '报废', value: '2' },
+];
+  function handleWxOk() {
+    if(!maintainStatus.value){
+      createMessage.error('请选择报修状态！');
+    }else{
+      wxvisible.value = false;
+      var params = {
+        id: bxInfo.value.id,
+        maintainStatus: maintainStatus.value,
+      }
+      defHttp.post({ url: '/iot/tq/waterMeter/edit', params }).then(() => {
+        emit("ok");
+      });
+      
+    }
+  }
+  /**
+   * 维修
+   */
+  function handleWeixiu(record){
+    bxInfo.value = record;
+    wxvisible.value = true;
+  }
+  
+  // 抄水表
+  async function handleRead(record) {
+    const params = {
+      'cid' : record.cid,
+      'address' : record.address,
+    };
+    await defHttp.get({ url: '/iot/tq/waterMeter/waterRead', params }).then((res) => { 
+    console.log("🚀 ~ handleRead ~ res:", res)
+    });
+    setTimeout(() => {
+      emit("ok");
+    }, 4000);
+  }
+  /**
+   * 删除
+   */
+  function handleDel(record) {
+    console.log("🚀 ~ handleDel ~ record:", record)
+      Modal.confirm({
+        title: '移除水表',
+        content: '是否要移除此水表？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: async () => {
+          // todo 删除
+          defHttp.post({ url: '/iot/tq/waterMeter/updateDepartById', params: { id: record.id } }).then(() => {
+            emit("ok");
+          });
+        },
+      });
+  }
+
+</script>
+
+<style lang="less" scoped>
+
+
+.zxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+
+
+.ytbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+.wtbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+</style>
diff --git a/src/views/deviceSync/compoents/SxtList.vue b/src/views/deviceSync/compoents/SxtList.vue
new file mode 100644
index 0000000..7b92832
--- /dev/null
+++ b/src/views/deviceSync/compoents/SxtList.vue
@@ -0,0 +1,184 @@
+<template>
+      <a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+          <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="18" style="font-size: 14px;">
+                      <div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
+                      <div style="font-size: 12px;">设备类型：摄像头</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.deviceStatus=='1'?'zxClass':'lxClass'">{{item.deviceStatus =='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+          <a-row>
+            <a-col :span="24" style="margin-top: -10px;">
+              <span style="text-align: right;background:#f6f6f6;padding: 2px 10px;border-radius:5px;">NUID: {{item.nuId?item.nuId:'未配置'}}</span>
+            </a-col>
+            <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
+            </a-col>
+            <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              维修状态：
+              <span v-if="item.maintainStatus=='0'">正常</span>
+              <span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
+              <span v-if="item.maintainStatus=='2'">报废</span>
+            </a-col>
+            <a-col :span="24" style="text-align: center;margin-top: 20px;">
+              <span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)">
+                <span class="tbClass"><img src="../../../assets/iot/a14.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">预览</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
+                <span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">移除</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
+                <span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">维修</span>
+              </span>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
+      <div style="padding: 10px;text-align: center;">
+        <div style="line-height: 60px;">
+          维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
+        </div>
+      </div>
+    </a-modal>
+</template>
+
+<script lang="ts" name="iot-nuIotCameraInfo" setup>
+import {ref} from 'vue';
+import {Modal} from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
+import { defHttp } from '/@/utils/http/axios';
+  
+ const wxvisible = ref<boolean>(false);
+ const bxInfo = ref<any>({});
+ const maintainStatus = ref<string>('');
+const previewModal = ref();
+const { createMessage } = useMessage();
+  const emit = defineEmits(['register', 'ok']);
+  const props = defineProps({
+    tableData: { type: Object, default: () => ([]) },
+  });
+const plainOptions = [
+  { label: '正常', value: '0' },
+  { label: '报废', value: '2' },
+];
+  function handleWxOk() {
+    if(!maintainStatus.value){
+      createMessage.error('请选择报修状态！');
+    }else{
+      wxvisible.value = false;
+      var params = {
+        id: bxInfo.value.id,
+        maintainStatus: maintainStatus.value,
+      }
+      defHttp.post({ url: '/iot/tplink/cameraInfo/edit', params }).then(() => {
+        emit("ok");
+      });
+      
+    }
+  }
+  /**
+   * 维修
+   */
+  function handleWeixiu(record){
+    bxInfo.value = record;
+    wxvisible.value = true;
+  }
+  /**
+   * 预览
+   */
+  function handlePreview(record) {
+    previewModal.value.disableSubmit = true;
+    previewModal.value.edit(record);
+  }
+  /**
+   * 删除
+   */
+  function handleDel(record) {
+    console.log("🚀 ~ handleDel ~ record:", record)
+    const list = props.tableData;
+    if(list.length==1){
+      createMessage.error('请至少保留一个摄像头！');
+    }else{
+      Modal.confirm({
+        title: '移除摄像头',
+        content: '是否要移除此摄像头？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: async () => {
+          // todo 删除
+          defHttp.post({ url: '/iot/tplink/cameraInfo/updateDepartById', params: { id: record.id } }).then(() => {
+            emit("ok");
+          });
+        },
+      });
+    }
+    
+  }
+
+</script>
+
+<style lang="less" scoped>
+
+
+.zxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+
+
+.ytbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+.wtbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+</style>
diff --git a/src/views/deviceSync/compoents/WsdjList.vue b/src/views/deviceSync/compoents/WsdjList.vue
new file mode 100644
index 0000000..946afa5
--- /dev/null
+++ b/src/views/deviceSync/compoents/WsdjList.vue
@@ -0,0 +1,193 @@
+<template>
+      <a-col v-for="(item,index) in tableData" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+          <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="18" style="font-size: 14px;">
+                      <div style="font-size: 12px;">SN：<span style="font-weight: bold;">{{item.sn}}</span></div>
+                      <div style="font-size: 12px;">设备类型：温湿度计</div>
+                </a-col>
+                <a-col :span="6" style="text-align: center;padding-top: 4px;">
+                  <div :class="item.status=='1'?'zxClass':'lxClass'">{{item.status=='1'?'在线':'离线'}}</div>
+                </a-col>
+              </a-row>
+          </template>
+              <a-row>
+                <a-col :span="12" style="margin-top: -10px;">
+                  温度：{{item.temperature?item.temperature:'-'}}℃
+                </a-col>
+                <a-col :span="12" style="margin-top: -10px;">
+                  湿度：{{item.humidity?item.humidity:'-'}}%
+                </a-col>
+                <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              同步状态：{{item.syncType =='1'?'已同步':'未同步'}}
+            </a-col>
+            <a-col :span="12" style="text-align: left;margin-top: 10px;">
+              维修状态：
+              <span v-if="item.maintainStatus=='0'">正常</span>
+              <span v-if="item.maintainStatus=='1'" style="color: red;">维修中</span>
+              <span v-if="item.maintainStatus=='2'">报废</span>
+            </a-col>
+                <!-- <a-col :span="14" style="text-align: right;font-size: 44px;font-weight: bold;margin-top:18px;">
+                  <span>{{item.eleValue?item.eleValue:'0.00'}}</span>
+                </a-col>
+                <a-col :span="8" style="padding: 12px 0 0 5px;margin-top:18px;">
+                  <div style="font-size: 12px;margin: 5px 0 -5px 2px;padding:2px;">KWH</div>
+                  <div style="margin-top:-3px;"><span style="background:#eeeeee;padding: 2px;border-radius:5px;font-size:11px;">用电量</span></div>
+                </a-col>-->
+            <a-col :span="24" style="text-align: center;margin-top: 20px;">
+              <span style="display:inline-block;cursor: pointer;" @click="handleRead(item)">
+                <span class="tbClass"><img src="../../../assets/iot/a1.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">抄表</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleDel(item)" v-if="item.syncType=='0'">
+                <span class="tbClass"><img src="../../../assets/iot/a15.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">移除</span>
+              </span>
+              <span style="display:inline-block;cursor: pointer;margin-left:10px;" @click="handleWeixiu(item)" v-if="item.maintainStatus=='1'" >
+                <span class="tbClass"><img src="../../../assets/iot/a6.png" style="width:20px;" /></span><br/>
+                <span class="antTitle">维修</span>
+              </span>
+            </a-col>
+          </a-row> 
+        </a-card>
+      </a-col>
+    <CameraPreviewModal ref="previewModal"></CameraPreviewModal>
+    <a-modal v-model:visible="wxvisible" title="维修" @ok="handleWxOk">
+      <div style="padding: 10px;text-align: center;">
+        <div style="line-height: 60px;">
+          维修状态：<a-radio-group v-model:value="maintainStatus" :options="plainOptions" />
+        </div>
+      </div>
+    </a-modal>
+</template>
+
+<script lang="ts" name="iot-nuIotCameraInfo" setup>
+import {ref} from 'vue';
+import {Modal} from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPreviewModal.vue'
+import { c } from 'node_modules/vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf';
+import { defHttp } from '/@/utils/http/axios';
+  
+ const wxvisible = ref<boolean>(false);
+ const bxInfo = ref<any>({});
+ const maintainStatus = ref<string>('');
+const previewModal = ref();
+const { createMessage } = useMessage();
+  const emit = defineEmits(['register', 'ok']);
+  const props = defineProps({
+    tableData: { type: Object, default: () => ([]) },
+  });
+const plainOptions = [
+  { label: '正常', value: '0' },
+  { label: '报废', value: '2' },
+];
+  function handleWxOk() {
+    if(!maintainStatus.value){
+      createMessage.error('请选择报修状态！');
+    }else{
+      wxvisible.value = false;
+      var params = {
+        id: bxInfo.value.id,
+        maintainStatus: maintainStatus.value,
+      }
+      defHttp.post({ url: '/iot/yiweilian/humidDevice/edit', params }).then(() => {
+        emit("ok");
+      });
+      
+    }
+  }
+  /**
+   * 维修
+   */
+  function handleWeixiu(record){
+    bxInfo.value = record;
+    wxvisible.value = true;
+  }
+  
+  // 抄温湿度计
+  async function handleRead(record) {
+    const params = {
+      'sn' : record.sn,
+    };
+    await defHttp.get({ url: '/iot/yiweilian/humidDevice/updateDeviceRealTime', params }).then((res) => { 
+    console.log("🚀 ~ handleRead ~ res:", res)
+    });
+    setTimeout(() => {
+      emit("ok");
+    }, 4000);
+  }
+  /**
+   * 删除
+   */
+  function handleDel(record) {
+    console.log("🚀 ~ handleDel ~ record:", record)
+      Modal.confirm({
+        title: '移除温湿度计',
+        content: '是否要移除此温湿度计？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: async () => {
+          // todo 删除
+          defHttp.post({ url: '/iot/yiweilian/humidDevice/updateDepartById', params: { id: record.id } }).then(() => {
+            emit("ok");
+          });
+        },
+      });
+  }
+
+</script>
+
+<style lang="less" scoped>
+
+
+.zxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+
+
+.ytbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+.wtbClass{
+  font-size:12px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 20px;
+  color: white;
+  line-height: 20px;
+}
+
+</style>
diff --git a/src/views/deviceSync/index.vue b/src/views/deviceSync/index.vue
new file mode 100644
index 0000000..9587409
--- /dev/null
+++ b/src/views/deviceSync/index.vue
@@ -0,0 +1,433 @@
+<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-label" style="color: #ff4d4f;"> 请先选择机构</span>
+            <span v-else class="base-info-label">{{ orgData?.departName }}</span>
+            <span v-if="orgData" class="base-info-label" style="margin-left:30px;">机构编码：{{ orgData?.orgCode || '-' }}</span>
+          </div>
+          <a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset" style="margin-top:10px;">
+            <span>重新选择</span>
+          </a-button>
+        </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 }">
+            <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>加1盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
+              <p>机构负责人：{{ item.orgLeader }}</p>
+              <p>负责人电话：{{ item.orgLeaderPhone }}</p>
+              <p :title="item.comRegisterAddress">
+                机构地址：{{ item.comRegisterAddress }}</p>
+                <a-divider />
+              <div style="text-align: center;">
+                <a-button type="primary" @click="handleOrgSelected(item)">预览</a-button>
+                <a-button type="primary" @click="handleOrgSelected(item)" style="margin-left:10px;">配置</a-button>
+                <a-button type="primary" @click="handleOrgSelected(item)" style="margin-left:10px;">日志</a-button>
+              </div>
+            </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>
+  <div class="p-2 cardContent" v-show="!orgSelectedCon">
+    <a-row>
+      <a-col :span="24" style="margin-bottom: 10px;">
+        <a-button type="primary" @click="handleAddNuIot">添加区域</a-button>
+        <a-button type="primary" style="margin-left: 10px;">设备预览</a-button>
+      </a-col>
+      <a-col v-for="(item,index) in nuDataList" style="padding: 5px" :key="index" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6">
+        <a-card :title="`NUID：`+item.nuId"
+          :class="['card-3d']"
+          @mouseenter="item.key"
+          @mouseleave="item.key"
+          @click="isSelected = item">
+          <p>单元名称：{{item.nuName}}</p>
+          <p>创建时间：{{item.createTime}}</p>
+          <p>单元类型：{{item.areaFlagText}}</p>
+          <div style="text-align: center;">
+              <a-button size="small" @click="handleSbgl(item)" >设备管理</a-button>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :span="24" v-show="nuDataList.length == 0" >
+        <a-empty />
+      </a-col>
+      
+    </a-row>
+  </div>
+  <AddNuIotModal ref="addNuIotModal" @success="handleNuSuccess"/>
+  <DevicesModal ref="devicesModal" @success="handleNuSuccess"/>
+</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 './DeviceSync.api'
+import AddNuIotModal from './compoents/AddNuIotModal.vue'
+import DevicesModal from './compoents/DevicesModal.vue'
+
+import { defHttp } from '/@/utils/http/axios';
+
+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})
+
+
+
+interface OrganizationData {
+  orgId?: string;
+  departName: string;
+  orgCode: string;
+  franchiseTime?: string;
+  orgLeader?: string;
+  orgLeaderPhone?: string;
+  comRegisterAddress?: string;
+  sysOrgCode: string;
+}
+
+const queryParam = reactive<any>({})
+const pageParams = ref({pageNo: 1, pageSize: 8})
+const orgData = ref<OrganizationData | null>(null);
+const orgSelectedCon = ref(true);
+const addNuIotModal = ref();
+const devicesModal = ref();
+const nuDataList = ref([]);
+const isSelected = ref(false);
+
+// 当前选中的卡片 ID 数组
+const selectedOrgs = ref<string[]>([])
+
+function handleAddNuIot(){
+  addNuIotModal.value.disableSubmit = false;
+  addNuIotModal.value.add(orgData.value)
+}
+
+function handleSbgl(item){
+  item.departId = orgData.value.orgId;
+  item.departName = orgData.value.departName;
+  item.departServerUrl = orgData.value.orgCode;
+  devicesModal.value.disableSubmit = false;
+  devicesModal.value.add(item);
+}
+//添加护理单元及摄像头新增回调
+function handleNuSuccess(){
+  getNuList(orgData.value)
+}
+
+//点击卡片
+const handleOrgSelected = async (org) => {
+  console.log("🚀 ~ handleOrgSelected ~ org:", org)
+  orgData.value = org;
+  orgSelectedCon.value = false;
+  getNuList(org)
+};
+function getNuList(org){
+  defHttp.get({ url: '/admin/nuBaseInfo/nuBaseInfo/getBaseWlsbList', params: {orgCode: org.orgCode} }).then(res => {
+    console.log("🚀 ~ handleOrgSelected ~ res:", res)
+    nuDataList.value = res
+  })
+}
+
+//重新选择
+const orgReset = () => {
+  orgSelectedCon.value = true;
+}
+
+
+/** 数据加载-加载机构卡片 */
+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()
+});
+
+</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;
+  margin-top: 9px;
+
+  .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;
+}
+
+
+.selected-card {
+  border: 2px solid #1890ff;
+  box-shadow: 0 0 8px rgba(24, 144, 255, 0.3);
+}
+
+.cardContent{
+  margin-top: -10px;background:white;margin:0 10px;border-radius:8px;
+}
+
+/* 基础卡片样式 */
+.card-3d {
+  border-radius: 8px;
+  border: 1px solid #f0f0f0; /* 边框增强立体感 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  background: white;
+  position: relative;
+}
+
+/* 鼠标悬停：阴影加深 + 轻微上浮 */
+.card-3d:hover {
+  border: 2px solid #1890ff;
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.4);
+  transform: translate(-3px,-3px);
+}
+ 
+
+</style>
diff --git a/src/views/iotsync/components/OrgApplyInfo.vue b/src/views/iotsync/components/OrgApplyInfo.vue
new file mode 100644
index 0000000..0658f60
--- /dev/null
+++ b/src/views/iotsync/components/OrgApplyInfo.vue
@@ -0,0 +1,392 @@
+<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-label" style="color: #ff4d4f;"> 请先选择机构</span>
+            <span v-else class="base-info-label">{{ orgData?.departName }}</span>
+            <span v-if="orgData" class="base-info-label" style="margin-left:30px;">机构编码：{{ orgData?.orgCode || '-' }}</span>
+          </div>
+          <a-button v-if="!orgSelectedCon" class="reset-btn" type="primary" @click.stop="orgReset" style="margin-top:10px;">
+            <span>重新选择</span>
+          </a-button>
+        </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);
+    //   },
+    // });
+     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;
+  margin-top: 9px;
+
+  .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>