From 5c88ee83d98a418952ca2e96f104ef38075d16b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Wed, 18 Mar 2026 18:10:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E8=81=94=E8=AE=BE=E5=A4=87=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E7=AE=A1=E7=90=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/jeecg/components/JDictSelectTag.vue   |  35 ++-
 .../components/AreaDeviceAddList.vue          |  25 +-
 .../components/AreaDeviceAddModal.vue         |   2 +-
 .../iotManager/components/AreaDeviceList.vue  |  45 +---
 .../iotManager/components/AreaDeviceModal.vue |   4 +-
 src/views/iotManager/components/AreaList.vue  |  44 ++--
 src/views/iotManager/components/LogModal.vue  |   2 +-
 .../components/OrgDeviceAddList.vue           |  26 +-
 .../components/OrgDeviceAddModal.vue          |   2 +-
 .../iotManager/components/OrgDeviceList.vue   | 207 ----------------
 .../iotManager/components/PreviewList.vue     | 226 ++++++++++++++++++
 .../{OrgDeviceModal.vue => PreviewModal.vue}  |  11 +-
 src/views/iotManager/index.vue                |  71 +++++-
 src/views/iotManager/manager.api.ts           |   7 +
 src/views/iotManager/manager.data.ts          |  73 ++++--
 15 files changed, 431 insertions(+), 349 deletions(-)
 delete mode 100644 src/views/iotManager/components/OrgDeviceList.vue
 create mode 100644 src/views/iotManager/components/PreviewList.vue
 rename src/views/iotManager/components/{OrgDeviceModal.vue => PreviewModal.vue} (84%)

diff --git a/src/components/Form/src/jeecg/components/JDictSelectTag.vue b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
index 74bb3bd..cd8717f 100644
--- a/src/components/Form/src/jeecg/components/JDictSelectTag.vue
+++ b/src/components/Form/src/jeecg/components/JDictSelectTag.vue
@@ -1,10 +1,10 @@
 <template>
   <a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state"
-    @change="handleChangeRadio">
+                 @change="handleChangeRadio">
     <template v-for="item in dictOptions" :key="`${item.value}`">
       <a-radio :value="item.value" :disabled="item.disabled">
         <span :class="[useDicColor && item.color ? 'colorText' : '']"
-          :style="{ backgroundColor: `${useDicColor && item.color}` }">
+              :style="{ backgroundColor: `${useDicColor && item.color}` }">
           {{ item.label }}
         </span>
       </a-radio>
@@ -12,7 +12,7 @@
   </a-radio-group>
 
   <a-radio-group v-else-if="compType === CompTypeEnum.RadioButton" v-bind="attrs" v-model:value="state"
-    buttonStyle="solid" @change="handleChangeRadio">
+                 buttonStyle="solid" @change="handleChangeRadio">
     <template v-for="item in dictOptions" :key="`${item.value}`">
       <a-radio-button :value="item.value" :disabled="item.disabled">
         {{ item.label }}
@@ -28,13 +28,14 @@
       </template>
     </a-input>
     <a-select v-else :placeholder="placeholder" v-bind="attrs" v-model:value="state" :filterOption="handleFilterOption"
-      :getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
+              :getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
       <a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
       <template v-for="item in dictOptions" :key="`${item.value}`">
         <a-select-option :value="item.value" :disabled="!ignoreDisabled && item.disabled">
           <span :class="[useDicColor && item.color ? 'colorText' : '']"
-            :style="{ backgroundColor: `${useDicColor && item.color}` }" :title="item.label">
-            {{ item.label }}<span style="color:rgb(255 39 39);">{{ ignoreDisabled && item.disabled ? '(已停用)' : '' }}</span>
+                :style="{ backgroundColor: `${useDicColor && item.color}` }" :title="item.label">
+            {{ item.label }}<span style="color:rgb(255 39 39);">{{ ignoreDisabled && item.disabled ? '(已停用)' : ''
+            }}</span>
           </span>
         </a-select-option>
       </template>
@@ -76,9 +77,10 @@ export default defineComponent({
     },
     style: propTypes.any,
     ignoreDisabled: propTypes.bool.def(false),
-    orgCode:'',//组织机构编码 会切换数据源
+    orgCode: '',//组织机构编码 会切换数据源
+    showLabel: propTypes.bool.def(true)
   },
