visu_supervision/.history/src/components/DataCenter_Distribution/index_20231016100108.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="overflow-y" style="height: 39vh">
                <div
                    class="d-l-con"
                    :class="{ on: listCurrentIndex == item.deptId }"
                    v-for="item in deptGroupList"
                    :key="item.deptId"
                    v-on:click="indentleftByDeptIdSetMarkersForParent(item.deptId)"
                >
                    <div class="d-l-l-text">
                    <i class="i-small"></i>
                    <h4>{{ item.deptName }}</h4>
                    </div>
                    <div class="d-l-l-count">{{ item.count }}</div>
                </div>
                </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>
export default {
    name:'Distribution',
    //      是否展示Flag    资源列表数据    当前资源索引
    props:['showSearch','deptGroupList','listCurrentIndex'],
    data() {
        return {

        }
    },
    mounted(){
    },
    methods:{
        indentleftByDeptIdSetMarkersForParent(deptId){
            this.$emit('indentleftByDeptIdSetMarkersOfParent',deptId)
        }
    }
}
</script>