物联管理-新增同步功能

src/views/iot/baseIot/BaseIot.data.ts

@@ -72,4 +72,292 @@ export const checkSxtColumns: BasicColumn[] = [
     dataIndex: 'action',
     width: 120,
   },
+];
+
+
+//列表数据
+export const baseDbColumns: BasicColumn[] = [
+  {
+    title: '设备号',
+    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: 'NUID',
+    align: "center",
+    dataIndex: 'nuId',
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+export const checkDbColumns: BasicColumn[] = [
+  {
+    title: '设备号',
+    align: "center",
+    dataIndex: 'cid',
+  },
+  {
+    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: '设备号',
+    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: 'NUID',
+    align: "center",
+    dataIndex: 'nuId',
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+export const checkSbColumns: BasicColumn[] = [
+  {
+    title: '设备号',
+    align: "center",
+    dataIndex: 'cid',
+  },
+  {
+    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: '设备号',
+    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: 'NUID',
+    align: "center",
+    dataIndex: 'nuId'
+  },
+  {
+    title: '操作',
+    align: "center",
+    dataIndex: 'action',
+    width: 120,
+  },
+];
+
+
+//列表数据
+export const checkWsdColumns: BasicColumn[] = [
+  {
+    title: '设备号',
+    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,
+  },
 ];

src/views/iot/baseIot/CheckBaseIotList.vue

@@ -36,8 +36,6 @@
       </a-row>
     </div>
     <div v-else-if="activeKey==='2'">
-      
-
       <a-row style="padding:10px;">
         <a-col :span="12"><span style="font-size: 18px;">{{orgInfo.departName}} - 物联设备配置</span></a-col>
         <a-col :span="12" style="text-align: right"><a-button @click="activeKey = '1'">返回上一页</a-button></a-col>
@@ -69,6 +67,9 @@
       </a-row>
     </div>
     <SxtModal ref="sxtModal" @success="handleWlsbSuccess"></SxtModal>
+    <DbModal ref="dbModal" @success="handleWlsbSuccess"></DbModal>
+    <SbModal ref="sbModal" @success="handleWlsbSuccess"></SbModal>
+    <WsdModal ref="wsdModal" @success="handleWlsbSuccess"></WsdModal>
   </div>
 </template>
 
@@ -77,9 +78,15 @@
   import { defHttp } from '/@/utils/http/axios';
   import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
   import SxtModal from '/@/views/iot/baseIot/compoents/SxtModal.vue';
+  import DbModal from '/@/views/iot/baseIot/compoents/DbModal.vue';
+  import SbModal from '/@/views/iot/baseIot/compoents/SbModal.vue';
+  import WsdModal from '/@/views/iot/baseIot/compoents/WsdModal.vue';
 
   const formRef = ref();
   const sxtModal = ref();
+  const dbModal = ref();
+  const sbModal = ref();
+  const wsdModal = ref();
   const queryParam = reactive<any>({});
   
   const activeKey= ref('1');
@@ -132,14 +139,20 @@ function searchReset() {
   //选择电表
   function handleDb(item){
     console.log("🚀 ~ handleDb ~ item:", item)
+    item.orgInfo = orgInfo.value;
+    dbModal.value.init(item);
   }
   //选择水表
   function handleSb(item){
     console.log("🚀 ~ handleSb ~ item:", item)
+    item.orgInfo = orgInfo.value;
+    sbModal.value.init(item);
   }
   //选择温湿度计
   function handleWsd(item){
     console.log("🚀 ~ handleWsd ~ item:", item)
+    item.orgInfo = orgInfo.value;
+    wsdModal.value.init(item);
   }
 
   //物联设备同步后刷新列表

src/views/iot/baseIot/compoents/DbForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="p-2">
+    <div style="margin-bottom: 30px;">
+      <SectionDivider :title="'基础信息'" />
+      <span class="jcxxClass">NUID：{{baseIotInfo.nuId}}</span>
+      <span class="jcxxClass">单元名称：{{baseIotInfo.nuName}}</span>
+      <span class="jcxxClass">单元类型：{{baseIotInfo.areaFlagText}}</span>
+    </div>
+    <SectionDivider :title="'电表列表'" />
+    <div style="padding-left: 40px;margin-bottom: 10px;">
+      <span style="font-size:16px;">是否分配：</span>
+      <a-radio-group v-model:value="queryParam.checkType" @change="handleTableChange({current:1})">
+        <a-radio-button value="">全部</a-radio-button>
+        <a-radio-button value="1">已分配</a-radio-button>
+        <a-radio-button value="0">未分配</a-radio-button>
+      </a-radio-group>
+    </div>
+    <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>
+    <SectionDivider :title="'已选择列表'" />
+    <a-table :columns="checkDbColumns" :data-source="checkDataList.records" :pagination="false">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleUnSelect(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,checkDbColumns } from '../BaseIot.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();
+    getCheckDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  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 getCheckDataList(){
+    const params = {nuId:baseIotInfo.value.nuId}
+    defHttp.get({ url: '/iot/tq/electricityMeter/list',params }).then((res) => { 
+      checkDataList.value = res;
+    });
+  }
+
+  function handleSelect(record){
+    if(checkDataList.value.records.some(item => item.id === record.id)){
+      createMessage.error('已选择该设备')
+    }else{
+      checkDataList.value.records.push(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/tq/electricityMeter/syncElectricityList",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>

src/views/iot/baseIot/compoents/DbModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" okText="同步" @cancel="handleCancel" cancelText="关闭">
+    <DbForm ref="registerForm" @ok="submitCallback"></DbForm>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import DbForm from './DbForm.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() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>

src/views/iot/baseIot/compoents/SbForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="p-2">
+    <div style="margin-bottom: 30px;">
+      <SectionDivider :title="'基础信息'" />
+      <span class="jcxxClass">NUID：{{baseIotInfo.nuId}}</span>
+      <span class="jcxxClass">单元名称：{{baseIotInfo.nuName}}</span>
+      <span class="jcxxClass">单元类型：{{baseIotInfo.areaFlagText}}</span>
+    </div>
+    <SectionDivider :title="'水表列表'" />
+    <div style="padding-left: 40px;margin-bottom: 10px;">
+      <span style="font-size:16px;">是否分配：</span>
+      <a-radio-group v-model:value="queryParam.checkType" @change="handleTableChange({current:1})">
+        <a-radio-button value="">全部</a-radio-button>
+        <a-radio-button value="1">已分配</a-radio-button>
+        <a-radio-button value="0">未分配</a-radio-button>
+      </a-radio-group>
+    </div>
+    <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>
+    <SectionDivider :title="'已选择列表'" />
+    <a-table :columns="checkSbColumns" :data-source="checkDataList.records" :pagination="false">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleUnSelect(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,checkSbColumns } from '../BaseIot.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();
+    getCheckDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  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 getCheckDataList(){
+    const params = {nuId:baseIotInfo.value.nuId}
+    defHttp.get({ url: '/iot/tq/waterMeter/list',params }).then((res) => { 
+      checkDataList.value = res;
+    });
+  }
+
+  function handleSelect(record){
+    if(checkDataList.value.records.some(item => item.id === record.id)){
+      createMessage.error('已选择该设备')
+    }else{
+      checkDataList.value.records.push(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/tq/waterMeter/syncWaterList",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>

src/views/iot/baseIot/compoents/SbModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" okText="同步" @cancel="handleCancel" cancelText="关闭">
+    <SbForm ref="registerForm" @ok="submitCallback"></SbForm>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import SbForm from './SbForm.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() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>

src/views/iot/baseIot/compoents/SxtForm.vue

@@ -3,10 +3,18 @@
     <div style="margin-bottom: 30px;">
       <SectionDivider :title="'基础信息'" />
       <span class="jcxxClass">NUID：{{baseIotInfo.nuId}}</span>
-      <span class="jcxxClass">护理单元名称：{{baseIotInfo.nuName}}</span>
+      <span class="jcxxClass">单元名称：{{baseIotInfo.nuName}}</span>
-      <span class="jcxxClass">护理单元类型：{{baseIotInfo.areaFlagText}}</span>
+      <span class="jcxxClass">单元类型：{{baseIotInfo.areaFlagText}}</span>
     </div>
     <SectionDivider :title="'摄像头列表'" />
+    <div style="padding-left: 40px;margin-bottom: 10px;">
+      <span style="font-size:16px;">是否分配：</span>
+      <a-radio-group v-model:value="queryParam.checkType" @change="handleTableChange({current:1})">
+        <a-radio-button value="">全部</a-radio-button>
+        <a-radio-button value="1">已分配</a-radio-button>
+        <a-radio-button value="0">未分配</a-radio-button>
+      </a-radio-group>
+    </div>
     <a-table :columns="baseSxtColumns" :data-source="dataList.records" :pagination="pageParams" @change="handleTableChange" >
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'action'">
@@ -38,7 +46,7 @@
   import { Pagination } from 'ant-design-vue';
 
   const formRef = ref();
-  const queryParam = reactive<any>({});
+  const queryParam = reactive<any>({checkType:''});
   const emit = defineEmits(['register', 'ok']);
   const { createMessage } = useMessage();
   const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@@ -49,6 +57,7 @@
   const baseIotInfo= ref<any>({});
   const pageParams = ref({ pageNo: 1, pageSize: 10, total: 0, showTotal: (total) => `共 ${total} 条数据` })
   
+
   /**
    * 初始化
    */
@@ -56,6 +65,7 @@
     console.log("🚀 ~ init ~ record:", record)
     baseIotInfo.value = record;
     queryParam.pageNo = 1;
+    queryParam.checkType = '0';
     getDataList();
     getCheckDataList();
   }

src/views/iot/baseIot/compoents/WsdForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="p-2">
+    <div style="margin-bottom: 30px;">
+      <SectionDivider :title="'基础信息'" />
+      <span class="jcxxClass">NUID：{{baseIotInfo.nuId}}</span>
+      <span class="jcxxClass">单元名称：{{baseIotInfo.nuName}}</span>
+      <span class="jcxxClass">单元类型：{{baseIotInfo.areaFlagText}}</span>
+    </div>
+    <SectionDivider :title="'温湿度计列表'" />
+    <div style="padding-left: 40px;margin-bottom: 10px;">
+      <span style="font-size:16px;">是否分配：</span>
+      <a-radio-group v-model:value="queryParam.checkType" @change="handleTableChange({current:1})">
+        <a-radio-button value="">全部</a-radio-button>
+        <a-radio-button value="1">已分配</a-radio-button>
+        <a-radio-button value="0">未分配</a-radio-button>
+      </a-radio-group>
+    </div>
+    <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>
+    <SectionDivider :title="'已选择列表'" />
+    <a-table :columns="checkWsdColumns" :data-source="checkDataList.records" :pagination="false">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <span>
+            <a @click="handleUnSelect(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,checkWsdColumns } from '../BaseIot.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();
+    getCheckDataList();
+  }
+  /**
+   * 分页触发方法
+   */
+  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 getCheckDataList(){
+    const params = {nuId:baseIotInfo.value.nuId}
+    defHttp.get({ url: '/iot/yiweilian/humidDevice/list',params }).then((res) => { 
+      checkDataList.value = res;
+    });
+  }
+
+  function handleSelect(record){
+    if(checkDataList.value.records.some(item => item.id === record.id)){
+      createMessage.error('已选择该设备')
+    }else{
+      checkDataList.value.records.push(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/yiweilian/humidDevice/syncHumidList",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>

src/views/iot/baseIot/compoents/WsdModal.vue

@@ -0,0 +1,66 @@
+<template>
+  <j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" okText="同步" @cancel="handleCancel" cancelText="关闭">
+    <WsdForm ref="registerForm" @ok="submitCallback"></WsdForm>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose } from 'vue';
+  import WsdForm from './WsdForm.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() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>