fj-dc-ui/.svn/pristine/03/031d40d1c8af13fe69736fa9515b9ef5348d6bfa.svn-base

<template>
    <div id="leftLayerMenuContainer" :style="{'height':testHeight+'px','top':testTop+'px'}" class="leftLayerMenuClass">
        <div class="left_bar">
            <el-tabs type="border-card" :tab-position="tabPosition" @tab-click='tab($event)'>
                <el-tab-pane v-for='(it, index) in tabletit' :key='index'>
                    <span slot="label" class="e-spp" style="color: rgb(255,255,255);">
                        <i class="el-icon-location"></i>{{it}}
                    </span>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="show1" v-for='(it1, index) in menuContent' :key='index' v-show='index == num' 
            v-if='showMenuContent' :style="{'height':testHeight+'px','top':testTop+'px'}">
            <div class="list-tab" v-for='(it2, index2) in it1.pageone' :key='index2'>
                <h3 class="river-jc">
                    <span>
                        <i class="el-icon-tickets"></i>
                        <span>{{it2.title}}</span>
                    </span>
                </h3>
                <ul class="river-ul">
                    <li style="cursor:pointer;" :class="{'layerShown':it3.checked}" @click="leftContentClick(it3)" 
                        v-for='(it3, index3) in it2.fil' :key='index3'>
                        <i :class="it3.icon" v-if="it3.icon"></i>
                        <img :src="it3.img" v-if="it3.img" alt="" style="width: 30px;">
                        <span>{{it3.name}}
                            <span :class="it3.label" @click="childdialog(index3)"></span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import {tablecont,tabletit1} from '../config/leftLayerMenuConfig.js'//除矢量底图以外
