fj-dc-ui/.svn/pristine/bb/bb02238ac4c1fe00f508d4df116a20f6d78351d0.svn-base

<template>
    <div id="layerTreeContainer" class="layerTreeMenuClass">
        <div id="layerTreeBar">
            <div style="padding-left: 10px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <img src="../assets/ducha.png" style="width: 14px;">
                <el-button  @click="showDcdxPanelHandler('navi')" style="border-radius: 5px;padding: 5px 5px;color:#2C9EFF;margin-left: 5px;border: 0px;" size="medium ">
                    督查对象
                    <i :class="this.showDcdxPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                </el-button>
            </div>
            <div style="width: 1px;height: 10px;background: rgb(190, 190, 190);margin-left: 10px;margin-right: 10px;"></div>
<!--            <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">-->
<!--                <img src="../assets/onemap.png" style="width: 14px;">-->
<!--                <el-button @click="showOneMapHandler()" style="border-radius: 5px;padding: 5px 5px;color:#2C9EFF;margin-left: 5px;border: 0px;" size="medium ">-->
<!--                    水利一张图-->
<!--                    <i :class="this.showOneMapPanel ?'el-icon-arrow-up':'el-icon-arrow-down'"></i>-->
<!--                </el-button>-->
<!--            </div>-->
        </div>
        <div class="show1" :style="{'height':+testHeight+'px'}" v-if="showDcdxPanel">
            <div class="list-tab" v-for='(it2, index2) in menuContent[0].pageone' :key='index2'>
                <h3 class="river-jc">
                    <span>
                        <i class="el-icon-menu"></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="height: 28px;">
                        <span>{{it3.name}}
                            <span :class="it3.label"></span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="show1" :style="{'height':+testHeight+'px'}"  v-if="showOneMapPanel">
            <div class="list-tab" v-for='(it2, inde2) in menuContent[1].pageone' :key='inde2'>
                <h3 class="river-jc">
                    <span>
                        <i class="el-icon-menu"></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, inde3) in it2.fil' :key='inde3'>
                        <i :class="it3.icon" v-if="it3.icon"></i>
                        <img :src="it3.img" v-if="it3.img" alt="" style="height: 28px;width:28px;">
                        <span>{{it3.name}}
                            <span :class="it3.label"></span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import {mapConfig} from '../config/mapConfig.js'
