tree 树形加载及增删改

//异步1
<template>

    <div class="addequipment org">
        <div class="top">
            <div class="topfirst">菜单管理</div>
            <div class="addequi" @click='addNew'>添加</div>
        </div>

        <div class="center ">
            <!-- 菜单tree -->
            <div class="inputlist">
                <el-tree
                    class="org-tree"
                    :data="menuList"
                    :props="defaultProps"
                    node-key="id"
                    :expand-on-click-node="false"
                    :load="loadChildNode"
                    lazy
                >
                    <span class="custom-tree-button" slot-scope="{ node, data }">
                        <span @click='itemHandle(data)'>{{ node.label }}</span>
                        <span>
                            <el-button type="text" size="medium" icon="el-icon-edit-outline" @click="() => edit(data)">
                            </el-button>
                            <el-button type="text" size="medium" icon="el-icon-circle-plus-outline" @click="() => addNew(data)">
                            </el-button>
                            <el-button type="text" size="medium" icon="el-icon-delete" @click="() => deleteMenu(data)">
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>
            <!-- 权限操作表格 -->
            <handlePermission
                ref='handlePermission'
                :isShowPermissionTable='isShowPermissionTable'
                :menuId='menuId'
                v-show='isShowPermissionTable'
            >
            </handlePermission>
        </div>

        <!-- 新增修改菜单弹窗 -->
        <addNewMenu
            ref='addNewMenu'
            @getMenuTree='getData'
        >
        </addNewMenu>

    </div>
</template>

<script>

import addNewMenu from './component/addNewMenu'
import handlePermission from './component/handlePermission'
import {
    getMenuList,
    deleteMenu,
    listByPid,
}
from "@/api/menu.js";

export default {
    name: "menuMang",
    computed: {},
    data() {
        return {
            formLabelWidth: "120px",
            dialogFormVisible: false,
            dialogTitle: "添加",
            menuId: "",
            sPid: "",
            form: {
                id: "",
                name: "",
                type: 1,
                url: "",
                path: "",
                icon: "",
                enabled: true,
                parentId: "",
                sortNum: ""
            },
            menuList:[],
            defaultProps: {
                children: "children",
                label: "name"
            },
            menuId: '',
            isShowPermissionTable: false
        };
    },
    components: {
        addNewMenu,
        handlePermission
    },

    mounted() {
        this.getData();
    },
    methods: {
        //点击父节点加载子级数据
        loadChildNode(node,resolve) {
            if(node.loading){
                this.itemHandle(node.data,resolve)
            }
        },
        // 点击节点
        itemHandle(data,resolve) {
            //动态加载子菜单
            console.log('data',data)
            this.menuId = ''
            if(resolve){
                listByPid({ pid: data.id }).then(res => {
                    let { body, message } = res;
                    if (message == "SUCCESS") {
                        resolve(body)
                    }
                })
            }
            // 如果节点type为0则加载权限操作表格
            if (data.type == 0) {
                this.menuId = data.id
                this.isShowPermissionTable = true
                this.$refs.handlePermission.getPermissionList(data.id)
            } else {
                this.isShowPermissionTable = false
            }
        },

        //符合条件显示权限table
        showPermissionTable() {
            this.isShowPermissionTable = true
            this.$refs.handlePermission.showTable(this.menuId)
        },

        // 加载菜单数据
        getData() {
            this.dialogFormVisible = false;
            getMenuList().then(res => {
                let {
                    body,
                    message
                } = res;
                if (res.code == 200) {
                    this.menuList = res.body
                }
            });
        },
        //打开新增修改弹窗
        addNew(data) {
            let parentId = data.parentId
            let menuId = data.id
            this.$refs.addNewMenu.showDialog(1, menuId, parentId)
        },
        //打开编辑弹窗
        edit(data) {
            let parentId = data.parentId
            let menuId = data.id
            this.$refs.addNewMenu.showDialog(2, menuId, parentId)
        },
        //删除菜单
        deleteMenu(data) {
            this.$confirm('确定要删除吗')
                .then(_ => {
                    deleteMenu({id: data.id}).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getData()
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                })
                .catch(_ => {
                    this.$message({
                        message: '确认取消',
                        type: 'info'
                    });
                });
        },
    }
};
</script>

