资料库的页面调整

src/api/pms/iotinfo/index.ts

@@ -18,6 +18,10 @@ export const IotInfoApi = {
   getIotInfoPage: async (params: any) => {
     return await request.get({ url: `/rq/iot-info/page`, params })
   },
+  // 查询资料库的子目录及文件
+  getChildContentFile: async (params: any) => {
+    return await request.post({ url: `/rq/iot-info/child/content-file`, params })
+  },
   getIotInfoFilePage: async (params: any) => {
     return await request.post({ url: `/rq/iot-info/file/page`, params })
   },

src/api/system/tree/index.ts

@@ -22,6 +22,9 @@ export const IotTreeApi = {
   getIotTreePage: async (params: any) => {
     return await request.get({ url: `/rq/iot-tree/page`, params })
   },
+  getParentIds: async (params: any) => {
+    return await request.get({ url: `/rq/iot-tree/ids/`+ params })
+  },
 
   // 查询pms树详情
   getIotTree: async (id: number) => {

src/locales/en.ts

@@ -653,7 +653,9 @@ export default {
     preview:'Preview',
     operation:'Operation',
     dow:'Download',
-    check:'Check'
+    check:'Check',
+    device:'Associated Device',
+    dept:'Associated Department',
   },
   fileInfo:{
     fileDirectory:'FileDirectory',

src/locales/zh-CN.ts

@@ -95,7 +95,7 @@ export default {
     copySuccess: '复制成功',
     copyError: '复制失败',
     leftNode:'请选择左侧节点',
-    deptChoose:'请选择设备及目录'
+    deptChoose:'请选择设备及设备目录'
   },
   lock: {
     lockScreen: '锁定屏幕',
@@ -640,17 +640,19 @@ export default {
     assetOwner:'资产归属'
   },
   file:{
-    name:'文件名称',
-    nameHolder:'请输入文件名称',
+    name:'名称',
+    nameHolder:'请输入名称',
     search:'搜索',
     reset:'重置',
     upload:'文件上传',
-    fileType:'文件类型',
+    fileType:'类型',
     fileSize:'文件大小',
-    preview:'查看预览',
+    preview:'预览',
     operation:'操作',
     dow:'下载',
-    check:'查看'
+    check:'查看',
+    device:'所属设备',
+    dept:'所属部门'
   },
   fileInfo:{
     fileDirectory:'文件目录',

src/views/Login/Login.vue

@@ -55,11 +55,11 @@
             <!-- 手机登录 -->
 <!--            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
             <!-- 二维码登录 -->
-            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+<!--            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
             <!-- 注册 -->
             <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 三方登录 -->
-            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+<!--            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
             <!-- 忘记密码 -->
             <ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
           </div>

src/views/pms/device/FileTree.vue

@@ -284,7 +284,6 @@ const filterNode = (name: string, data: Tree) => {
 
 /** 处理部门被点击 */
 const handleNodeClick = async (row: { [key: string]: any }) => {
-  console.log(row)
   emits('node-click', row)
 }
 const emits = defineEmits(['node-click','success'])
@@ -321,7 +320,7 @@ onBeforeUnmount(() => {
 .custom-menu {
   position: fixed;
   background: white;
-  border: 1px solid #ccc;
+  border: 1px solid #2196df;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
   z-index: 1000;
 }
@@ -331,10 +330,10 @@ onBeforeUnmount(() => {
   margin: 0;
 }
 .custom-menu li {
-  padding: 8px 20px;
+  padding: 2px 10px;
   cursor: pointer;
-  font-size: 14px;
-  margin: 5px
+  font-size: 12px;
+  margin: 2px
 }
 .custom-menu li:hover {
   background: #77a0ec;

src/views/system/tree/PmsTree.vue

@@ -26,18 +26,16 @@
         >
           <div>
             <Icon
-              style="vertical-align: middle"
+              style="vertical-align: middle;fill: currentColor;color: orange"
               v-if="node.data.type === 'dept'"
-              icon="ep:postcard"
+              icon="fa:folder-open"
             />
             <Icon
-              style="vertical-align: middle"
+              style="vertical-align: middle;fill: currentColor;color:orange"
               v-if="node.data.type === 'device'"
-              icon="ep:collection"
+              icon="fa:folder-open"
             />
-            <el-icon v-if="node.data.type === 'file'" style="vertical-align: middle"
-              ><Folder
-            /></el-icon>
+            <Icon icon="fa:folder-open" v-if="node.data.type === 'file'" style="vertical-align: middle;color: orange;fill: currentColor;"/>
             <!-- 文件夹图标 -->
             <span style="vertical-align: middle; margin-left: 3px">{{ node.data.name }}</span>
           </div>
@@ -48,42 +46,47 @@
       </template>
     </el-tree>
   </div>
-  <!--  <div v-show="menuVisible" ref="contextMenuRef" class="custom-menu" :style="{ left: menuX + 'px', top: menuY + 'px' }">-->
-  <!--    <ul>-->
-  <!--      <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('add')">新增子节点</li>-->
-  <!--      <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('edit')">编辑节点</li>-->
-  <!--      <li @click="handleMenuClick('delete')">删除节点</li>-->
-  <!--    </ul>-->
-  <!--  </div>-->
+  <div v-show="deviceVisible" ref="contextMenuRef" class="custom-menu" :style="{ left: menuX + 'px', top: menuY + 'px' }">
+    <ul>
+      <li style="border-bottom: 1px solid #ccc;" @click="handleDeviceClick('add')">设备详情</li>
+    </ul>
+  </div>
+    <div v-show="menuVisible" ref="contextMenuRef" class="custom-menu" :style="{ left: menuX + 'px', top: menuY + 'px' }">
+      <ul>
+        <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('add')">新增子节点</li>
+        <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('edit')">编辑节点</li>
+        <li @click="handleMenuClick('delete')">删除节点</li>
+      </ul>
+    </div>
 
-  <!--  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 40em">-->
-  <!--    <el-form-->
-  <!--      ref="formRef"-->
-  <!--      v-loading="formLoading"-->
-  <!--      :model="formData"-->
-  <!--      :rules="formRules"-->
-  <!--      label-width="80px"-->
-  <!--    >-->
-  <!--      <el-form-item label="资料分类名称" prop="name" label-width="110px">-->
-  <!--        <el-input v-model="formData.name" placeholder="请输入资料分类名称" />-->
-  <!--      </el-form-item>-->
-  <!--      <el-form-item label="显示排序" prop="sort" label-width="110px">-->
-  <!--        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />-->
-  <!--      </el-form-item>-->
-  <!--      <el-form-item label="备注" prop="remark" label-width="110px">-->
-  <!--        <el-input-->
-  <!--          v-model="formData.remark"-->
-  <!--          maxlength="11"-->
-  <!--          placeholder="请输入备注"-->
-  <!--          type="textarea"-->
-  <!--        />-->
-  <!--      </el-form-item>-->
-  <!--    </el-form>-->
-  <!--    <template #footer>-->
-  <!--      <el-button type="primary" @click="submitForm">确 定</el-button>-->
-  <!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
-  <!--    </template>-->
-  <!--  </Dialog>-->
+    <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 40em">
+      <el-form
+        ref="formRef"
+        v-loading="formLoading"
+        :model="formData"
+        :rules="formRules"
+        label-width="80px"
+      >
+        <el-form-item label="资料分类名称" prop="name" label-width="110px">
+          <el-input v-model="formData.name" placeholder="请输入资料分类名称" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="sort" label-width="110px">
+          <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" label-width="110px">
+          <el-input
+            v-model="formData.remark"
+            maxlength="11"
+            placeholder="请输入备注"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -93,6 +96,7 @@ import { CommonStatusEnum } from '@/utils/constants'
 // import {IotInfoClassifyApi} from "@/api/pms/info";
 import { IotTreeApi } from '@/api/system/tree'
 import { Folder } from '@element-plus/icons-vue'
+import {flatten} from "min-dash";
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -128,11 +132,14 @@ const nodeInfo = ref({})
 const treeList = ref<Tree[]>([]) // 树形结构
 const treeRef = ref<InstanceType<typeof ElTree>>()
 const menuVisible = ref(false)
+const deviceVisible = ref(false)
 const menuX = ref(0)
 const menuY = ref(0)
 const contextMenuRef = ref(null) // 弹窗DOM引用
 let selectedNode = null
 
+
+const { push } = useRouter() // 路由跳转
 // 动态高度计算
 const treeContainer = ref(null)
 const setHeight = () => {
@@ -159,37 +166,48 @@ const handleRightClick = (event, node, data) => {
   menuX.value = event.clientX
   menuY.value = event.clientY
   selectedNode = data
-  menuVisible.value = true
+  if (nodeInfo.value.type === 'device') {
+    deviceVisible.value = true
+  } else if (nodeInfo.value.type === 'file') {
+    menuVisible.value = true
+  }
 }
 
-// const handleMenuClick = async (action) => {
-//   switch (action) {
-//     case 'add':
-//       dialogVisible.value = true
-//       dialogTitle.value = '新增资料分类'
-//       formType.value = 'create'
-//       resetForm()
-//       break
-//     case 'edit':
-//       resetForm()
-//       dialogVisible.value = true
-//       dialogTitle.value = '编辑资料分类'
-//       formType.value = 'update'
-//       formData.value = nodeInfo.value
-//       console.log(JSON.stringify(formData.value))
-//       break
-//     case 'delete':
-//       // 删除的二次确认
-//       await message.delConfirm()
-//       // 发起删除
-//       await IotInfoClassifyApi.deleteIotInfoClassify(nodeInfo.value.id)
-//       message.success(t('common.delSuccess'))
-//       // 刷新列表
-//       await getTree()
-//       break
-//   }
-//   menuVisible.value = false
-// }
+const handleDeviceClick = async () => {
+  const id = nodeInfo.value.originId
+  push({ name: 'DeviceDetailInfo', params: { id } })
+  deviceVisible.value = false
+}
+
+
+const handleMenuClick = async (action) => {
+  switch (action) {
+    case 'add':
+      dialogVisible.value = true
+      dialogTitle.value = '新增资料分类'
+      formType.value = 'create'
+      resetForm()
+      break
+    case 'edit':
+      resetForm()
+      dialogVisible.value = true
+      dialogTitle.value = '编辑资料分类'
+      formType.value = 'update'
+      formData.value = nodeInfo.value
+      console.log(JSON.stringify(formData.value))
+      break
+    case 'delete':
+      // 删除的二次确认
+      await message.delConfirm()
+      // 发起删除
+      await IotInfoClassifyApi.deleteIotInfoClassify(nodeInfo.value.id)
+      message.success(t('common.delSuccess'))
+      // 刷新列表
+      await getTree()
+      break
+  }
+  menuVisible.value = false
+}
 /** 获得部门树 */
 const getTreeInfo = async () => {
   const res = await IotTreeApi.getSimpleTreeList()
@@ -207,7 +225,8 @@ const filterNode = (name: string, data: Tree) => {
 
 /** 处理部门被点击 */
 const handleNodeClick = async (row: { [key: string]: any }) => {
-  console.log(row)
+  deviceVisible.value = false
+  menuVisible.value = false
   emits('node-click', row)
 }
 const emits = defineEmits(['node-click', 'success'])
@@ -245,7 +264,7 @@ watch(deptName, (val) => {
   position: fixed;
   background: white;
   border: 1px solid #ccc;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   z-index: 1000;
 }
 .custom-menu ul {
@@ -254,10 +273,10 @@ watch(deptName, (val) => {
   margin: 0;
 }
 .custom-menu li {
-  padding: 8px 20px;
+  padding: 2px 10px;
   cursor: pointer;
-  font-size: 14px;
-  margin: 5px;
+  font-size: 12px;
+  margin: 2px;
 }
 .custom-menu li:hover {
   background: #77a0ec;

src/views/system/tree/index.vue

@@ -1,4 +1,20 @@
 <template>
+  <ContentWrap>
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+      <el-breadcrumb separator=">" class="breadcrumb-container">
+        <el-breadcrumb-item
+          v-for="(item, index) in breadcrumbs"
+          :key="index"
+          @click="handleBreadcrumbClick(index)"
+          :class="{ 'current-crumb': index === breadcrumbs.length - 1 }"
+          class="custom-breadcrumb-item"
+        >
+          {{ item.name }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+      <el-input :placeholder="'在'+breadcrumbs[breadcrumbs.length - 1].name+'下搜索'" style="width: 250px;height: 30px"/>
+    </div>
+  </ContentWrap>
   <div class="container-tree" ref="container">
   <el-row >
     <div class="left-tree" :style="{ width: leftWidth + 'px' }">
@@ -40,8 +56,21 @@
           </el-form>
         </ContentWrap>
         <ContentWrap>
-          <el-table v-loading="formLoading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-            <el-table-column :label="t('file.name') " align="center" prop="filename" />
+          <el-table v-loading="formLoading" :data="list" :stripe="true" :show-overflow-tooltip="true" @row-dblclick="inContent" class="custom-table">
+            <el-table-column :label="t('file.name') " align="left" prop="filename" min-width="200">
+              <template #default="scope">
+                <div style="display: flex; align-items: center; gap: 5px;">
+                <Icon v-if="scope.row.fileType==='content'" icon="fa:folder-open"  color="#FFD96E"/>
+                <Icon v-else-if="scope.row.fileType==='pic'||scope.row.fileClassify==='jpg'||scope.row.fileClassify==='png'" icon="ep:picture-filled"  color="#2183D1"/>
+                <Icon v-else-if="scope.row.fileType==='file'&&scope.row.fileClassify==='pdf'" icon="fa-solid:file-pdf"  color="#E20012"/>
+                <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='doc'||scope.row.fileClassify==='docx')" icon="fa:file-word-o"  color="blue"/>
+                <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='xls'||scope.row.fileClassify==='xlsx')" icon="fa-solid:file-excel"  color="#107C41"/>
+                <Icon v-else-if="scope.row.fileType==='file'&&(scope.row.fileClassify==='txt')" icon="fa:file-text-o" />
+                  {{scope.row.filename}}
+                </div>
+              </template>
+
+            </el-table-column>
             <el-table-column :label="t('file.fileType') " align="center" prop="fileType" >
               <template #default="scope">
                 <dict-tag :type="DICT_TYPE.PMS_FILE_TYPE" :value="scope.row.fileType" />
@@ -50,17 +79,11 @@
             <el-table-column :label="t('file.fileSize') " align="center" prop="fileSize" />
             <el-table-column :label="t('file.preview') " align="center" prop="filePath" >
               <template #default="scope">
-                <el-button link type="primary" @click="openWeb(scope.row.filePath)"> <Icon size="19" icon="ep:view"  /> </el-button>
+                <el-button v-if="scope.row.fileType!=='content'" link type="primary" @click="openWeb(scope.row.filePath)"> <Icon size="19" icon="ep:view"  /> </el-button>
               </template>
             </el-table-column>
-<!--            <el-table-column label="备注" align="center" prop="remark" />-->
-<!--            <el-table-column-->
-<!--              label="创建时间"-->
-<!--              align="center"-->
-<!--              prop="createTime"-->
-<!--              :formatter="dateFormatter"-->
-<!--              width="180px"-->
-<!--            />-->
+            <el-table-column :label="t('file.dept') " align="center" prop="deptName" />
+            <el-table-column :label="t('file.device') " align="center" prop="deviceName" min-width="220"/> />
             <el-table-column :label="t('file.operation') " align="center" width="160">
               <template #default="scope">
                 <div class="flex items-center justify-center">
@@ -70,39 +93,10 @@
                   <el-button type="primary" link @click="handleView( scope.row)">
                     <Icon icon="ep:view" />{{t('file.preview')}}
                   </el-button>
-<!--                  <el-dropdown-->
-<!--                    @command="(command) => handleCommand(command, scope.row)"-->
-<!--                    v-hasPermi="[-->
-<!--                      'system:user:delete',-->
-<!--                      'system:user:update-password',-->
-<!--                      'system:permission:assign-user-role'-->
-<!--                    ]"-->
-<!--                  >-->
-<!--                    <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>-->
-<!--                    <template #dropdown>-->
-<!--                      <el-dropdown-menu>-->
-<!--                        <el-dropdown-item command="handleDelete">-->
-<!--                          <Icon icon="ep:delete" />删除-->
-<!--                        </el-dropdown-item>-->
-<!--                        <el-dropdown-item command="fileView">-->
-<!--                          <Icon icon="ep:view" />预览-->
-<!--                        </el-dropdown-item>-->
-<!--                        <el-dropdown-item command="fileDownload">-->
-<!--                          <Icon icon="ep:view" />下载-->
-<!--                        </el-dropdown-item>-->
-<!--                      </el-dropdown-menu>-->
-<!--                    </template>-->
-<!--                  </el-dropdown>-->
                 </div>
               </template>
             </el-table-column>
           </el-table>
-          <Pagination
-            :total="total"
-            v-model:page="queryParams.pageNo"
-            v-model:limit="queryParams.pageSize"
-            @pagination="getList"
-          />
         </ContentWrap>
       </div>
   </el-row>
@@ -127,12 +121,21 @@ import PmsTree from '@/views/system/tree/PmsTree.vue'
 import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
 import {DICT_TYPE} from "@/utils/dict";
 import {IotInfoClassifyApi} from "@/api/pms/info";
+import {IotTreeApi} from "@/api/system/tree";
 defineOptions({ name: 'IotTree' })
 
 const container = ref(null)
 const leftWidth = ref(350) // 初始左侧宽度
 const rightWidth = ref(window.innerWidth * 0.8)
 let isDragging = false
+
+// const inContent = async (row) =>{
+//   debugger
+//   queryParams.classId = row.id;
+//   const data = await IotInfoApi.IotInfoApi.getChildContentFile(queryParams)
+//   list.value = data
+// }
+
 const openWeb = (url) => {
   window.open('http://1.94.244.160:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
 }
@@ -144,11 +147,21 @@ const startDrag = (e) => {
   document.addEventListener('mousemove', onDrag)
   document.addEventListener('mouseup', stopDrag)
 }
+const topNodeId = ref('')
 const successList = async (id) => {
-  //queryParams.classId = id
+  queryParams.classId = id
+  topNodeId.value = id
+  const rootItem = breadcrumbs.value.find(item => item.type === 'root');
+  if (rootItem) {
+    rootItem.id = id;
+  }
+
   await getList()
   // queryParams.classId = ''
 }
+
+
+
 const onDrag = (e) => {
   if (!isDragging) return
 
@@ -176,12 +189,12 @@ const loading = ref(true) // 列表的加载中
 const { params } = useRoute() // 查询参数
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const list = ref<IotDeviceVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
+// const total = ref(0) // 列表的总页数
 const id = params.id as unknown as number
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  fileName: null,
+  filename: null,
   createTime: [],
   deviceId: null,
   classId: null,
@@ -198,24 +211,6 @@ const formData = ref({
   remark: undefined,
   classId: undefined
 })
-const handleCommand = (command: string, row: IotInfoVO) => {
-  switch (command) {
-    case 'handleDelete':
-      handleDelete(row.id)
-      break
-    case 'handleUpdate':
-      openForm('update', row.id)
-      break
-    case 'fileView':
-      handleFileView(row.filePath)
-      break
-    case 'fileDownload':
-      handleDownload(row.filePath)
-      break
-    default:
-      break
-  }
-}
 const handleDownload = async (url) => {
   try {
     const response = await fetch(url)
@@ -264,7 +259,53 @@ const deviceId = ref('')
 const clickNodeId = ref('')
 const nodeId = ref('')
 const classType = ref('')
+
+const breadcrumbs = ref([
+  { id: null, name: '科瑞石油技术',type:'root' } // 根节点
+])
+
+// 共享的面包屑更新逻辑
+const updateBreadcrumbs = async (node) => {
+  // 查找当前节点是否已在面包屑中
+  const currentIndex = breadcrumbs.value.findIndex(item => item.id === node.id)
+
+  if (currentIndex > -1) {
+    // 如果已存在则截断后面的节点
+    breadcrumbs.value = breadcrumbs.value.slice(0, currentIndex + 1)
+  } else {
+    // 新增节点到面包屑
+    breadcrumbs.value.push({ id: node.id, name: node.filename || node.name })
+  }
+
+  // 更新表格数据
+  queryParams.classId = node.id;
+  const data = await IotInfoApi.IotInfoApi.getChildContentFile(queryParams)
+  list.value = data
+}
+
+// 表格行点击事件
+const inContent = async (row) => {
+  queryParams.filename = ''
+  formLoading.value = true
+  // 调用共享方法更新面包屑和表格
+  await updateBreadcrumbs(row)
+  // 可以添加其他表格行点击需要的逻辑
+  queryParams.classId = row.id;
+  const data = await IotInfoApi.IotInfoApi.getChildContentFile(queryParams)
+  formLoading.value = false
+  list.value = data
+}
+
+// 文件树节点点击事件
 const handleFileNodeClick = async (row) => {
+  queryParams.filename = ''
+  const parentItems = await IotTreeApi.getParentIds(row.id);
+  breadcrumbs.value = [];
+  debugger
+  parentItems.forEach(item => {
+    breadcrumbs.value.push({ id: item.id, name: item.name,type:'root' } );
+  })
+
   queryParams.classId = row.id
   classType.value = row.type
   if (row.type==='device') {
@@ -288,6 +329,55 @@ const handleFileNodeClick = async (row) => {
   nodeId.value = row.id
   await getList()
 }
+
+// 面包屑点击事件
+const handleBreadcrumbClick = async (index) => {
+  queryParams.filename = ''
+  formLoading.value = true
+  // 忽略当前节点的点击
+  if (index === breadcrumbs.value.length - 1) return
+
+  // 截断面包屑到点击的节点
+  const targetBreadcrumbs = breadcrumbs.value.slice(0, index + 1)
+  breadcrumbs.value = targetBreadcrumbs
+
+  // 获取对应节点的数据
+  let targetId = targetBreadcrumbs[index].id
+  if (!targetId){
+    targetId = topNodeId.value
+  }
+  queryParams.classId = targetId
+  const data = await IotInfoApi.IotInfoApi.getChildContentFile(queryParams)
+  list.value = data
+  formLoading.value = false
+}
+
+
+// const handleFileNodeClick = async (row) => {
+//   queryParams.classId = row.id
+//   classType.value = row.type
+//   if (row.type==='device') {
+//     deviceId.value = row.originId
+//     const queryParam = {
+//       deviceId: row.originId,
+//       pageNo: 1,
+//       pagesize: 10,
+//     }
+//     const data = await IotInfoClassifyApi.getIotInfoClassifyPage(queryParam)
+//     debugger
+//     if (data){
+//       const target = data.filter((item)=> item.parentId===0)
+//       clickNodeId.value = target[0].id
+//     }
+//   } else if (row.type === 'file'){
+//     clickNodeId.value = row.originId
+//   } else if (row.type==='dept') {
+//     // message.error("请选择设备及文件节点")
+//     // return
+//   }
+//   nodeId.value = row.id
+//   await getList()
+// }
 /** 获得详情 */
 // const getDetail = async () => {
 //   if (id) {
@@ -303,10 +393,9 @@ const handleFileNodeClick = async (row) => {
 const getList = async () => {
   formLoading.value = true
   try {
-    // queryParams.deviceId = deviceId.value
-    const data = await IotInfoApi.IotInfoApi.getIotInfoFilePage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    const data = await IotInfoApi.IotInfoApi.getChildContentFile(queryParams)
+    debugger
+    list.value = data
   } finally {
     formLoading.value = false
   }
@@ -332,6 +421,53 @@ onMounted(async () => {
 })
 </script>
 <style scoped>
+::v-deep .breadcrumb-container {
+  padding: 12px 16px;
+  background-color: #f5f7fa;
+  border-radius: 6px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+}
+::v-deep .custom-breadcrumb-item {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+/* 面包屑文本样式 */
+::v-deep .el-breadcrumb__item .el-breadcrumb__inner {
+  color: #101010;
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+}
+
+/* 可点击项悬停效果 */
+::v-deep .el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner:hover {
+  color: #409eff;
+  background-color: rgba(64, 158, 255, 0.1);
+  cursor: pointer;
+}
+
+/* 当前项样式 */
+::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+  color: #1890ff;
+  font-weight: 500;
+  cursor: default;
+}
+
+/* 分隔符样式优化 */
+::v-deep .el-breadcrumb__separator {
+  margin: 0 8px;
+  color: #0954f6;
+  font-size: 12px;
+}
+
+
+.custom-table {
+  cursor: pointer;
+  --el-table-row-hover-bg-color: #f5f7fa; /* 优化悬停背景色 */
+}
+
 .container-tree {
   display: flex;
   height: 100%;