-  emits: ['options-change', 'change', 'update:value'],
+  emits: ['options-change', 'change', 'update:value', 'upDictCode', 'currentText'],
   setup(props, { emit, refs }) {
     const dictOptions = ref<any[]>([]);
     const attrs = useAttrs();
@@ -127,21 +129,25 @@ export default defineComponent({
     async function initDictData() {
       let { dictCode, stringToNumber } = props;
       //根据字典Code, 初始化字典数组
-      const dictData = await initDictOptions(dictCode,props.orgCode);
-      
+      const dictData = await initDictOptions(dictCode, props.orgCode);
       dictOptions.value = dictData.reduce((prev, next) => {
         if (next) {
           const value = next['value'];
-          prev.push({
+          const value1 = {
             label: next['text'] || next['label'],
             value: stringToNumber ? +value : value,
             disabled: next['status'] == 1,
             color: next['color'],
             ...omit(next, ['text', 'value', 'color']),
-          });
+          }
+          if(!props.showLabel&&next['status'] == 1){
+          }else{
+            prev.push(value1);
+          }
         }
         return prev;
       }, []);
+      emit('upDictCode', dictOptions.value)
     }
 
     function handleChange(e) {
@@ -162,6 +168,11 @@ export default defineComponent({
         }
       } else {
         changeValue = e?.target?.value ?? e;
+        if (!e) {
+          emit('currentText', null)
+        } else {
+          emit('currentText', dictOptions.value.filter(item => item.value == changeValue)[0].label)
+        }
       }
       state.value = changeValue;
 
diff --git a/src/views/iotManager/components/AreaDeviceAddList.vue b/src/views/iotManager/components/AreaDeviceAddList.vue
index 8ee21e6..4db9bc1 100644
--- a/src/views/iotManager/components/AreaDeviceAddList.vue
+++ b/src/views/iotManager/components/AreaDeviceAddList.vue
@@ -9,24 +9,15 @@
             <a-col :lg="6">
               <a-form-item name="deviceType">
                 <template #label><span title="设备类型">设备类型</span></template>
-                <a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
-                  <a-select-option value="摄像头">摄像头</a-select-option>
-                  <a-select-option value="录像机">录像机</a-select-option>
-                  <a-select-option value="交换机">交换机</a-select-option>
-                  <a-select-option value="路由器">路由器</a-select-option>
-                  <a-select-option value="无线AP">无线AP</a-select-option>
-                  <a-select-option value="智能电表">智能电表</a-select-option>
-                  <a-select-option value="智能水表">智能水表</a-select-option>
-                  <a-select-option value="温湿度计">温湿度计</a-select-option>
-                </a-select>
+                <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  allow-clear />
               </a-form-item>
             </a-col>
             <a-col :lg="6">
-              <a-form-item name="izAllocate">
-                <template #label><span title="分配状态">在线状态</span></template>
-                <a-select v-model:value="queryParam.izAllocate" placeholder="请选择在线状态" allow-clear>
-                  <a-select-option value="未分配">未分配</a-select-option>
-                  <a-select-option value="释放">释放</a-select-option>
+              <a-form-item name="deviceStatus">
+                <template #label><span title="在线状态">在线状态</span></template>
+                <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
+                  <a-select-option value="在线">在线</a-select-option>
+                  <a-select-option value="离线">离线</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
@@ -78,6 +69,7 @@ import { useListPage } from '/@/hooks/system/useListPage';
 import { deviceAddColumns } from '../manager.data';
 import { canAddList,addBatch } from '../manager.api';
 import { useUserStore } from '/@/store/modules/user';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 
 const formRef = ref();
 const confirmLoading = ref<boolean>(false);
@@ -103,7 +95,8 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
       fixed: 'right',
     },
     beforeFetch: async (params) => {
-      queryParam.dimension = '区域维度';
+      // queryParam.dimension = '区域维度';
+      queryParam.departId = departId.value;
       return Object.assign(params, queryParam);
     },
   },
diff --git a/src/views/iotManager/components/AreaDeviceAddModal.vue b/src/views/iotManager/components/AreaDeviceAddModal.vue
index accc78f..48afbc4 100644
--- a/src/views/iotManager/components/AreaDeviceAddModal.vue
+++ b/src/views/iotManager/components/AreaDeviceAddModal.vue
@@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
 import AreaDeviceAddList from './AreaDeviceAddList.vue'
 
 const title = ref<string>('');
-const width = ref<number>(1500);
+const width = ref<number>(1200);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
diff --git a/src/views/iotManager/components/AreaDeviceList.vue b/src/views/iotManager/components/AreaDeviceList.vue
index 395f134..4089ab8 100644
--- a/src/views/iotManager/components/AreaDeviceList.vue
+++ b/src/views/iotManager/components/AreaDeviceList.vue
@@ -5,28 +5,19 @@
       <a-form ref="formRef" :model="queryParam" :label-col="labelCol"
               :wrapper-col="wrapperCol">
         <a-row :gutter="24">
-          <a-col :lg="5">
-            <a-form-item name="nuName">
-              <template #label><span title="区域名称">区域名称</span></template>
-              <a-input v-model:value="queryParam.nuName" placeholder="请输入区域名称" allow-clear/>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="5">
+<!--          <a-col :lg="6">-->
+<!--            <a-form-item name="nuName">-->
+<!--              <template #label><span title="区域名称">区域名称</span></template>-->
+<!--              <a-input v-model:value="queryParam.nuName" placeholder="请输入区域名称" allow-clear/>-->
+<!--            </a-form-item>-->
+<!--          </a-col>-->
+          <a-col :lg="6">
             <a-form-item name="deviceType">
               <template #label><span title="设备类型">设备类型</span></template>
-              <a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
-                <a-select-option value="摄像头">摄像头</a-select-option>
-                <a-select-option value="录像机">录像机</a-select-option>
-                <a-select-option value="交换机">交换机</a-select-option>
-                <a-select-option value="路由器">路由器</a-select-option>
-                <a-select-option value="无线AP">无线AP</a-select-option>
-                <a-select-option value="智能电表">智能电表</a-select-option>
-                <a-select-option value="智能水表">智能水表</a-select-option>
-                <a-select-option value="温湿度计">温湿度计</a-select-option>
-              </a-select>
+              <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  allow-clear />
             </a-form-item>
           </a-col>
-          <a-col :lg="5">
+          <a-col :lg="6">
             <a-form-item name="deviceStatus">
               <template #label><span title="在线状态">在线状态</span></template>
               <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
@@ -35,7 +26,7 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :lg="4">
+          <a-col :lg="6">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-col :lg="6">
                 <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
@@ -51,7 +42,6 @@
     <BasicTable @register="registerTable">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加区域设备</a-button>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -61,7 +51,6 @@
       </template>
     </BasicTable>
     <!-- 表单区域 -->
-    <AreaDeviceAddModal ref="registerDrawer" @success="handleSuccess" />
     <LogModal ref="logDrawer" @success="handleSuccess" />
   </div>
 </template>
@@ -73,12 +62,11 @@ import { useListPage } from '/@/hooks/system/useListPage';
 import { areaDeviceColumns } from '../manager.data';
 import { deviceList } from '../manager.api';
 import { useUserStore } from '/@/store/modules/user';
-import AreaDeviceAddModal from './AreaDeviceAddModal.vue';
 import LogModal from './LogModal.vue';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 
 const formRef = ref();
 const queryParam = reactive<any>({});
-const registerDrawer = ref();
 const logDrawer = ref();
 const departId = ref<any>('');
 const nuId = ref<any>('');
@@ -87,7 +75,7 @@ const userStore = useUserStore();
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
-    title: '设备管理',
+    title: '设备预览',
     api: deviceList,
     columns: areaDeviceColumns,
     canResize: false,
@@ -99,6 +87,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     },
     beforeFetch: async (params) => {
       queryParam.dimension = '区域维度';
+      queryParam.departId = departId.value;
       return Object.assign(params, queryParam);
     },
   },
