档案查询，档案柜

src/styles/page/using/query.scss

@@ -200,3 +200,10 @@
 .hover-hand{
     cursor: pointer;
 }
+
+.el-carousel.hc-file-cabinet {
+    height: 100%;
+    .el-carousel__container {
+        height: 100%;
+    }
+}

src/styles/page/using/scoped/query.scss

@@ -228,3 +228,147 @@
         font-weight: 400;
     }
 }
+
+.hc-file-cabinet-gui {
+    position: relative;
+    height: 100%;
+    display: flex;
+    padding: 24px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: flex-start;
+    justify-content: flex-start;
+    .gui-item {
+        position: relative;
+        height: 100%;
+        width: 25%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .gui-view {
+            position: relative;
+            cursor: pointer;
+            transition: transform .2s;
+            img {
+                width: 100%;
+            }
+            .num {
+                position: absolute;
+                left: 53%;
+                top: 15.8%;
+                color: white;
+                font-weight: bold;
+            }
+            &:hover {
+                transform: scale(1.3);
+            }
+        }
+    }
+}
+
+.hc-gui-info-drawer {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    .hc-gui-info-img {
+        position: relative;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .gui-info-img {
+            position: relative;
+            height: 100%;
+            max-height: 690px;
+            img {
+                position: relative;
+                height: 100%;
+            }
+            .gui-file-item-box {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                display: flex;
+                padding: 18px;
+                flex-direction: row;
+                flex-wrap: wrap;
+                align-items: center;
+                align-content: flex-start;
+                justify-content: flex-start;
+                .gui-file-item {
+                    position: relative;
+                    display: flex;
+                    width: 25%;
+                    height: 19.6%;
+                    padding: 1%;
+                    .item {
+                        position: relative;
+                        background: #927a6a;
+                        height: 100%;
+                        width: 12%;
+                        padding: 6px 3px;
+                        font-size: 13px;
+                        border: 1px solid #5d4848;
+                        border-radius: 3px;
+                        writing-mode: vertical-lr;
+                        text-orientation: upright;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        cursor: pointer;
+                        transform: skew(4deg,0);
+                        transition: transform .2s;
+                        &.query {
+                            background: #ffddc6;
+                        }
+                        &:hover {
+                            z-index: 22;
+                            background: #A16222;
+                            border: 1px solid #bbbbbb;
+                            transform: scale(1.2) skew(4deg,0);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .hc-gui-info-data {
+        position: relative;
+        height: 100%;
+        flex: 1;
+        padding-left: 40px;
+        .hc-gui-data-container {
+            position: relative;
+            height: calc(100% - 50px);
+            .info-item {
+                position: relative;
+                display: flex;
+                color: #101010;
+                .title {
+                    margin-right: 14px;
+                    font-weight: bold;
+                    span + span {
+                        margin-left: 29px;
+                    }
+                }
+                .text {
+                    flex: 1;
+                }
+            }
+            .info-item + .info-item {
+                margin-top: 14px;
+            }
+        }
+        .btn-box {
+            position: relative;
+            height: 50px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: flex-end;
+        }
+    }
+}

src/views/using/query.vue

@@ -2,7 +2,7 @@
     <div class="hc-page-box" id="carry-spot-checks-layout-target">
         <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
             <div  v-if="isShowheader" class="flex_box">
-               
+
                     <div class="hc-arrow-icon">
                         <HcIcon name="arrow-left-s"/>
                     </div>
@@ -18,7 +18,7 @@
                     <div class="hc-arrow-icon">
                         <HcIcon name="arrow-right-s"/>
                     </div>
-              
+
             </div>
             <div class="hc-query-input-box">
                 <el-input placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开" v-model="searchInput" clearable @clear="clearinput">
@@ -95,14 +95,15 @@
                     <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false"/>
                 </div>
                 <div class="extra">
-                    <el-button type="primary" hc-btn>
+                    <el-button v-if="tabKey === 'tab1'">
                         <HcIcon name="download"/>
                         <span>下载</span>
                     </el-button>
+                    <HcNewSwitch :datas="tabGuiData" :keys="tabGuiKey" @change="tabGuiChange" v-if="tabKey === 'tab2'"/>
                 </div>
             </div>
 
-            <div class="hc-gather-card-box" :class="tableAllShow?'file-table':''">
+            <div class="hc-gather-card-box" :class="tableAllShow?'file-table':''" v-if="tabKey === 'tab1'">
                 <HcCardItem ui="hc-card-item-main">
                     <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCurrentRow isCheck @selection-change="tableSelection" @row-click="tableRowClick"   :ui="hoverHand?'hover-hand':''">
                         <template #action="{row,index}">
@@ -133,8 +134,100 @@
                     </template> -->
                 </HcCardItem>
             </div>
+
+            <!--档案柜-->
+            <div class="hc-gather-card-box">
+                <HcCardItem ui="hc-card-item-main" v-if="tabKey === 'tab2'">
+                    <el-carousel class="hc-file-cabinet" :autoplay="false" :loop="false" indicator-position="none">
+                        <el-carousel-item v-for="item in guiItemData">
+                            <div class="hc-file-cabinet-gui">
+                                <div class="gui-item" v-for="items in item.children">
+                                    <el-popover effect="dark" placement="top" :title="items.name + '柜'" :width="200"
+                                                :hide-after="0" :offset="-10" :content="items.content">
+                                        <template #reference>
+                                            <div class="gui-view" @click="guiItemClick(items)">
+                                                <img :src="imageViewGui" alt="">
+                                                <span class="num">{{items.name}}</span>
+                                            </div>
+                                        </template>
+                                    </el-popover>
+                                </div>
+                            </div>
+                        </el-carousel-item>
+                    </el-carousel>
+                </HcCardItem>
+            </div>
+
         </HcCard>
 
+        <!--柜子侧面-->
+        <HcDrawer :show="isGuiInfoDrawer"
+                  direction="rtl"
+                  to-id="carry-spot-checks-layout-target"
+                  uis="hc-carry-spot-checks-target"
+                  @close="onCloseGuiInfoDrawer">
+            <template #header>
+                <div class="w-96">
+                    <el-input size="large" v-model="searchForm.queryValue" placeholder="请输入关键词检索" clearable/>
+                </div>
+                <div class="ml-2">
+                    <el-button type="primary" size="large">
+                        <HcIcon name="search-2"/>
+                        <span>搜索</span>
+                    </el-button>
+                </div>
+            </template>
+            <div class="hc-gui-info-drawer">
+                <div class="hc-gui-info-img">
+                    <div class="gui-info-img">
+                        <img :src="imageViewGui1" alt="">
+                        <div class="gui-file-item-box">
+                            <div class="gui-file-item" v-for="item in guiInfoData">
+                                <div class="item" :class="index === 2 || index === 5 ?'query': ''" v-for="(items, index) in item.children">{{items.name}}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="hc-gui-info-data">
+                    <div class="hc-gui-data-container">
+                        <el-scrollbar>
+                            <div class="info-item">
+                                <div class="title">案卷题名：</div>
+                                <div class="text">安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="title">
+                                    <span>密</span>
+                                    <span>级：</span>
+                                </div>
+                                <div class="text">机密</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="title">保管期限：</div>
+                                <div class="text">永久</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="title">卷内文件：</div>
+                                <div class="text">9</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="title">起止日期：</div>
+                                <div class="text">2022.02.12~2023.11.02</div>
+                            </div>
+                            <div class="info-item">
+                                <div class="title">立卷单位：</div>
+                                <div class="text">贵州路桥集团xxxxx</div>
+                            </div>
+                        </el-scrollbar>
+                    </div>
+                    <div class="btn-box">
+                        <el-button type="primary">打开案卷</el-button>
+                        <el-button @click="onCloseGuiInfoDrawer">关闭</el-button>
+                    </div>
+                </div>
+            </div>
+        </HcDrawer>
+
         <!--展开抽查-->
         <HcDrawer :show="isCarrySpotChecksDrawer" uis="hc-carry-spot-checks-target" to-id="carry-spot-checks-layout-target" @close="onCarrySpotChecksDrawerClose">
             <div class="hc-carry-spot-checks-pdf">
@@ -262,16 +355,16 @@
                             </div>
                         </template>
                         <!-- <HcNodeTree :projectId="projectId" :contractId="contractId"/> -->
-                        <el-tree 
+                        <el-tree
                         class="col_tree"
                         node-key="id"
-                        ref="nodetreeEl" 
-                        :props="defaultProps" 
-                        show-checkbox  
-                        v-loading="nodetreeElloading" 
-                        lazy  
-                        :load="loadNode" 
-                        :data="Nodetreedata" 
+                        ref="nodetreeEl"
+                        :props="defaultProps"
+                        show-checkbox
+                        v-loading="nodetreeElloading"
+                        lazy
+                        :load="loadNode"
+                        :data="Nodetreedata"
                      >
                         <template #default="{ node, data }">
                             <span class="custom-tree-node">
@@ -301,6 +394,9 @@ import website from '~src/config/index'
 import archiveQueryApi from "~api/using/query.js";
 import tuningApi from "~api/archiveConfig/tuning.js";
 
+import imageViewGui from "~src/assets/view/gui.png";
+import imageViewGui1 from "~src/assets/view/gui1.png";
+
 //变量
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId);
@@ -334,7 +430,7 @@ onMounted(() => {
 })
 //截取日期
 const splitDate=(val)=>{
-    
+
     return val.substring( 0,10)
 }
 //处理数据
@@ -367,7 +463,7 @@ const deltag=(item)=>{
         annual.value=[{key: 'all', name: '所有'}]
     }
 
-    //设置月份  
+    //设置月份
     month.value=month.value.filter((ele)=>{
         if(item.name!==ele.name){
             return item
@@ -378,7 +474,7 @@ const deltag=(item)=>{
             return item
         }
     })
-  
+
     searchForm.value.month=rowsToArr(month.value)
     if(month.value.length==0){
         month.value=[{key: 'all', name: '所有'}]
@@ -428,7 +524,7 @@ const deltag=(item)=>{
     if(classes.value.length==0){
         classes.value=[{key: 'all', name: '所有'}]
     }
-    
+
 }
 //搜索表单
 const searchForm = ref({
@@ -627,7 +723,7 @@ const getCarrierTypeByDictdata=async()=>{
         arrdata.forEach((ele)=>{
             classess.value.push({key:ele.dictKey,name:ele.dictValue})
         })
-    } 
+    }
 }
 
 const classesClick = (item) => {
@@ -688,7 +784,7 @@ const nodeTreeModalSave = () => {
     nodeTreeModal.value = false
     let keys= nodetreeEl.value[treeIndex.value].getCheckedKeys()
     searchForm.value.nodeIds=keys.join(',')||singleId.value
- 
+
 }
 
 
@@ -711,8 +807,8 @@ const searchFileClick = (type) => {
     filteringShow.value = ''
     searchForm.value.searchType=type
     getTableData()
-    
-    
+
+
 }
 
 //按案卷查询
@@ -724,7 +820,7 @@ const searchCaseClick = (type) => {
 
 
 //tab数据和相关处理
-const tabKey = ref('tab1')
+const tabKey = ref('tab2')
 const tabData = ref([
     {key:'tab1', name: '案卷列表'},
     {key:'tab2', name: '档案柜'},
@@ -768,10 +864,10 @@ const getTableData = async () => {
     for (let key in  searchForm.value) {
         if(searchForm.value[key]==='all'||searchForm.value[key]==='所有'){
             searchForm.value[key]=''
-         
+
         }
     }
-   
+
     const { error, code, data } = await archiveQueryApi.getarchiveQueryPage({
         ...searchForm.value,
         projectId: projectId.value,
@@ -786,7 +882,7 @@ const getTableData = async () => {
         tableData.value = []
         searchForm.value.total = 0
     }
-    tableFileCloseClick()   
+    tableFileCloseClick()
     if(searchForm.value.searchType==='2'){
         if(tableData.value.length>0&&tableData.value[0]?.approvalFileList.length>0){
             // tableFileData.value =getArrValue( tableData.value[0]['approvalFileList'])
@@ -801,7 +897,7 @@ const getTableData = async () => {
             tableAllShow.value = true;
             tableFileShow.value = true;
         }
-       
+
     }
 
 }
@@ -855,8 +951,8 @@ const tableRowClick = ({row}) => {
     fileInfo.value=row
     // fileInfo.value.pageN=row['approvalFileList'].length||0
      fileInfo.value.pageNumber=row['approvalFileList'].length||0
-   
-   
+
+
 }
 const tableFileCloseClick = () => {
     tableAllShow.value = false;
@@ -871,14 +967,14 @@ const viewPdf = async (id) => {
     pdfLoading.value=false
     if (!error && code === 200) {
         if (data) {
-          
+
             return data
             // window.open(data, '_blank')
         } else {
             window.$message?.warning('文件不存在')
         }
 
-    } 
+    }
     // else {
     //     window.$message?.warning(msg)
     // }
@@ -886,8 +982,8 @@ const viewPdf = async (id) => {
 const consultFileClick =async (row,type) => {
     isCarrySpotChecksDrawer.value = true
     console.log(row,'row');
-   
-  
+
+
     // pdfUrl.value=row.approvalFileList
 
    if(type===1){
@@ -901,10 +997,10 @@ const consultFileClick =async (row,type) => {
    }
     if(type===1&& cscTableData1.value.length>0&&cscTableData1.value[0]['pdfFileUrl']){
         console.log('查阅案卷');
-       
+
         const url=await viewPdf(row.id)
         console.log(url,'url');
-       
+
         pdfUrl.value=url
         checkId.value=''
         // checkId.value=cscTableData1.value[0].id
@@ -959,7 +1055,7 @@ const cscTableColumn2 = [
     {key:'name', name: '竣工图资料', align: 'center'}
 ];
 const cscTableData2 = ref([
- 
+
 ])
 
 //计量资料
@@ -1056,7 +1152,7 @@ const checkColId=ref(false)
 const checkNodeid=ref('')
 const singleId=ref('')
 const changeCheckColId=(item)=>{
-  
+
     let arr= nodeTreeArr.value.filter((ele)=>{
             if(ele.checkColId){
             return ele
@@ -1090,14 +1186,14 @@ const changeCheckColId=(item)=>{
                     nodetreeEl?.value[treeIndex.value].setCheckedKeys(idsarr,true);
                 })
             }
-           
+
         }
-     
+
     }
 
-    
- 
- 
+
+
+
 
 }
 const nodeTreeArrLoad=ref(false)
@@ -1109,7 +1205,7 @@ const getnodeTabData=async()=>{
         contractId:contractId.value,
 
     })
-   
+
     if (!error && code === 200) {
         console.log(data,'mulushu');
         nodeTreeArr.value = getArrValue(data)
@@ -1117,7 +1213,7 @@ const getnodeTabData=async()=>{
             item.checkColId=false
         })
         nodeTreeArrLoad.value=false
-    
+
     } else {
         nodeTreeArr.value = []
         nodeTreeArrLoad.value=false
@@ -1132,7 +1228,7 @@ const defaultProps = {
 const Nodetreedata=ref([])
 const nodetreeEl=ref(null)
 const activeName = ref('')
-const nodeTreeArr = ref([]) 
+const nodeTreeArr = ref([])
 
 const treeIndex=ref(0)
 const collapseChange = (key) => {
@@ -1154,7 +1250,7 @@ const getNodetreedata=async()=>{
         Nodetreedata.value = getArrValue(data)
 
     } else {
-        Nodetreedata.value = [] 
+        Nodetreedata.value = []
     }
 }
 const checkNodeids=ref([])
@@ -1166,6 +1262,242 @@ const loadNode=(tree, resolve)=>{
             resolve(resdata);
         })
 }
+
+
+//档案柜的tab数据和相关处理
+const tabGuiKey = ref('tab1')
+const tabGuiData = ref([
+    {key:'tab1', name: '业主档案'},
+    {key:'tab2', name: '施工档案'},
+    {key:'tab3', name: '监理档案'},
+]);
+const tabGuiChange = (item) => {
+    tabGuiKey.value = item?.key;
+}
+
+
+//测试档案柜的数据
+const guiItemData = ref([
+    {
+        children: [
+            {id: '柜子id或其他的唯一值', name: '01', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '02', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '03', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '04', content: '档号xxxx ~ 档号xxxxx'},
+        ]
+    },
+    {
+        children: [
+            {id: '柜子id或其他的唯一值', name: '05', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '06', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '07', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '08', content: '档号xxxx ~ 档号xxxxx'},
+        ]
+    },
+    {
+        children: [
+            {id: '柜子id或其他的唯一值', name: '09', content: '档号xxxx ~ 档号xxxxx'},
+            {id: '柜子id或其他的唯一值', name: '10', content: '档号xxxx ~ 档号xxxxx'},
+        ]
+    }
+])
+
+//柜子被点击
+const isGuiInfoDrawer = ref(false)
+const guiItemClick = (item) => {
+    console.log(item)
+    isGuiInfoDrawer.value = true
+}
+
+//关闭抽屉
+const onCloseGuiInfoDrawer = () => {
+    isGuiInfoDrawer.value = false
+}
+
+//案卷文件数据
+const guiInfoData = ref([
+    {
+        children: [
+            {id: '1', name: '123Abc'},
+            {id: '2', name: '12测试一下Ab'},
+            {id: '3', name: 'ABCDEFG'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+    {
+        children: [
+            {id: '1', name: '123456789'},
+            {id: '2', name: '123456789'},
+            {id: '3', name: '123456789'},
+            {id: '4', name: '123456789'},
+            {id: '5', name: '123456789'},
+            {id: '6', name: '123456789'},
+            {id: '7', name: '123456789'},
+            {id: '8', name: '123456789'},
+        ]
+    },
+])
+
 </script>
 
 <style lang="scss" scoped>
@@ -1181,8 +1513,8 @@ const loadNode=(tree, resolve)=>{
     position: relative;
     width: calc(100% - 40px);
     overflow: hidden;
-   
- 
+
+
 }
 .scrollbar-content {
     white-space: nowrap;