fj-dc-ui/.svn/pristine/c4/c4011d0146d4f70f39a5f16f5cd609b822492ae0.svn-base

<!--  -->
<template>
    <div >
        <div class="superviseObject" :style="'height:' + compHeight +'px'">
            <!-- <ul>
               <li class="myTag" v-for="(item,index) in transferUseLists" 
               :key="index" 
               @click="changeObjtypeEvent(index,item)">
                    <el-tag
                    :disable-transitions="true"
                    style="width: 100%;"
                    :type="checkedThis(item) ? '': 'info'">
                     <template slot-scope="scope">
                         <span class="childSpan" style="">{{item.name}}</span>
                         <div style="float:right;">
                            <span>{{item.total}}</span>
                            <span>{{barsChooseUnit}}</span>
                         </div>
                    </template>
                    </el-tag>
                </li>
            </ul> -->
            <!-- <ul>
               <li v-for="(item,index) in transferUseLists" 
               :key="index" :class="checkedThis(item) ? 'childLi_checked': 'childLi_normal'" 
               @click="changeObjtypeEvent(index,item)">
                    <span class="childSpan" style="">{{item.name}}</span>
                    <div style="float:right;">
                        <span>{{item.total}}</span>
                        <span>{{barsChooseUnit}}</span>
                    </div>
                </li>
            </ul> -->
            <el-collapse accordion class="myCollapse">
                <el-collapse-item v-for="(item,index) in transferUseLists" :key="index">
                    <template slot="title">
                        <el-row style="width:100%">
                            <el-col :span="spanNumLeft" style="padding: 0 0 0 10px;"><span class="childSpan" style="">{{item.name}}</span></el-col>
                            <el-col :span="spanNumRight"> 
                                <div style="float:right;">
                                    <span>{{item.total}}</span>
                                    <span>{{barsChooseUnit}}</span>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                    <li v-for="(itemChild,indexChild) in item.children" 
                    :key="indexChild" :class="checkedThis(itemChild) ? 'childLi_checked': 'childLi_normal'" 
                    @click="changeObjtypeEvent(indexChild,itemChild)">
                        <span class="childSpan" style="margin-left:.8vw">{{itemChild.name}}</span>
                        <div style="float:right;">
                            <span>{{itemChild.total}}</span>
                            <span>{{barsChooseUnit}}</span>
                        </div>
                    </li>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {BarsDczNums} from "../../api/homeMainView.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    props:['barsChooseType','barsChooseUnit','transferUseLists','requestEntmTime','requestOrgId','requestObjectType','requestSttmTime'],
    components: {},
    data() {
    //这里存放数据
        return {
            tabPosition: 'left',
            // compHeight:window.innerHeight - 228,
            checkedLists:"",
            cheked:true,
            // spanNumLeft:18,
            // spanNumRight:6,
        };
    },
    //监听属性 类似于data概念
    computed: {
        compHeight(){
            if(window.screen.height <= 768){
                return window.innerHeight - 443;
            }else if(window.screen.height > 1080){
                return window.innerHeight - 609;
            }else{
                return window.innerHeight - 569;
            }
        },
        spanNumLeft(){
            if(window.innerWidth <= 1366){
                return 16;
            }else{
                return 16;
            }
        },
        spanNumRight(){
            if(window.innerWidth <= 1366){
                return 8;
            }else{
                return 8;
            }
        },
    },
    //监控data中的数据变化
    watch: {
        barsChooseType(newValue,oldValue){
            this.barsChooseType = newValue;	
		},
        barsChooseUnit(newValue,oldValue){
            this.barsChooseUnit = newValue;	
		},
        transferUseLists(newValue,oldValue){
                this.transferUseLists = newValue;	
		}
    },
    //方法集合
    methods: {
        //初始化请求督查组数据
        getDczData:function(){
			let _self = this;
            let  searchParmas = {
                endTime: this.requestEntmTime,
                orgIds: this.requestOrgId,
                pTypes: this.requestObjectType,
                startTime: this.requestSttmTime
            };
			BarsDczNums(searchParmas).then((res)=>{
				this.transferUseLists = res.data;
			});
		},
        //li点击处理选中督查对象类型
        changeObjtypeEvent(index,item){
            // if(this.checkedLists == ""){                                                                                                                                           
                this.checkedLists = item.objType;
            // }else{
            //     let have = false;
            //     this.checkedLists.forEach((element,index) => {
            //         if(element == item.objType ){
            //             this.checkedLists.splice(index,1);
            //             have = true;
            //         }
            //     });
            //     if(have == false){
            //         this.checkedLists.push(item.objType);
            //     }
            // }
            this.$emit('objTypeChangeEvent',this.checkedLists);
        },
        //控制li选中样式
        checkedThis:function(item){
            let have = false;
            // this.checkedLists.forEach((element,index) => {
                if(this.checkedLists == item.objType ){
                    have = true;
                }
            // });
            return have;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // this.getDczData();
        // alert(window.screen.width);
        // alert(window.screen.height);
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss">
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/home";
}
@media screen and (width: 1920px) {
  @import "@scss/home1920";
  
}
//暗色主题浅灰色字体
@mixin fontColor_dark_gray{
	[data-theme="dark"] & {
		color:rgba(177, 210, 254, 1);
	}
}
//暗色主题透明背景
//暗色主题 div透明背景
@mixin leftButtonBackg{
	[data-theme="dark"] & {
      background:transparent;
    //   border: 1px solid rgba(54,162,252,1);
	}
}
.childLi_normal{
    cursor: pointer;
    margin-top: 0;
    padding: .5vh .5vw !important;
    // border-radius: 4px;
    // border: 1px solid rgba(161,213,255,1);
    // color: #36A2FC;
    color: rgba(51, 51, 51, 1);
    // background:rgba(236,245,255,1);
    list-style: none;
    @include leftButtonBackg;
}
.childLi_checked{
    cursor: pointer;
    margin-top: 0;
    padding: .5vh .5vw !important;
    // border-radius: 4px;
    // border: 1px solid rgba(161,213,255,1);
    // color: #fff;
    // color: #36A2FC;
    list-style: none;
    background:rgba(64,159,255,0.15);
}
.myTag .el-tag--mini{
    background-color: transparent;
}
.myTag .el-tag--info{
    // border: none;
    color:#313F66;
    @include fontColor_dark_gray;
} 
.myCollapse{
    background: rgba(242,243,247,1);
    border: 1px solid #DCDEE3;
    border-radius: 3px;
    @include leftButtonBackg;
}
.myCollapse .el-collapse-item__header{
    background: transparent;
    height: 32px;
    line-height: 32px;
}
.myCollapse .el-collapse-item:last-child{
    margin-bottom: 0px;
}
.myCollapse .el-collapse-item__wrap{
    background: transparent;
}
.myCollapse .el-collapse-item__header.is-active{
    background: #409FFF;
    color:#fff;
}
.myCollapse .el-collapse-item__content{
    padding-bottom: 10px;
}
// @import url('../../assets/sass/homeForElementUI.css');
</style>
<style>
    
</style>