<style lang="less" scoped>
    .addequipment {
        position: absolute;
        top: 120px;
        left: 0;

        width: 100%;
        box-sizing: border-box;
        padding: 1% 1% 0 5%;
        color: #FFFFFF;
        .top {
            width: 100%;
            height: 50px;
            background: rgba(2,31,42,.4);
            display: flex;
            align-items: center;
            font-size: 20px;
            margin-bottom: 20px;
            .topfirst {
                color: #01C1DA;
                padding: 0 40px 0 20px;
            }
            .addequi {
                background: #1490FF;
                width: 130px;
                height: 30px;
                font-size: 16px;
                text-align: center;
                line-height: 28px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
        .center {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            background:rgba(2,21,62,.4);
            overflow: hidden;
            .inputlist {
                width: 100%;
                font-size: 16px;
                color: #FFFFFF;
                float: left;
                box-sizing: border-box;
                padding: 30px 10px 0 10px;
                margin-bottom: .2rem;
                .org-tree {
                    width: 100%;
                    background: rgba(0, 0, 0, 0);
                    color: #FFFFFF;
                }
            }
            .tablelist {
                width: 75%;
                margin-top: 30px;
                float: left;
                .styleed {
                    display: inline-block;
                    padding: 1px 2px;
                    color: #12B1D2;
                    cursor: pointer;
                }
                .span1 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span2 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span3 {
                    display: inline-block;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
            }
        }
    }
</style>

//异步2
<template>
    <div class="addequipment org">
        <div class="top">
            <div class="topfirst">组织管理</div><div class="addequi" @click="addUser">添加关联用户</div>
        </div>
        <div class="center ">
            <div class="inputlist">
                <el-tree
                        class="org-tree"
                        node-key="id"
                        check-strictly
                        :load="loadNode"
                        :props="defaultProps"
                        lazy
                        ref="treeForm"
                        @node-click="handleNodeClick"
                        :expand-on-click-node="false"
                >

                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                            <el-button
                                    type="text"
                                    size="medium"
                                    icon="el-icon-edit-outline"
                                    @click="() => editor(node,data)">
                            </el-button>
                            <el-button
                                    type="text"
                                    size="medium"
                                    icon="el-icon-circle-plus-outline"
                                    @click="() => append(node, data)">
                            </el-button>
                             <el-button
                                     type="text"
                                     size="medium"
                                     icon="el-icon-delete"
                                     @click="() => remove(node, data)">
                            </el-button>
                        </span>
                    </span>
                </el-tree>
            </div>

            <div class="tablelist">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
                    <el-table-column
                            align="center"
                            label="用户账号"
                            prop='username'
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="用户姓名"
                            prop='name'
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作"  align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span class="styleed" @click="deviceDel(scope.row)">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="elPaination">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 20, 40, 80]"
                            :page-size="10"
                            style="float: right"
                            layout="total, sizes, prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <bindVs @updateing="updateing" ref="bindVs"></bindVs>
        <assignedOrder @updateing="updateingorg" ref="assignedOrder"></assignedOrder>

    </div>
</template>

<script>

    import {orgListByPid,orglistUserShipPage,orgdelUserShip,orgaddUserShip,orgAdd,orgupdate,orgdel} from "@/api/systemMenu/org.js"
    import {formatDate} from "@/utils/index.js";
    import assignedOrder from "./component/assigned.vue";
    import bindVs from "./component/bindVs.vue";
    export default {
        name: "addequipment",
        components: {
            bindVs,
            assignedOrder
        },
        computed: {

        },
        data() {
            return {
                menuList:[],
                ruleForm:{
                    planName:'',
                    name:'',
                    type:null,
                    code:null,
                    addressName:'',
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                data : [],
                statData:{},
                options:[],
                option1:[],
                tableData: [],
                multipleSelection: [],
                currentPage4: 1,
                pageNum:1,
                pageSize:10,
                total:0,
                areaId:null,//区域id
                orgId:null, //组织id
                flag:true,
                node:[],
                reslover:[],
                nodelist:[],
                datalist:{},
                addoreditor:null,

                flags : false,
                tempNode:[],
                tempNodelist:[],
                func :{},
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                this.orglistUserShipPage()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.orglistUserShipPage()
            },
            //编辑
            editor (node,data) {
                this.addoreditor = 2
                this.$refs.assignedOrder.show(2,data.id)
                this.datalist = data
                let parent = node.parent
                this.nodelist = parent
            },
            //点击节点
            handleNodeClick (data,node) {
                this.orgId = data.id
                this.orglistUserShipPage()
            },
            //新增
            append(node,data) {
                this.nodelist = node
                this.datalist = data
                this.addoreditor = 1
                this.$refs.assignedOrder.show(1,data.id)
            },
            //删除节点
            remove(node, data) {
                this.$confirm(' ', '确认要删除吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center: true,
                    customClass:"massagebox"
                }).then(() => {
                    orgdel({id:data.id}).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            const parent = node.parent;
                            let children = parent.childNodes || parent.data;
                            const index = children.findIndex(d => d.key === data.id);
                            children.splice(index, 1);
                        }else {
                            this.$message.error(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //更新节点
            updateingorg () {
                //1新增 2编辑
                let data = {
                    id : '',
                    limit : ''
                }
                if (this.addoreditor == 1) {
                    data.id =  this.datalist.id
                    data.limit = this.datalist.limit
                }else {
                    data.id =  this.datalist.parentId
                    data.limit = this.datalist.limit
                }
                orgListByPid(data).then((res) =>{
                    if(res.code == 200) {
                        let treelist = res.body
                        let theChildren = this.nodelist.childNodes
                        theChildren.splice(0, theChildren.length)
                        this.nodelist.doCreateChildren(treelist)
                    }
                })

            },
            //更新
            updateing () {
                this.orglistUserShipPage()
            },
            //添加
            addUser () {
                this.$refs.bindVs.show(this.orgId);
            },
            //查看
            lookOver (row) {
                this.$refs.lookOver.show(row.id,row.deviceId)
            },
            //删除
            deviceDel (row) {
                this.$confirm(' ', '确认要删除吗?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center: true,
                    customClass:"massagebox"
                }).then(() => {
                    orgdelUserShip({id:row.id}).then(res => {
                        if(res.code == 200) {
                            this.orglistUserShipPage()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //分级加载组织节点
            loadNode(node, resolve) {
                console.log(1)
                if (node.level == 0) {
                    this.orgListByPid(node,resolve)
                }else {
                    this.orgListByPid(node,resolve)
                }
            },
            //查询table
            orgListByPid (node,resolve) {
                let id = node.level == 0?0:node.data.id
                let limit = node.level == 0? false : node.data.limit
                orgListByPid({id:id,limit:limit}).then((res) =>{
                    let treelist = res.body

                    this.menuList = treelist;
                    if (this.flag) {
                        this.orgId = treelist[0].id
                        this.orglistUserShipPage()
                        this.flag = false
                    }
                    return resolve(treelist);
                })
            },
            //tabliet
            orglistUserShipPage () {
                let data = {
                    orgId:this.orgId,//组织 ID
                    pageNum:this.pageNum,//页数
                    pageSize:this.pageSize,//页大小
                    kw:null,  //查询条件（通配查询条件）
                }
                orglistUserShipPage(data).then((res) =>{
                    if(res.code == 200) {
                        let data = res.body.datas
                        this.total = res.body.total
                        this.tableData = data
                    }
                })
            },
        }
    }
</script>
<style lang="less" scoped>
    .addequipment {
        position: absolute;
        top: 120px;
        left: 0;

        width: 100%;
        box-sizing: border-box;
        padding: 1% 1% 0 5%;
        color: #FFFFFF;
        .top {
            width: 100%;
            height: 50px;
            background: rgba(2,31,42,.4);
            display: flex;
            align-items: center;
            font-size: 20px;
            margin-bottom: 20px;
            .topfirst {
                color: #01C1DA;
                padding: 0 40px 0 20px;
            }
            .addequi {
                font-size: 16px;
                background: #1490FF;
                width: 130px;
                height: 30px;
                text-align: center;
                line-height: 28px;
                border-radius: 4px;
                cursor: pointer;
            }
        }
        .center {
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            background:rgba(2,21,62,.4);
            overflow: hidden;
            .inputlist {
                width: 25%;
                /*height: 77vh;*/
                font-size: 16px;
                color: #FFFFFF;
                float: left;
                box-sizing: border-box;
                padding: 30px 10px 30px 10px;
                .org-tree {
                    width: 100%;
                    background: rgba(0, 0, 0, 0);
                    color: #FFFFFF;
                }
            }
            .tablelist {
                width: 75%;
                margin-top: 30px;
                float: left;
                .styleed {
                    display: inline-block;
                    padding: 1px 2px;
                    color: #12B1D2;
                    cursor: pointer;
                }
                .span1 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span2 {
                    display: inline-block ;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
                .span3 {
                    display: inline-block;
                    width: 1px;
                    height: 10px;
                    background: #12B1D2;
                    margin:0 3px 0 4px;
                }
            }
        }
    }
    .addequipment .customized_input {
        width: 160px!important;
    }
    .elPaination {
        width:100%;
        height: 40px;
        margin-top: 10px;
        color: #FFFFFF;
    }
</style>

//同步1
<!-- 用户管理 -->
<template>
  <div class="view-wrap" style="min-width:800px">
<!-- 树形部分 -->
                <div class="div-box-tree">
                  <div class="depart-page">
                    <div>
                      <!-- <span>机构名称</span> -->
                      <el-select
                        v-model="organizationName"
                        @change="selectChange"
                        size="small"
                        placeholder="请选择机构"
                        style="width:95%;"
                      >
                        <el-option
                          v-for="item in organizationOptions"
                          :key="item.value"
                          :label="item.agencyName"
                          :value="item.id"
                        />
                      </el-select>
                    </div>

                    <div class="tree">
                      <el-tree
                        :data="deptTreeData"
                        :props="props"
                        node-key="id"
                        :load="loadNode"
                        @node-click="handleNodeClick"
                        :expand-on-click-node="true"
                        lazy
                        :default-expand-all="true"
                        ref="tree"
                      >
                        <span slot-scope="{ node, data }" class="custom-tree-node">
                          <span>{{ node.label }}</span>
                          <span>
                            <el-button
                              type="text"
                              @click.stop="() => append(node, data, 'append')"
                            >添加</el-button>
                            <el-button
                              v-if="node.level!==1"
                              type="text"
                              @click.stop="() => getModifyInfo(node, data, 'modify')"
                            >修改</el-button>
                            <el-button
                              v-if="node.level!==1"
                              type="text"
                              @click.stop="() => remove(node, data)"
                            >删除</el-button>
                          </span>
                        </span>
                      </el-tree>
                    </div>
                  </div>
                </div>
  </div>
</template>

<script>
import { post, get } from "@/utils/axios";

//树形部分
import {getOrgnizationList, getOrgnizationListNew, getSubOrgnizationListById, addNewOrg, modifyNewOrg, deleteOrg, getDetailById} from '@/api/departManagement.js'
export default {
  name: "empMng",
  data() {
    return {

      //树形部分
      organizationName: '',
            organizationOptions: [],
      departOptions: [],
            deptTreeData: [],
            props: {
                label: 'deptName',
                children: 'children',
            },
            dialogFormVisible: false,
            addOrgForm: {
                deptNo:'',
                deptName:'',
                deptPinyin:'',
                parentDeptName: '',
                deptPath: '',
                deptFloor: '',
                orgName: ''
            },
            formLabelWidth:'120px',
            rules:{
                deptNo: [{ required: true, message: '请填写部门编号', trigger: 'blur' }],
                deptName: [{ required: true, message: '请填写部门名称', trigger: 'blur' }]
            },
            tempNode: {},
            func: {},
            parentOrgId: '',
            orgId: '',
            buttonText: '',
            childOrg: []
    };
  },
  //树形部分
created() {
    },
  methods: {
    //树形部分
    //获取组织列表
        getOrgnizationList() {
            getOrgnizationList().then((res)=>{
                this.organizationOptions = res.data.data
                this.deptTreeData = [res.data.data[0]]
                // this.parentOrgId = this.organizationOptions[0].id
                this.organizationName = this.organizationOptions[0].deptName
            })
    },
        getOrgnizationList() {
            getOrgnizationListNew({
                agencyName: '',
                parkName: '',
                minUpdateTime: '',
                maxUpdateTime: '',
                pageNum: 1,
                pageSize: 999
            }).then((res)=>{
        this.organizationOptions = res.data.data.rows
                this.deptTreeData = [res.data.data.rows[0]]
        console.log('organizationName',this.organizationOptions)
        debugger
                this.organizationName = this.organizationOptions[0].agencyName
                this.parentOrgId = this.organizationOptions[0].id
                this.orgName = this.organizationOptions[0].agencyName
            });
            let that = this;
            get("property/dept/viewDeptByOrgId",{params:{orgId: "365c29ad69f54db0acf63ce404c21a5b"}}).then(function(res){
        console.log('res.data.data',res.data.data)
                that.deptTreeData = res.data.data
            })
        },
        //点击树节点
        handleNodeClick(data,event) {
            if (data.id) {
        this.parentOrgId = data.id
        this.queryForm.department = data.deptName
        // console.log('this.queryForm',this.queryForm)
        this.onSearch();

            } else {
                return
            }
            this.tempNode.childNodes = []
            this.$refs.tree.load(this.tempNode, this.func)
        },
        // 选中组织
        selectChange(value) {
            // this.parentOrgId = value
            let sameItem = this.organizationOptions.find((item)=> {
                return item.id === value
            })
            this.deptTreeData = [sameItem]
        },
        getorgName(data) {
            if (data.level === 1) {
                this.addOrgForm.orgName = data.label
            } else {
                this.getorgName(data.parent)
            }
        },
        //添加
        append(data, node, type) {
            this.orgId = node.id
            this.dialogFormVisible = true
            this.buttonText = '确认添加'
            this.addOrgForm.parentDeptName = data.label
            this.addOrgForm.deptPath = data.level === 1 ? data.label : `${data.parent.label}/${data.label}`
            this.getorgName(data)
            this.addOrgForm.parentDeptName = data.label
        },
        //获取修改弹窗信息
        getModifyInfo(data, node, type) {
            console.log('data',data)
            this.parentOrgId = data.data.parentDeptId
            this.orgId = node.id
            this.dialogFormVisible = true
            this.buttonText = '确认修改'
            this.addOrgForm.parentDeptName = data.label
            this.addOrgForm.deptPath = data.level === 1 ? data.label : `${data.parent.label}/${data.label}`
            this.getorgName(data)
            this.addOrgForm.parentDeptName = data.label

            getDetailById(this.orgId).then((res)=>{
                this.addOrgForm = res.data.data
            })
        },
        //删除
        remove(data,node) {
            this.$confirm("确认删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleteOrg(node.id).then((res)=> {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.getOrgnizationList();
                })
            }).catch(()=>{
                return;
            })
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                // return resolve([{ deptName: this.organizationName }]);
            } else if (node.level > 0) {
                getSubOrgnizationListById(node.data.id).then((res)=>{
                    this.childOrg = res.data.data
                    resolve(this.childOrg);
                })
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.buttonText === '确认添加') {
                    let data = this.addOrgForm
                    data.parentDeptId = this.orgId
                    addNewOrg(data).then((res)=> {
                        this.resetForm('ruleForm')
                        this.getOrgnizationList();
                    })
                } else if (this.buttonText === '确认修改') {
                    let data = this.addOrgForm
                    data.parentDeptId = this.parentOrgId
                    modifyNewOrg(data).then((res)=> {
                        this.resetForm('ruleForm')
                        this.getOrgnizationList();
                    })
                }
            } else {
                return false;
            }
            });
        },
        resetForm(formName) {
            this.dialogFormVisible = false
            this.$refs[formName].resetFields();
        }
  },
  mounted: function() {
    let _this = this;
    this.onSearch();
    //获取机构下拉
    get("/property/agency/page", {
      params: {
        agencyName: "",
        parkName: "",
        minUpdateTime: "",
        maxUpdateTime: "",
        pageNum: 1,
        pageSize: 9999,
        time: new Date().getTime()
      }
    }).then(function(res) {
      _this.agencyOptions = res.data.data.rows;
    });

    //获取角色下拉
    get("/property/role/page", {
      params: {
        roleName: "",
        minUpdateTime: "",
        maxUpdateTime: "",
        pageNum: 1,
        pageSize: 9999,
        time: new Date().getTime()
      }
    }).then(function(res) {
      _this.roleOptions = res.data.data.rows;
      var noneRole = { roleId: "0", roleName: "无" };
      _this.roleOptions.push(noneRole);
    });
  }
};
</script>

<style lang="scss" scoped>
.view-wrap {
  margin: 20px;
}
.ibox-content p {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.ibox-content p span {
  margin-left: 6px;
}
.title {
  border-bottom: 1px solid #fff;
  margin: 20px 0;
  padding-bottom: 20px;
}

.boxr {
  border-left: 10px solid #fff;
}
.boxl {
  border-right: 10px solid #fff;
}
h3 {
  padding-left: 20px;
  font-size: 18px;
}
.boxr,
.boxl {
  background: #eee;
}

.example {
  margin-left: 20px;
}
.btn1 {
  position: absolute;
  top: 300px;
  right: 150px;
  border-color: #71bedf;
  background: #71bedf;
}
.btn2 {
  position: absolute;
  right: 80px;
  top: 300px;
  background: #dfab5d;
  border-color: #dfab5d;
  color: #fff;
}

.tianjiexample {
  padding-bottom: 150px;
}
.tongji {
  border-top: 8px solid #fff;
}
.biaoge {
  padding-right: 15px;
}
.fonts {
  font-size: 16px;
}
.btns {
  margin-left: 0px;
}
.div-box-wrap {
  width: 100%;
  overflow: auto;
  height: 100%;
  .div-box-tree {
    float: left;
    width: 25%;
    height: 100%;
    min-height: 420px;
    overflow: auto;
  }
  .div-box-table {
    float: right;
    width: 75%;
    height: 100%;
  }
}

</style>