import { hasPriv } from '../../../utils/gw_hasPriv.js'
export default {
    props:[],
    components:{

    },
    data(){
        return{
            tabPosition:"left",
            menuContent:[{
                pageone:[]
            }],//读取菜单内容
            tabletit:[],//左侧分类
            showMenuContent:false,
            num:null,
            testHeight:Number(window.innerHeight) * 1 - 91,
            testTop:90,
            treeData_per:{
                title: '人员',
                fil: [
                    { id: 'personGraphicLayer', name: '督查人员', img:'/src/views/zongHeXinXiNew/assets/offline.png', value: 100, checked: true, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sk:{
                title: '水库',
                fil: [
                    { id: 'allSkGraphicLayer', name: '水库', img:'/src/views/zongHeXinXiNew/assets/shuiku_All.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'skGraphicLayer2018', name: '2018年督查', img:'/src/views/zongHeXinXiNew/assets/shuiku_2018.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'skGraphicLayer2019', name: '2019年督查', img:'/src/views/zongHeXinXiNew/assets/shuiku2.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'fcskGraphicLayer', name: '复查', img:'/src/views/zongHeXinXiNew/assets/shuiku0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'jhwskGraphicLayer', name: '督查计划外', img:'/src/views/zongHeXinXiNew/assets/shuiku_jhw.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_ry:{
                title: '人饮',
                fil: [
                    { id: 'ncysgcGraphicLayer', name: '农村饮水工程', img:'/src/views/zongHeXinXiNew/assets/ncysgc.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'sydGraphicLayer', name: '水源地', img:'/src/views/zongHeXinXiNew/assets/syd.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'country150Layer', name: '督查县', img:'/src/views/zongHeXinXiNew/assets/xian.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'xzcGraphicLayer', name: '督查行政村', img:'/src/views/zongHeXinXiNew/assets/xzc.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sh:{
                title: '其他',
                fil: [
                    { id: 'shgcGraphicLayer', name: '水毁工程', img:'/src/views/zongHeXinXiNew/assets/shuihui0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_172:{
                title: '重大水利工程',
                fil: [
                    { id: 'graphicLayer172', name: '重大水利工程', img:'/src/views/zongHeXinXiNew/assets/172.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_dxs:{
                title: '地下水',
                fil: [
                    { id: 'dxsGraphicLayer', name: '地下水', img:'/src/views/zongHeXinXiNew/assets/dxs.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sz:{
                title: '水闸',
                fil: [
                    { id: 'szGraphicLayerAll', name: '水闸', img:'/src/views/zongHeXinXiNew/assets/szAll.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szGraphicLayer', name: '督查水闸', img:'/src/views/zongHeXinXiNew/assets/sz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_qsk:{
                title: '取水口',
                fil: [
                    { id: 'graphicLayerQsk', name: '取水口', img:'/src/views/zongHeXinXiNew/assets/qsk.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_dbssyd:{
                title: '地表水水源地',
                fil: [
                    { id: 'graphicLayerDbssyd', name: '地表水水源地', img:'/src/views/zongHeXinXiNew/assets/syd.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_swenz:{
                title: '水文站',
                fil: [
                    { id: 'graphicLayerSwz', name: '水文站', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_fupinxian:{
                title: '扶贫县',
                fil: [
                    { id: 'mapServer_fpx', name: '扶贫县', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_zdx', name: '重点扶贫县', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_bjx', name: '边境扶贫县', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_tcx', name: '天窗扶贫县', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_ddfp', name: '定点扶贫县', img:'/src/views/zongHeXinXiNew/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
        }
    },
    watch:{
        
    },
    mounted:function(){
        // this.menuContent = tablecont;
        this.menuContent.push(tablecont[1])
        this.tabletit = tabletit1;
        this.authentication();//身份验证
    },
    methods:{
        authentication(){
            this.menuContent[0].pageone = [];
            if(hasPriv('per_layer')){//督查人员
                this.menuContent[0].pageone.push(this.treeData_per);
            }
            if(hasPriv('rsvr_layer')){//小水库
                this.menuContent[0].pageone.push(this.treeData_sk);
            }
            if(hasPriv('vill_layer')){//人饮
                this.menuContent[0].pageone.push(this.treeData_ry);
            }
            if(hasPriv('rect_layer')){//水毁
                this.menuContent[0].pageone.push(this.treeData_sh);
            }
            if(hasPriv('gc_layer')){//172
                this.menuContent[0].pageone.push(this.treeData_172);
            }
            if(hasPriv('grw_layer')){//地下水监测站
                this.menuContent[0].pageone.push(this.treeData_dxs);
            }
            if(hasPriv('sz_layer')){//水闸
                this.menuContent[0].pageone.push(this.treeData_sz);
            }
            if(hasPriv('wint_layer')){//取水口
                this.menuContent[0].pageone.push(this.treeData_qsk);
            }
            if(hasPriv('dbssyd_layer')){//地表水水源地
                this.menuContent[0].pageone.push(this.treeData_dbssyd);
            }
            if(hasPriv('swenz_layer')){//水文站
                this.menuContent[0].pageone.push(this.treeData_swenz);
            }
            if(hasPriv('fpx_layer')){//扶贫县
                this.menuContent[0].pageone.push(this.treeData_fupinxian);
            }
        },
        tab:function(event) {
            if(this.num == event.index){
                this.showMenuContent = !this.showMenuContent;
            }else{
                this.showMenuContent = true;
                this.num = event.index;
            }
        },
        childdialog(index3){
            console.log(index3)
            this.tex_p = !this.tex_p
        },
        leftContentClick(it3){
            var str = it3.id;
            if(str.substring(0,7) != 'oneMap_'){
                it3.checked = !it3.checked;
            }
            this.$emit('leftLayerMenuClick',it3);
        },
    }
}
</script>
<style>
@import url("/src/assets/watericon/iconfont.css");
.leftLayerMenuClass{
    /* height: 90%; */
    position: fixed;
    z-index: 1;
    width: 40px;
    /* top: 10%; */
}
.left_bar{
    width: 40px;
    text-align: center;
    height: 100%;
    position:fixed;
    left: 0;
    z-index: 100!important;
    background-color: rgba(27, 53, 111, 0.6);
}
.show1{
    width: 300px;
    /* height: 88%; */
    border: 1px solid #ccc;
    border: 1px solid rgb(204, 204, 204);
    /* background-color: #0000cc; */
    background-color: rgba(255, 255, 255, 0.8);
    border-left: none;
    position: fixed;
    overflow-y: scroll;
    left: 45px;
    /* top: 11%; */
    z-index: 1;
    box-shadow: 7px 11px 15px 0px rgba(0, 0, 0, 0.2)
}
.river-jc{
    margin: 0px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-top: 15px;
    /* color: #ff5200; */
    color: rgb(255, 82, 0)
}
.river-jc .tit-btn{
    margin-right: 15px;
    font-size: 12px;
    width: 40px;
    height: 20px;
}
.river-jc i{
    font-size: 16px;
    padding-right: 5px;
}
.river-ul{
    padding: 0px;
    margin: 0px;
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.river-ul li{
    width: 33%;
    margin-top: 10px;
    font-size: 14px;
    padding: 5px 0;
    /* color: #383838; */
    color: rgb(56, 56, 56);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.river-ul li i{
    padding-bottom: 5px;
}
.river-ul li:hover{
    /* background: #cccccc; */
    background: rgb(204, 204, 204)
}
.river-ul li:checked{
    /* background: #ff5200; */
    background: rgb(255, 82, 0)
}
.layerShown{
    /* background-color:#530133; */
    background-color: rgba(255, 82, 0, 0.2)
}
.e-spp:hover{
    /* color: red; */
    color:rgb(255, 0, 0)
}
#leftLayerMenuContainer .el-tabs{
    height: 100%!important;
}
#leftLayerMenuContainer .el-tabs__nav{
    height: 100%!important;
}
#leftLayerMenuContainer .el-tabs__nav{
    display: flex!important;
    flex-direction: column!important;
    padding-top: 20px!important;
}
#leftLayerMenuContainer .el-tabs__item{
    width: 100%!important;
    height: 120px!important;
    font-size: 14px!important;
    writing-mode: tb-rl!important;
    padding: 0!important;
    line-height: 50px;
    display: flex!important;
    justify-content: center!important;
}
#leftLayerMenuContainer .el-tabs__nav-prev{
  display: none;
}
#leftLayerMenuContainer .el-tabs__content{
    width: 0px;
    padding: 0!important;
}
#leftLayerMenuContainer .el-tabs__header{
    margin-right: 0!important;
    width: 40px;
}
#leftLayerMenuContainer .el-tabs--border-card{
    background-color: rgba(27, 53, 111, 0);
    border: none;
}
#leftLayerMenuContainer .el-tabs--border-card>.el-tabs__header{
    background-color: rgba(27, 53, 111, 0);
}
#leftLayerMenuContainer .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ffffff;
    background-color: rgba(43,102,223,0.8);
}
</style>