@@ -134,14 +123,6 @@ function getTableAction(record) {
   ];
 }
 
-/**
- * 设备管理
- */
-function handleAdd(){
-  let record = { "departId" : departId.value,"nuId":nuId.value,"orgCode":orgCode.value };
-  registerDrawer.value.disableSubmit = true;
-  registerDrawer.value.edit(record);
-}
 
 /**
  * 设备日志
diff --git a/src/views/iotManager/components/AreaDeviceModal.vue b/src/views/iotManager/components/AreaDeviceModal.vue
index 9d0378d..fd97a55 100644
--- a/src/views/iotManager/components/AreaDeviceModal.vue
+++ b/src/views/iotManager/components/AreaDeviceModal.vue
@@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
 import AreaDeviceList from './AreaDeviceList.vue'
 
 const title = ref<string>('');
-const width = ref<number>(1800);
+const width = ref<number>(1200);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
@@ -37,7 +37,7 @@ function add() {
  * @param record
  */
 function edit(record) {
-  title.value = disableSubmit.value ? '设备管理' : '编辑';
+  title.value = disableSubmit.value ? '设备预览' : '编辑';
   visible.value = true;
   nextTick(() => {
     registerForm.value.init(record);
diff --git a/src/views/iotManager/components/AreaList.vue b/src/views/iotManager/components/AreaList.vue
index a103f96..26a2eee 100644
--- a/src/views/iotManager/components/AreaList.vue
+++ b/src/views/iotManager/components/AreaList.vue
@@ -34,8 +34,6 @@
     <BasicTable @register="registerTable">
       <!--插槽:table标题-->
       <template #tableTitle>
-        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加机构设备</a-button>
-        <a-button type="primary" preIcon="ant-design:unlock-outlined" @click="handleOrgUnbind"> 机构解绑</a-button>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
@@ -45,7 +43,7 @@
       </template>
     </BasicTable>
     <!-- 表单区域 -->
-    <OrgDeviceModal ref="orgDrawer" @success="handleSuccess" />
+    <AreaDeviceAddModal ref="areaAddDrawer" @success="handleSuccess" />
     <AreaDeviceModal ref="areaDrawer" @success="handleSuccess" />
   </div>
 </template>
@@ -58,14 +56,14 @@ import { nuColumns } from '../manager.data';
 import { areaList,unbindOrg } from '../manager.api';
 import { useUserStore } from '/@/store/modules/user';
 import AreaDeviceModal from './AreaDeviceModal.vue';
-import OrgDeviceModal from './OrgDeviceModal.vue';
+import AreaDeviceAddModal from './AreaDeviceAddModal.vue';
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 import {Modal} from "ant-design-vue";
 import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
 
 const formRef = ref();
 const queryParam = reactive<any>({});
-const orgDrawer = ref();
+const areaAddDrawer = ref();
 const areaDrawer = ref();
 const orgCode = ref<any>('');
 const departId = ref<any>('');
@@ -100,23 +98,6 @@ const wrapperCol = reactive({
   sm: 16,
 });
 
-function handleOrgUnbind(){
-  let param = {"orgCode":orgCode.value};
-  Modal.confirm({
-    title: '机构解绑',
-    width: '500px',
-    icon: createVNode(ExclamationCircleOutlined),
-    content: createVNode('div', { style: 'color:red;' }, '解除当前机构已绑定的所有设备，确定要解绑该机构吗？'),
-    okText: '确定',
-    onOk() {
-      unbindOrg(param).then((res) => {}).catch(() =>{}).finally(() => {});
-    },
-    onCancel() {
-    },
-    class: 'test',
-  });
-}
-
 /**
  * 成功回调
  */
@@ -130,25 +111,28 @@ function handleSuccess() {
 function getTableAction(record) {
   return [
     {
-      label: '设备管理',
+      label: '添加设备',
       onClick: deviceManager.bind(null, record),
     },
+    {
+      label: '设备预览',
+      onClick: handlePreview.bind(null, record),
+    },
   ];
 }
 
 /**
- * 设备管理
+ * 添加设备
  */
-function handleAdd(){
-  let record = { "departId" : departId.value,"orgCode":orgCode.value };
-  orgDrawer.value.disableSubmit = true;
-  orgDrawer.value.edit(record);
+function deviceManager(record: Recordable){
+  areaAddDrawer.value.disableSubmit = true;
+  areaAddDrawer.value.edit(record);
 }
 
 /**
- * 设备管理
+ * 区域设备预览
  */
-function deviceManager(record: Recordable){
+function handlePreview(record: Recordable){
   areaDrawer.value.disableSubmit = true;
   areaDrawer.value.edit(record);
 }
diff --git a/src/views/iotManager/components/LogModal.vue b/src/views/iotManager/components/LogModal.vue
index a4a6088..3782187 100644
--- a/src/views/iotManager/components/LogModal.vue
+++ b/src/views/iotManager/components/LogModal.vue
@@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
 import LogList from './LogList.vue'
 
 const title = ref<string>('');
-const width = ref<number>(1800);
+const width = ref<number>(1400);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
diff --git a/src/views/iotManager/components/OrgDeviceAddList.vue b/src/views/iotManager/components/OrgDeviceAddList.vue
index 80b4e07..5193de0 100644
--- a/src/views/iotManager/components/OrgDeviceAddList.vue
+++ b/src/views/iotManager/components/OrgDeviceAddList.vue
@@ -9,24 +9,15 @@
             <a-col :lg="6">
               <a-form-item name="deviceType">
                 <template #label><span title="设备类型">设备类型</span></template>
-                <a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
-                  <a-select-option value="摄像头">摄像头</a-select-option>
-                  <a-select-option value="录像机">录像机</a-select-option>
-                  <a-select-option value="交换机">交换机</a-select-option>
-                  <a-select-option value="路由器">路由器</a-select-option>
-                  <a-select-option value="无线AP">无线AP</a-select-option>
-                  <a-select-option value="智能电表">智能电表</a-select-option>
-                  <a-select-option value="智能水表">智能水表</a-select-option>
-                  <a-select-option value="温湿度计">温湿度计</a-select-option>
-                </a-select>
+                <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  allow-clear />
               </a-form-item>
             </a-col>
             <a-col :lg="6">
-              <a-form-item name="izAllocate">
-                <template #label><span title="分配状态">在线状态</span></template>
-                <a-select v-model:value="queryParam.izAllocate" placeholder="请选择在线状态" allow-clear>
-                  <a-select-option value="未分配">未分配</a-select-option>
-                  <a-select-option value="释放">释放</a-select-option>
+              <a-form-item name="deviceStatus">
+                <template #label><span title="在线状态">在线状态</span></template>
+                <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
+                  <a-select-option value="在线">在线</a-select-option>
+                  <a-select-option value="离线">离线</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
@@ -78,6 +69,7 @@ import { useListPage } from '/@/hooks/system/useListPage';
 import { deviceAddColumns } from '../manager.data';
 import { canAddList,addOrgBatch } from '../manager.api';
 import { useUserStore } from '/@/store/modules/user';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 
 const formRef = ref();
 const confirmLoading = ref<boolean>(false);
@@ -102,7 +94,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
       fixed: 'right',
     },
     beforeFetch: async (params) => {
-      queryParam.dimension = '机构维度';
+      // queryParam.dimension = '机构维度';
       queryParam.departId = departId.value;
       return Object.assign(params, queryParam);
     },
@@ -180,7 +172,7 @@ function handleOk(){
 
 //初始化
 function init(record) {
-  departId.value = record.departId;
+  departId.value = record.id;
   orgCode.value = record.orgCode;
   searchQuery();
 }
diff --git a/src/views/iotManager/components/OrgDeviceAddModal.vue b/src/views/iotManager/components/OrgDeviceAddModal.vue
index 3153d47..fb5ec70 100644
--- a/src/views/iotManager/components/OrgDeviceAddModal.vue
+++ b/src/views/iotManager/components/OrgDeviceAddModal.vue
@@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
 import OrgDeviceAddList from './OrgDeviceAddList.vue'
 
 const title = ref<string>('');
-const width = ref<number>(1500);
+const width = ref<number>(1200);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
diff --git a/src/views/iotManager/components/OrgDeviceList.vue b/src/views/iotManager/components/OrgDeviceList.vue
deleted file mode 100644
index 9500fe4..0000000
--- a/src/views/iotManager/components/OrgDeviceList.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <div class="p-2">
-    <!--查询区域-->
-    <div class="jeecg-basic-table-form-container">
-      <a-form ref="formRef" :model="queryParam" :label-col="labelCol"
-              :wrapper-col="wrapperCol">
-        <a-row :gutter="24">
-          <a-col :lg="5">
-            <a-form-item name="deviceType">
-              <template #label><span title="设备类型">设备类型</span></template>
-              <a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
-                <a-select-option value="摄像头">摄像头</a-select-option>
-                <a-select-option value="录像机">录像机</a-select-option>
-                <a-select-option value="交换机">交换机</a-select-option>
-                <a-select-option value="路由器">路由器</a-select-option>
-                <a-select-option value="无线AP">无线AP</a-select-option>
-                <a-select-option value="智能电表">智能电表</a-select-option>
-                <a-select-option value="智能水表">智能水表</a-select-option>
-                <a-select-option value="温湿度计">温湿度计</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="5">
-            <a-form-item name="deviceStatus">
-              <template #label><span title="在线状态">在线状态</span></template>
-              <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
-                <a-select-option value="在线">在线</a-select-option>
-                <a-select-option value="离线">离线</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="4">
-            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
-              <a-col :lg="6">
-                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
-                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
-                          style="margin-left: 8px">重置</a-button>
-              </a-col>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!--引用表格-->
-    <BasicTable @register="registerTable">
-      <!--插槽:table标题-->
-      <template #tableTitle>
-        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加区域设备</a-button>
-      </template>
-      <!--操作栏-->
-      <template #action="{ record }">
-        <TableAction :actions="getTableAction(record)"/>
-      </template>
-      <template v-slot:bodyCell="{ column, record, index, text }">
-      </template>
-    </BasicTable>
-    <!-- 表单区域 -->
-    <OrgDeviceAddModal ref="registerDrawer" @success="handleSuccess" />
-    <LogModal ref="logDrawer" @success="handleSuccess" />
-  </div>
-</template>
-
-<script lang="ts" name="iotManager-deviceList" setup>
-import {ref, reactive, defineExpose, nextTick} from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { orgDeviceColumns } from '../manager.data';
-import { deviceList } from '../manager.api';
-import { useUserStore } from '/@/store/modules/user';
-import OrgDeviceAddModal from './OrgDeviceAddModal.vue';
-import LogModal from './LogModal.vue';
-
-const formRef = ref();
-const queryParam = reactive<any>({});
-const registerDrawer = ref();
-const logDrawer = ref();
-const departId = ref<any>('');
-const orgCode = ref<any>('');
-const userStore = useUserStore();
-//注册table数据
-const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-  tableProps: {
-    title: '设备管理',
-    api: deviceList,
-    columns: orgDeviceColumns,
-    canResize: false,
-    useSearchForm: false,
-    showIndexColumn: true,
-    actionColumn: {
-      width: 180,
-      fixed: 'right',
-    },
-    beforeFetch: async (params) => {
-      queryParam.dimension = '机构维度';
-      queryParam.departId = departId.value;
-      return Object.assign(params, queryParam);
-    },
-  },
-});
-const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
-const labelCol = reactive({
-  xs:24,
-  sm:8,
-  xl:8,
-  xxl:8
-});
-const wrapperCol = reactive({
-  xs: 24,
-  sm: 16,
-});
-
-/**
- * 成功回调
- */
-function handleSuccess() {
-  reload();
-}
-
-/**
- * 操作栏
- */
-function getTableAction(record) {
-  return [
-    {
-      label: '设备日志',
-      onClick: deviceLog.bind(null, record),
-    },
-  ];
-}
-
-/**
- * 设备管理
- */
-function handleAdd(){
-  let record = { "departId" : departId.value,"orgCode":orgCode.value };
-  registerDrawer.value.disableSubmit = true;
-  registerDrawer.value.edit(record);
-}
-
-/**
- * 设备日志
- */
-function deviceLog(record: Recordable){
-  logDrawer.value.disableSubmit = true;
-  logDrawer.value.edit(record);
-}
-
-/**
- * 查询
- */
-function searchQuery() {
-  reload();
-}
-
-/**
- * 重置
- */
-function searchReset() {
-  formRef.value.resetFields();
-  //刷新数据
-  searchQuery();
-}
-
-//初始化
-function init(record) {
-  departId.value = record.departId;
-  orgCode.value = record.sysOrgCode;
-  searchQuery();
-}
-
-defineExpose({
-  init
-});
-
-</script>
-
-<style lang="less" scoped>
-
-.jeecg-basic-table-form-container {
-  padding: 0;
-  .table-page-search-submitButtons {
-    display: block;
-    margin-bottom: 24px;
-    white-space: nowrap;
-  }
-  .query-group-cust{
-    min-width: 100px !important;
-  }
-  .query-group-split-cust{
-    width: 30px;
-    display: inline-block;
-    text-align: center
-  }
-  .ant-form-item:not(.ant-form-item-with-help){
-    margin-bottom: 16px;
-    height: 32px;
-  }
-  :deep(.ant-picker),:deep(.ant-input-number){
-    width: 100%;
-  }
-}
-
-.p-2{
-  height: calc(100vh - 120px);
-}
-
-</style>
diff --git a/src/views/iotManager/components/PreviewList.vue b/src/views/iotManager/components/PreviewList.vue
new file mode 100644
index 0000000..cf9a2c9
--- /dev/null
+++ b/src/views/iotManager/components/PreviewList.vue
@@ -0,0 +1,226 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <div class="p-2">
+      <!--查询区域-->
+      <div class="jeecg-basic-table-form-container">
+        <a-form ref="formRef" :model="queryParam" :label-col="labelCol"
+                :wrapper-col="wrapperCol">
+          <a-row :gutter="24">
+            <a-col :lg="6">
+<!--              <a-form-item name="nuId">-->
+<!--                <a-select ref="select"-->
+<!--                          placeholder="请选择区域"-->
+<!--                          v-model:value="queryParam.nuId">-->
+<!--                  <a-select-option :value="item.nuId" v-for="item in nuInfos" :key="item.nuId">{{item.nuId}}</a-select-option>-->
+<!--                </a-select>-->
+<!--                <j-dict-select-tag type='list' v-model:value="queryParam.nuId" :dictCode="getNuList()"-->
+<!--                                   placeholder="请选择区域" allow-clear />-->
+<!--              </a-form-item>-->
+              <a-form-item name="nuName">
+                <template #label><span title="区域名称">区域名称</span></template>
+                <a-input placeholder="请输入区域名称" v-model:value="queryParam.nuName" allow-clear ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="6">
+              <a-form-item name="dimension">
+                <template #label><span title="设备维度">设备维度</span></template>
+                <a-select v-model:value="queryParam.dimension" placeholder="请选择设备维度" allow-clear>
+                  <a-select-option value="机构维度">机构维度</a-select-option>
+                  <a-select-option value="区域维度">区域维度</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="6">
+              <a-form-item name="deviceType">
+                <template #label><span title="设备类型">设备类型</span></template>
+                <j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型"  allow-clear />
+              </a-form-item>
+            </a-col>
+            <a-col :lg="6">
+              <a-form-item name="deviceStatus">
+                <template #label><span title="在线状态">在线状态</span></template>
+                <a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
+                  <a-select-option value="在线">在线</a-select-option>
+                  <a-select-option value="离线">离线</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :lg="6">
+              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                <a-col :lg="6">
+                  <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                  <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
+                            style="margin-left: 8px">重置</a-button>
+                </a-col>
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <!--引用表格-->
+      <BasicTable @register="registerTable" :rowSelection="rowSelection">
+        <!--插槽:table标题-->
+        <template #tableTitle>
+        </template>
+        <!--操作栏-->
+        <template #action="{ record }">
+          <TableAction :actions="getTableAction(record)"/>
+        </template>
+        <template v-slot:bodyCell="{ column, record, index, text }">
+        </template>
+      </BasicTable>
+    </div>
+  </a-spin>
+</template>
+
+<script lang="ts" name="iotManager-previewList" setup>
+import {ref, reactive, defineExpose, nextTick} from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { orgDeviceColumns } from '../manager.data';
+import { previewList } from '../manager.api';
+import { useUserStore } from '/@/store/modules/user';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+
+const formRef = ref();
+const confirmLoading = ref<boolean>(false);
+const queryParam = reactive<any>({});
+const departId = ref<any>('');
+const nuId = ref<any>('');
+const orgCode = ref<any>('');
+const remarks = ref<any>('');
+const visible = ref<any>();
+const userStore = useUserStore();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '设备预览',
+    api: previewList,
+    columns: orgDeviceColumns,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    actionColumn: {
+      width: 100,
+      fixed: 'right',
+    },
+    beforeFetch: async (params) => {
+      queryParam.departId = departId.value;
+      return Object.assign(params, queryParam);
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
+const labelCol = reactive({
+  xs:24,
+  sm:8,
+  xl:8,
+  xxl:8
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 16,
+});
+
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  reload();
+}
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '更换',
+      // onClick: deviceOrgManager.bind(null, record),
+    },
+    {
+      label: '释放',
+      // onClick: deviceManager.bind(null, record),
+      ifShow: () => {
+        return record.izAllocate == '已分配';
+      },
+    },
+    {
+      label: '删除',
+      // onClick: devicePreview.bind(null, record),
+      ifShow: () => {
+        return record.izAllocate == '释放';
+      },
+    },
+  ];
+}
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  formRef.value.resetFields();
+  selectedRowKeys.value = [];
+  //刷新数据
+  searchQuery();
+}
+
+function handleCreate(){
+  visible.value = true;
+}
+
+// function getNuList(){
+//   return 'nu_base_info,nu_name,nu_id,sys_org_code = \'' + orgCode.value + '\' order by nu_id asc'
+// }
+
+//初始化
+function init(record) {
+  departId.value = record.id;
+  orgCode.value = record.orgCode;
+  searchQuery();
+}
+
+defineExpose({
+  init
+});
+
+</script>
+
+<style lang="less" scoped>
+
+.jeecg-basic-table-form-container {
+  padding: 0;
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+  .query-group-cust{
+    min-width: 100px !important;
+  }
+  .query-group-split-cust{
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+  .ant-form-item:not(.ant-form-item-with-help){
+    margin-bottom: 16px;
+    height: 32px;
+  }
+  :deep(.ant-picker),:deep(.ant-input-number){
+    width: 100%;
+  }
+}
+
+.p-2{
+  height: calc(100vh - 120px);
+}
+
+</style>
diff --git a/src/views/iotManager/components/OrgDeviceModal.vue b/src/views/iotManager/components/PreviewModal.vue
similarity index 84%
rename from src/views/iotManager/components/OrgDeviceModal.vue
rename to src/views/iotManager/components/PreviewModal.vue
index a489451..316dd6c 100644
--- a/src/views/iotManager/components/OrgDeviceModal.vue
+++ b/src/views/iotManager/components/PreviewModal.vue
@@ -5,18 +5,18 @@
       <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
       <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
     </template>
-    <OrgDeviceList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
+    <PreviewList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
       :formBpm="false">
-    </OrgDeviceList>
+    </PreviewList>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
 import { ref, nextTick, defineExpose } from 'vue';
-import OrgDeviceList from './OrgDeviceList.vue'
+import PreviewList from './PreviewList.vue'
 
 const title = ref<string>('');
-const width = ref<number>(1800);
+const width = ref<number>(1200);
 const visible = ref<boolean>(false);
 const disableSubmit = ref<boolean>(false);
 const registerForm = ref();
@@ -37,7 +37,7 @@ function add() {
  * @param record
  */
 function edit(record) {
-  title.value = disableSubmit.value ? '设备管理' : '编辑';
+  title.value = disableSubmit.value ? '设备预览' : '编辑';
   visible.value = true;
   nextTick(() => {
     registerForm.value.init(record);
@@ -64,6 +64,7 @@ function submitCallback() {
  */
 function handleCancel() {
   visible.value = false;
+  emit('success');
 }
 
 defineExpose({
diff --git a/src/views/iotManager/index.vue b/src/views/iotManager/index.vue
index 7f80395..8a295c5 100644
--- a/src/views/iotManager/index.vue
+++ b/src/views/iotManager/index.vue
@@ -49,23 +49,31 @@
       </template>
     </BasicTable>
     <!-- 表单区域 -->
-    <AreaModal ref="registerModal" @success="handleSuccess" />
+    <OrgDeviceAddModal ref="orgModal" @success="handleSuccess" />
+    <AreaModal ref="areaModal" @success="handleSuccess" />
+    <PreviewModal ref="previewModal" @success="handleSuccess" />
   </div>
 </template>
 
 <script lang="ts" name="iotManager-index" setup>
-import { ref, reactive } from 'vue';
+import {ref, reactive, createVNode} from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columns } from './manager.data';
-import { orgList } from './manager.api';
+import {orgList, unbindOrg} from './manager.api';
 import { useUserStore } from '/@/store/modules/user';
+import OrgDeviceAddModal from './components/OrgDeviceAddModal.vue';
 import AreaModal from './components/AreaModal.vue';
+import PreviewModal from './components/PreviewModal.vue';
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import {Modal} from "ant-design-vue";
+import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
 
 const formRef = ref();
 const queryParam = reactive<any>({});
-const registerModal = ref();
+const orgModal = ref();
+const areaModal = ref();
+const previewModal = ref();
 const userStore = useUserStore();
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@@ -77,7 +85,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     useSearchForm: false,
     showIndexColumn: true,
     actionColumn: {
-      width: 180,
+      width: 300,
       fixed: 'right',
     },
     beforeFetch: async (params) => {
@@ -110,18 +118,61 @@ function handleSuccess() {
 function getTableAction(record) {
   return [
     {
-      label: '设备管理',
+      label: '机构添加',
+      onClick: deviceOrgManager.bind(null, record),
+    },
+    {
+      label: '区域添加',
       onClick: deviceManager.bind(null, record),
     },
-  ];
+    {
+      label: '设备预览',
+      onClick: devicePreview.bind(null, record),
+    },
+    {
+      label: '机构解绑',
+      onClick: handleOrgUnbind.bind(null, record),
+    },  ];
 }
 
 /**
- * 设备管理
+ * 添加机构设备
+ */
+function deviceOrgManager(record: Recordable){
+  orgModal.value.disableSubmit = true;
+  orgModal.value.edit(record);
+}
+/**
+ * 添加区域设备
  */
 function deviceManager(record: Recordable){
-  registerModal.value.disableSubmit = true;
-  registerModal.value.edit(record);
+  areaModal.value.disableSubmit = true;
+  areaModal.value.edit(record);
+}
+
+function handleOrgUnbind(record: Recordable){
+  let param = {"orgCode":record.orgCode};
+  Modal.confirm({
+    title: '机构解绑',
+    width: '500px',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: createVNode('div', { style: 'color:red;' }, '解除当前机构已绑定的所有设备，确定要解绑该机构吗？'),
+    okText: '确定',
+    onOk() {
+      unbindOrg(param).then((res) => {}).catch(() =>{}).finally(() => {});
+    },
+    onCancel() {
+    },
+    class: 'test',
+  });
+}
+
+/**
+ * 设备预览
+ */
+function devicePreview(record: Recordable){
+  previewModal.value.disableSubmit = true;
+  previewModal.value.edit(record);
 }
 
 /**
diff --git a/src/views/iotManager/manager.api.ts b/src/views/iotManager/manager.api.ts
index 9ef39d2..34cc6d4 100644
--- a/src/views/iotManager/manager.api.ts
+++ b/src/views/iotManager/manager.api.ts
@@ -4,6 +4,7 @@ enum Api {
   orgList = '/iot/manager/org/list',
   areaList = '/iot/manager/area/list',
   deviceList = '/iot/manager/device/list',
+  previewList = '/iot/manager/device/previewList',
   canAddList = '/iot/manager/device/canAddList',
   addBatch = '/iot/manager/device/addBatch',
   addOrgBatch = '/iot/manager/device/addOrgBatch',
@@ -26,11 +27,17 @@ export const areaList = (params) => defHttp.get({ url: Api.areaList, params });
  * @param params
  */
 export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });
+/**
+ * 列表接口
+ * @param params
+ */
+export const previewList = (params) => defHttp.get({ url: Api.previewList, params });
 /**
  * 列表接口
  * @param params
  */
 export const canAddList = (params) => defHttp.get({ url: Api.canAddList, params });
+
 /**
  * 添加
  * @param params
diff --git a/src/views/iotManager/manager.data.ts b/src/views/iotManager/manager.data.ts
index b57eff8..a886928 100644
--- a/src/views/iotManager/manager.data.ts
+++ b/src/views/iotManager/manager.data.ts
@@ -35,16 +35,16 @@ export const columns: BasicColumn[] = [
 
 //列表数据
 export const nuColumns: BasicColumn[] = [
-  {
-    title: '区域名称',
-    align: "center",
-    dataIndex: 'nuName'
-  },
   {
     title: '区域编码',
     align: "center",
     dataIndex: 'nuId',
   },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName'
+  },
   {
     title: '区域属性',
     align: "center",
@@ -54,6 +54,22 @@ export const nuColumns: BasicColumn[] = [
 
 //列表数据
 export const orgDeviceColumns: BasicColumn[] = [
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+  },
+  {
+    title: '区域名称',
+    align: "center",
+    dataIndex: 'nuName'
+  },
+  {
+    title: '区域属性',
+    align: "center",
+    dataIndex: 'areaFlag_dictText',
+    width: 100
+  },
   {
     title: '设备标识',
     align: "center",
@@ -63,36 +79,59 @@ export const orgDeviceColumns: BasicColumn[] = [
     title: '设备维度',
     align: "center",
     dataIndex: 'dimension',
+    width: 100
   },
   {
     title: '设备类型',
     align: "center",
-    dataIndex: 'deviceType',
+    dataIndex: 'deviceType_dictText',
+    width: 100
   },
   {
     title: '在线状态',
     align: "center",
     dataIndex: 'deviceStatus',
+    width: 100
   },
   {
     title: '分配状态',
     align: "center",
     dataIndex: 'izAllocate',
+    width: 100
+  },
+  {
+    title: '报修状态',
+    align: "center",
+    dataIndex: 'maintainStatus',
+    customRender:({record})=>{
+      if(record.maintainStatus=='0'){
+        return "正常";
+      }
+      if(record.maintainStatus=='1'){
+        return "损坏";
+      }
+    },
+    width: 100
   },
 ];
 
 
 //列表数据
 export const areaDeviceColumns: BasicColumn[] = [
+  {
+    title: '区域编码',
+    align: "center",
+    dataIndex: 'nuId',
+  },
   {
     title: '区域名称',
     align: "center",
     dataIndex: 'nuName'
   },
   {
-    title: '区域编码',
+    title: '区域属性',
     align: "center",
-    dataIndex: 'nuId',
+    dataIndex: 'areaFlag_dictText',
   },
   {
     title: '设备标识',
@@ -103,21 +142,25 @@ export const areaDeviceColumns: BasicColumn[] = [
     title: '设备维度',
     align: "center",
     dataIndex: 'dimension',
+    width: 100
   },
   {
     title: '设备类型',
     align: "center",
-    dataIndex: 'deviceType',
+    dataIndex: 'deviceType_dictText',
+    width: 100
   },
   {
     title: '在线状态',
     align: "center",
     dataIndex: 'deviceStatus',
+    width: 100
   },
   {
     title: '分配状态',
     align: "center",
     dataIndex: 'izAllocate',
+    width: 100
   },
 ];
 
@@ -128,15 +171,15 @@ export const deviceAddColumns: BasicColumn[] = [
     align: "center",
     dataIndex: 'sn',
   },
-  {
-    title: '设备维度',
-    align: "center",
-    dataIndex: 'dimension',
-  },
+  // {
+  //   title: '设备维度',
+  //   align: "center",
+  //   dataIndex: 'dimension',
+  // },
   {
     title: '设备类型',
     align: "center",
-    dataIndex: 'deviceType',
+    dataIndex: 'deviceType_dictText'
   },
   {
     title: '在线状态',