visu_supervision/.history/src/components/DataCenter_Distribution/index_20240401153138.vue

<!-- 
    *@description: 数据中心 数据分布
    *@author: yh Fu
    *@date: 2023-08-23 14:45:16
    *@version: V1.0.5 
    -->

<template>
    <!-- 右侧 -->
    <div class="rightbar" v-if="showSearch == true">
        <div class="forthis">
            <dv-border-box-13
            backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem"
            >
            <img
                src="@/assets/images/integrated/light.png"
                style="width: 100%; margin-top: 0.4rem"
            />
            <div class="this-title">
                <span>数据分布</span>
                <dv-decoration-3
                style="width: 150px; height: 15px; margin-right: 1rem"
                />
            </div>
            <div class="i-list-con h-73">
                <div class="head-container tree-scrollbar" style="height: 39vh; overflow-y: auto">
                    <el-tree :data="treeDept" :props="defaultProps" :expand-on-click-node="false"
                            :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
                            @node-click="indentleftByDeptIdSetMarkersForParent" />
                </div>
                <div class="overflow-y" style="height: 34vh">
                <div id="data-chart" style="width: 100%; height: 34vh"></div>
                </div>
            </div>
            </dv-border-box-13>
        </div>
    </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
export default {
    name:'Distribution',
    //      是否展示Flag    资源列表数据    当前资源索引
    props:['showSearch','deptGroupList','listCurrentIndex'],
    data() {
        return {
            treeDept:[],
            deptOptions:[],
            defaultProps: {
                children: "children",
                label: "label",
            },
        }
    },
    mounted(){
        this.getTreeselect();
        this.deptOptions = this.deptGroupList
        this.setDeptNum(this.deptOptions);
    },
    methods:{
        indentleftByDeptIdSetMarkersForParent(deptId){
            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
        },
        /**
         * deptList:树型结构集合
         * this.deptDataList:接口返回的数据项（统计用）
         * this.message：要展示在页面的数据项
         */
        setDeptNum(deptList){
        deptList.forEach((item, i) => {
            item.count = 0;
            item.label = item.label.indexOf('(') > -1 ? item.label.substring(0,item.label.indexOf('(')):item.label;
            this.deptGroupList.forEach((itemy, y) => {
            if(item.id==itemy.deptId){
                item.count=itemy.count
            }
            })
            if(item.hasOwnProperty("children")){
            this.setDeptNum(item.children)
            item.count = item.count+item.children.reduce((sum, itemz) => sum + itemz.count, 0);
            }
            item.label = item.label+"("+item.count+")";
        })
        this.treeDept = deptList;
        },
        getTreeselect() {
        treeselect().then((response) => {
            this.deptOptions = response.data;
        });
        },
        filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
        },
    },
}
</script>