import {tablecont_M,tablecont,tabNames} from '../config/leftLayerMenuConfig.js'//除矢量底图以外
import { hasPriv } from '../../../utils/gw_hasPriv.js'
export default {
    props:[],
    components:{

    },
    data(){
        return{
            tabPosition:"left",
            menuContent:[{
                pageone:[]
            }],//读取菜单内容
            tabletit:[],//左侧分类
            showDcdxPanel:false,
            showOneMapPanel:false,
            oneMapMenuList:[],
            dcdxMenuList:[],
            testHeight:Number(window.innerHeight) * 1 - 251,
            testTop:90,
            treeData_per:{
                title: '人员',
                fil: [
                    { id: 'personGraphicLayer', name: '督查人员', img:'/src/views/zongHeXinXiOl/assets/offline.png', value: 100, checked: true, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sk:{
                title: '水库',
                fil: [
                    { id: 'allSkGraphicLayer', name: '水库', img:'/src/views/zongHeXinXiOl/assets/shuiku_All.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    // { id: 'skGraphicLayer2018', name: '2018年督查', img:'/src/views/zongHeXinXiOl/assets/shuiku_2018.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    // { id: 'skGraphicLayer2019', name: '2019年督查', img:'/src/views/zongHeXinXiOl/assets/shuiku2.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    // { id: 'fcskGraphicLayer', name: '复查', img:'/src/views/zongHeXinXiOl/assets/shuiku0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    // { id: 'jhwskGraphicLayer', name: '督查计划外', img:'/src/views/zongHeXinXiOl/assets/shuiku_jhw.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sz:{
                title: '水闸',
                fil: [
                    { id: 'szGraphicLayerAll', name: '水闸', img:'/src/views/zongHeXinXiOl/assets/szAll.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    // { id: 'szGraphicLayer', name: '督查水闸', img:'/src/views/zongHeXinXiOl/assets/sz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            // treeData_ry:{
            //     title: '人饮',
            //     fil: [
            //         { id: 'ncysgcGraphicLayer', name: '农村饮水工程', img:'/src/views/zongHeXinXiOl/assets/ncysgc.png', value: 100, checked: false, comeFrom: 'service', url: '' },
            //         // { id: 'sydGraphicLayer', name: '水源地', img:'/src/views/zongHeXinXiOl/assets/syd.png', value: 100, checked: false, comeFrom: 'service', url: '' },
            //         // { id: 'country150Layer', name: '督查县', img:'/src/views/zongHeXinXiOl/assets/xian.png', value: 100, checked: false, comeFrom: 'service', url: '' },
            //         // { id: 'xzcGraphicLayer', name: '督查行政村', img:'/src/views/zongHeXinXiOl/assets/xzc.png', value: 100, checked: false, comeFrom: 'service', url: '' },
            //     ]
            // },
            treeData_sh:{
                title: '其他',
                fil: [
                    { id: 'shgcGraphicLayer', name: '水毁工程', img:'/src/views/zongHeXinXiOl/assets/shuihui0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_172:{
                title: '重大水利工程',
                fil: [
                    { id: 'graphicLayer172', name: '重大水利工程', img:'/src/views/zongHeXinXiOl/assets/172.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            // treeData_dxs:{
            //     title: '地下水',
            //     fil: [
            //         { id: 'dxsGraphicLayer', name: '地下水', img:'/src/views/zongHeXinXiOl/assets/dxs.png', value: 100, checked: false, comeFrom: 'service', url: '' },
            //     ]
            // },

            treeData_qsk:{
                title: '取水口',
                fil: [
                    { id: 'graphicLayerQsk', name: '取水口', img:'/src/views/zongHeXinXiOl/assets/qsk.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_dbssyd:{
                title: '地表水水源地',
                fil: [
                    { id: 'graphicLayerDbssyd', name: '地表水水源地', img:'/src/views/zongHeXinXiOl/assets/syd.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_swenz:{
                title: '水文站',
                fil: [
                    { id: 'graphicLayerSwz', name: '水文站', img:'/src/views/zongHeXinXiOl/assets/swenz.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_fupinxian:{
                title: '扶贫县',
                fil: [
                    { id: 'mapServer_fpx', name: '扶贫县', img:'/src/views/zongHeXinXiOl/assets/fpx.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_zdx', name: '重点扶贫县', img:'/src/views/zongHeXinXiOl/assets/zdfpx.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_bjx', name: '边境扶贫县', img:'/src/views/zongHeXinXiOl/assets/bjfpx.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_tcx', name: '天窗扶贫县', img:'/src/views/zongHeXinXiOl/assets/tcfpx.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'mapServer_ddfp', name: '定点扶贫县', img:'/src/views/zongHeXinXiOl/assets/ddfpx.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_ydb:{
                title: '淤地坝',
                fil: [
                    { id: 'allYdbGraphicLayer', name: '全部淤地坝', img:'/src/views/zongHeXinXiOl/assets/ydb2.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'ydbGraphicLayer', name: '淤地坝', img:'/src/views/zongHeXinXiOl/assets/ydb1.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_szy:{
                title: '水资源',
                fil: [
                    { id: 'szy_allQyshGraphicLayer', name: '全部取用水户', img:'/src/views/zongHeXinXiOl/assets/qsk.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_qyshGraphicLayer', name: '取用水户', img:'/src/views/zongHeXinXiOl/assets/qsk0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_qskGraphicLayer', name: '取水口', img:'/src/views/zongHeXinXiOl/assets/qsk.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_allSydGraphicLayer', name: '全部水源地', img:'/src/views/zongHeXinXiOl/assets/syd0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_sydGraphicLayer', name: '水源地', img:'/src/views/zongHeXinXiOl/assets/syd.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_jsglGraphicLayer', name: '节水管理', img:'/src/views/zongHeXinXiOl/assets/p0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'szy_ysdwGraphicLayer', name: '用水单位', img:'/src/views/zongHeXinXiOl/assets/p1.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_sb:{
                title: '水保',
                fil: [
                    { id: 'graphicLayerSb', name: '水保项目', img:'/src/views/zongHeXinXiOl/assets/shuibao.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'graphicLayerDcsb', name: '督查水保', img:'/src/views/zongHeXinXiOl/assets/shuibao0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_brgj:{
                title: '百日攻坚',
                fil: [
                    { id: 'graphicLayerHhsl', name: '河湖四乱', img:'/src/views/zongHeXinXiOl/assets/hhsl0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'graphicLayerFfcs', name: '非法采砂', img:'/src/views/zongHeXinXiOl/assets/ffcs0.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                ]
            },
            treeData_df:{
                title: '堤防险工险段',
                fil: [
                    { id: 'xgxdBaseGraphicLayer', name: '堤防基础信息', img:'/src/views/zongHeXinXiOl/assets/p1.png', value: 100, checked: false, comeFrom: 'service', url: '' },
                    { id: 'xgxdDcGraphicLayer', name: '堤防督查信息', img:'/src/views/zongHeXinXiOl/assets/p2.png', value: 100, checked: false, comeFrom: 'service', url: '' }
                ]
            },
        }
    },
    watch:{

    },
    mounted:function(){
        if(mapConfig.wkid == ('102100' || '3857')){
            this.menuContent.push(tablecont_M[0])
        }else{
            this.menuContent.push(tablecont[0])
        }
        this.tabletit = tabNames;
        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('sz_layer')){//水闸
                this.menuContent[0].pageone.push(this.treeData_sz);
            }
            // 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('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);
            // }
            // if(hasPriv('ydb_layer')){//淤地坝
            //     this.menuContent[0].pageone.push(this.treeData_ydb);
            // }
            // if(hasPriv('szy_layer')){//水资源
            //     this.menuContent[0].pageone.push(this.treeData_szy);
            // }
            // if(hasPriv('sb_layer')){//水保
            //     this.menuContent[0].pageone.push(this.treeData_sb);
            // }
            // if(hasPriv('brgj_layer')){//百日攻坚
            //     this.menuContent[0].pageone.push(this.treeData_brgj);
            // }
            // if(hasPriv('df_layer')){//堤防
            //     this.menuContent[0].pageone.push(this.treeData_df);
            // }
        },
        leftContentClick(it3){

            var str = it3.id;
            if(str.substring(0,7) != 'oneMap_'){
                it3.checked = !it3.checked;
            }
            this.$emit('leftLayerMenuClick',it3);
        },
        showDcdxPanelHandler:function(){
            this.showDcdxPanel = !this.showDcdxPanel;
            if(this.showDcdxPanel){
                this.showOneMapPanel = false;
                this.$emit('hide')
            }
        },
        showOneMapHandler(){
            this.showOneMapPanel = !this.showOneMapPanel;
            if(this.showOneMapPanel){
                this.showDcdxPanel = false;
                this.$emit('hide')
            }
        },
        hide(){
            this.showDcdxPanel = false;
            this.showOneMapPanel = false;
        },
    }
}
</script>
<style scoped>
@import url("/src/assets/watericon/iconfont.css");
[class*=" el-icon-"], [class^=el-icon-]{
    font-weight: 600;
    color: rgb(189, 189, 189);
}
.layerTreeMenuClass{
    position: fixed;
    right: 332px;
    top: 96px;
    z-index: 1;
}
#layerTreeBar{
    display: flex;
    background-color: white;
    height: 46px;
    border-radius: 3px;
    /*width: 263px;*/
    z-index: 1;
    align-items: center;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    background: rgba(255,255,255,1);
    border-radius: 4px;
}
.show1{
    width: 231px;
    margin-top: 5px;
    /* height: 88%; */
    border-radius: 3px;
    border: 1px solid rgba(220,222,227,1);
    /* background-color: #0000cc; */
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    overflow-y: scroll;
    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;
    height: 32px;
    background: rgba(242,243,247,1);
    /* color: #ff5200; */
    color: rgb(189, 189, 189);
}
.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: 50%;
    margin-top: 10px;
    font-size: 14px;
    padding: 5px 0;
    /* color: #383838; */
    /* color: rgb(56, 56, 56); */
    color:#333333;
    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)
}
#layerTreeContainer .el-tabs{
    height: 100%!important;
}
#layerTreeContainer .el-tabs__nav{
    height: 100%!important;
}
#layerTreeContainer .el-tabs__nav{
    display: flex!important;
    flex-direction: column!important;
    padding-top: 20px!important;
}
#layerTreeContainer .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;
}
#layerTreeContainer .el-tabs__nav-prev{
  display: none;
}
#layerTreeContainer .el-tabs__content{
    width: 0px;
    padding: 0!important;
}
#layerTreeContainer .el-tabs__header{
    margin-right: 0!important;
    width: 40px;
}
#layerTreeContainer .el-tabs--border-card{
    background-color: rgba(27, 53, 111, 0);
    border: none;
}
#layerTreeContainer .el-tabs--border-card>.el-tabs__header{
    background-color: rgba(27, 53, 111, 0);
}
#layerTreeContainer .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ffffff;
    background-color: rgba(43,102,223,0.8);
}
</style>