提交内容

whychdw

2020-04-13 ac5a11036e1c4c6d080b1d6168d56f70b1571090

提交内容

 src/App.vue

@@ -16,6 +16,7 @@
                        <content-box
                        :title-left=true>
                            <div class="whyc-breadcrumb" slot="title">当前位置：首页 > ç«™ç‚¹æŸ¥è¯¢</div>
                            <five-sides-line></five-sides-line>
                        </content-box>
                    </div>
                </div>
@@ -29,6 +30,7 @@
import PageNav from './components/PageNav'
import ContentBox from './components/ContentBox'
import MyTree from './components/tree/Index'
import FiveSidesLine from './components/FiveSidesLine'

export default {
    name: 'App',
@@ -36,7 +38,8 @@
        PageHeader,
        PageNav,
        ContentBox,
        MyTree
        MyTree,
        FiveSidesLine
    },
    methods: {
        treeClick: function(res) {

 src/assets/images/right-triangle/½»Á÷µÍѹÅäµç¹ñ.jpg

 src/components/FiveSidesLine.vue

New file
@@ -0,0 +1,19 @@
<template>
    <div class="right-triangle">
        <span class="triangle-txt">交流配电柜</span>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.right-triangle {
    display: inline-block;
    background-image: linear-gradient(rgba(197,212,236, 0), rgba(197,212,236, 1));
    line-height: 0.8rem;
}
</style>

 src/components/PageNav.vue

@@ -2,29 +2,11 @@
    <div class="page-nav">
        <div class="page-nav-list">
            <ul>
                <li class="active-nav">
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">动环监控中心</a>
                </li>
                <li>
                    <a href="javascript:;">动力设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">环境设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">安防设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">报警管理</a>
                </li>
                <li>
                    <a href="javascript:;">统计分析</a>
                </li>
                <li>
                    <a href="javascript:;">系统管理</a>
                <li 
                v-for="(nav, key) in navs" :key="key"
                :class="{'active-nav': nav.active}"
                @click="navClick(nav)">
                    <a href="javascript:;">{{nav.txt}}</a>
                </li>
            </ul>
        </div>
@@ -35,41 +17,100 @@
    name: 'PageNav',
    data() {
        return  {
            
            navs: [
                {
                    txt: '首页',
                    active: false
                },
                {
                    txt: '动环监控中心',
                    active: false
                },
                {
                    txt: '动力设备监控',
                    active: true
                },
                {
                    txt: '环境设备监控',
                    active: false
                },
                {
                    txt: '安防设备监控',
                    active: false
                },
                {
                    txt: '报警管理',
                    active: false
                },
                {
                    txt: '统计分析',
                    active: false
                },
                {
                    txt: '系统管理',
                    active: false
                }
            ],
        }
    },
    methods: {
        initNavActive: function() {     // åˆå§‹åŒ–导航的激活状态，全部设置为false
            for(var i=0; i<this.navs.length; i++) {
                this.navs[i].active = false;
            }
        },
        navClick: function(data) {
            // å·²ç»æ¿€æ´»
            if(data.active) {
                return;
            }
            // åˆå§‹åŒ–导航的激活状态
            this.initNavActive();
            for(var i=0; i<this.navs.length; i++) {
                var nav = this.navs[i];
                if(nav.txt == data.txt) {
                    this.navs[i].active = true;
                }
            }

        }
    }
}
</script>
<style scoped>
    .page-nav {
        background-color: none; /* æµè§ˆå™¨ä¸æ”¯æŒæ—¶æ˜¾ç¤º */
        border-radius: 0.08rem;
        background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
        font-size: 0.15rem;
        text-align: center;
    }
    .page-nav::after {
        clear: both;
        content: "";
        display: block;
        width: 0;
        height: 0;
    }
    .page-nav li {
        float: left;
        width: 12.5%;
    }
    .page-nav li.active-nav {
        background-color: #15E3F3;
    }
    .page-nav li a {
        display: block;
        text-align: center;
        min-width: 1rem;
        line-height: 0.45rem;
        padding-left: 0.18rem;
        padding-right: 0.18rem;
    }
.page-nav {
    background-color: none; /* æµè§ˆå™¨ä¸æ”¯æŒæ—¶æ˜¾ç¤º */
    border-radius: 0.08rem;
    background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
    font-size: 0.15rem;
    text-align: center;
    overflow: hidden;
}
.page-nav::after {
    clear: both;
    content: "";
    display: block;
    width: 0;
    height: 0;
}
.page-nav li {
    float: left;
    width: 12.5%;
}
.page-nav li:hover {
    background-color: #12c4d1;
}
.page-nav li.active-nav {
    background-color: #15E3F3;
}
.page-nav li a {
    display: block;
    text-align: center;
    min-width: 1rem;
    line-height: 0.45rem;
    padding-left: 0.18rem;
    padding-right: 0.18rem;
}
</style>



 src/components/RightTriangle.vue

New file
@@ -0,0 +1,21 @@
<template>
    <div class="right-triangle">
        <span class="triangle-txt">交流配电柜</span>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.right-triangle {
    display: inline-block;
    background-image: linear-gradient(rgba(197,212,236, 0), rgba(197,212,236, 1));
    line-height: 0.8rem;
}
</style>



 src/components/tree/Index.vue

@@ -32,18 +32,62 @@
                                {
                                    txt: '白云220kw变电站',
                                    state: 'danger',
                                    open: true,
                                    children: [
                                        {
                                            txt: '动力设备监控',
                                            state: 'danger', 
                                        },
                                        {
                                            txt: '环境设备监控',
                                            state: 'normal', 
                                        },
                                    ]
                                },
                                {
                                    txt: '天河220kw变电站',
                                    state: 'warning',
                                    open: false,
                                    children: [
                                        {
                                            txt: '动力设备监控',
                                            state: 'normal', 
                                        },
                                        {
                                            txt: '环境设备监控',
                                            state: 'warning', 
                                        },
                                    ]
                                },
                                {
                                    txt: '海珠220KV变电站',
                                    state: 'jianxiu',
                                    open: false,
                                    children: [
                                        {
                                            txt: '动力设备监控',
                                            state: 'jianxiu', 
                                        },
                                        {
                                            txt: '环境设备监控',
                                            state: 'normal', 
                                        },
                                    ]
                                },
                                {
                                    txt: '荔湾220KV变电站',
                                    state: 'normal',
                                    open: false,
                                    children: [
                                        {
                                            txt: '动力设备监控',
                                            state: 'normal', 
                                        },
                                        {
                                            txt: '环境设备监控',
                                            state: 'normal', 
                                        },
                                    ]
                                },
                            ]
                        }