ShutongInterconnectedChemicalCloudPlatform/src/views/system/monitor/online/page.vue

<!--
@ 作者: 秦东
@ 时间: 2025-10-21 10:06:51
@ 备注: 在线人数
-->
<script lang='ts' setup>

import {
  getMyPeoplceAndSunOrg
} from "@/api/system/roleapi/postrole";
import type { LoadFunction } from 'element-plus'

interface Tree {
  name: string
  leaf?: boolean
}

const props = {
  label: 'name',
  children: 'zones',
  isLeaf: 'isLeaf',
}
let time = 0
const loadNode: LoadFunction<Tree> = (node, resolve, reject) => {
    console.log("node============>",node)
     console.log("resolve===>",resolve)
  if (node.level === 0) {
    getMyPeoplceAndSunOrg({id:"313",level:node.level}).then((res) => {
        console.log("res================>",res)
        resolve(res.data)
    })
  } 

  if (node.level > 0){
    getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => {
        console.log("res=========1=======>",res.data) 
        if(res.data && Array.isArray(res.data) && res.data.length > 0){
            resolve(res.data)
        }else{
            resolve([])
        }
    }).catch(() => {
        return reject()
    })
  }



//   time++
//   if (node.level > 0){
//     setTimeout(() => {

//         if (time > 3) {
//             console.log("node.id============>",node.id)
//             console.log("node.level============>",node.level)
//             getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => {
//                 console.log("res=========1=======>",res.data)
//                 // resolve(res.data.data?.map((item: any) => ({
//                 //     name: item.orgName,
//                 //     id: item.orgId,
//                 //     isLeaf: item.isLeaf,
//                 //     zones: []
//                 // })) || [])
//                 if(res.data && Array.isArray(res.data) && res.data.length > 0){
//                     resolve(res.data)
//                 }else{
//                     resolve([])
//                 }
//             })
//         }else{
//             return reject()
//         }
//     }, 3000)
//   }
}
//选择行政组织
const pickOrgTree = (data:any) => {
    console.log("监测赋权组------->",data)
}
</script>
<template>
    <div class="roleBox">
        <el-tree
            style="max-width: 100%"
            :props="props"
            :load="loadNode"
            :highlight-current="true"
            :expand-on-click-node="false"
            node-key="id"
            lazy
            @node-click="pickOrgTree"
        />
    </div>
</template>
<style  lang='scss' scoped>
.roleBox{
    display: flex;
    width: 100%;
    height: calc(100vh - 170px);
    padding: 15px 20px 0 20px;
    justify-content: space-between;
    .roleLeft{
        width: 350px;
        height: calc(100vh - 185px);
        background-color: #FFFFFF;
        .butBox{
            display: flex;
            justify-content: space-between;
            padding: 0 10px 10px 10px;
        }
        .searchBox{
            padding: 0 10px 5px 10px;
        }
        .treeBox{
            height: calc(100vh - 330px);
            
        }
    }
    .roleright{
        width: calc(100% - 370px);
        height: calc(100vh - 185px);
        background-color: #FFFFFF;
        overflow: hidden;
        :deep .el-tabs__content{
            padding: 15px 15px  15px  0px;
        }
        :deep .el-main{
            padding: 0 15px;
        }
        
        .userTitleBox{
            display: flex;
            justify-content: space-between;
            padding: 0px 0px 15px 0px;
            border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
        }
        .userTitleBoxes{
            display: flex;
            justify-content: space-between;
        }
        .pickButBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .scrollBox{
            margin-top: 5px;
            height: calc(100vh - 320px);
        }
        
    }
    .tabsTitle{
        padding: 0 15px;
    }
    .tabsTitleCont{
        padding: 0 35px;
    }
    .treeRoleBox{
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    .spanButBox{
        span{
            padding: 0 5px;
        }
    }
}
.tree_sapn {
  padding: 0 10px 0 0;
}


.table_body {
  background-color: #ffffff;
  width: 100%;
  border-collapse: collapse;
  /*
       * 设置边框
       */
  td,
  th {
    border: 1px solid #cccccc;
    padding: 5px;
    table {
      width: 100%;
      td,
      th {
        border: 0px solid #cccccc;
        padding: 0px;
      }
    }
  }
}

.appListBox {
  width: 100%;
  li {
    padding: 10px 2px;
    border-bottom: 1px solid #ececec;
    cursor: pointer;
  }
  li.active {
    background-color: #a0cfff;
  }
}
.tab_pane_box {
  height: calc(100vh - 310px);
  overflow: hidden;
  overflow-y: auto;
    .table_body {
        background-color: #ffffff;
        width: 100%;
        border-collapse: collapse;
        /*
            * 设置边框
            */
        td,
        th {
            border: 1px solid #cccccc;
            padding: 5px;
            table {
            width: 100%;
            td,
            th {
                border: 0px solid #cccccc;
                padding: 0px;
            }
            }
        }
    }
}
.row_head{
    background-color: #f5f7fa;
    color: #000000;
    text-align: center;
    border: 1px solid #E4E7ED;
}
.roe_col_head{
    padding: 5px 5px;
}
.left_right{
    border-left: 1px solid #E4E7ED;
    border-right: 1px solid #E4E7ED;
    border-bottom: 1px solid #E4E7ED;
}
.left_line{
    border-right: 1px solid #E4E7ED;
}
.tab_pane_body {
  height: calc(100vh - 340px);
  overflow: hidden;
  overflow-y: auto;
}
.tab_pane_bodyes {
  height: calc(100vh - 320px);
  overflow: hidden;
  overflow-y: auto;
}
.appPickPower{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.userBox{
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-items: space-between;
            padding: 0 10px;
            border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2);
            div{
                span{
                    display: flex;
                    width: 100%;
                    padding: 0 5px;
                    color:rgba($color: #000000, $alpha: 0.6);
                }
            }
}
</style>