添加板卡列表

whychdw

2019-07-23 155544799ef99ed871c83ebdb0e16e22c7ec1e94

添加板卡列表

 src/App.vue

@@ -67,10 +67,10 @@
    margin-top: 2px;
    height: calc(100vh - 171px);
    overflow-y: auto;
    background: -webkit-linear-gradient(#FFFFFF, rgb(131, 169, 236)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#FFFFFF, rgb(131, 169, 236)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#FFFFFF, rgb(131, 169, 236)); /* Firefox 3.6 - 15 */
    background: linear-gradient(#FFFFFF, rgb(131, 169, 236)); /* 标准的语法 */
    background: -webkit-linear-gradient(#E7EDF7, #ABC0E4); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#E7EDF7, #ABC0E4); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#E7EDF7, #ABC0E4); /* Firefox 3.6 - 15 */
    background: linear-gradient(#E7EDF7, #ABC0E4); /* 标准的语法 */
  }
  
</style>

 src/components/DividerCard.vue

@@ -29,7 +29,7 @@
        background-color: #0070C0;
        color: #FFFFFF;
        padding: 4px 16px;
        left: 16px;
        left: 32px;
        top: -20px;
    }
    .divider-card-content {

 src/components/HTree.vue

New file
@@ -0,0 +1,85 @@
<template>
    <div class="h-tree-wrapper">
        <div class="h-tree">
            <div class="tree-folder"
            v-for="(item, key) in data" :key="key"
            :class="{'folder-open': item.open}">
                <div class="tree-folder-header" @click="open(key)">
                    <span class="mrr16 md-add">+</span>
                    <span class="mrr16 md-del">-</span>
                    <a href="javascript:;">{{item.txt}}</a>
                </div>
                <div class="tree-folder-content">
                    <div class="tree-file"
                    v-for="(children,ckey) in item.childrens" :key="ckey">
                        <div class="tree-file-content">
                            <span class="mrr16">-</span><a href="javascript:;">{{children.txt}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        data: {
            type: Array,
            required: true
        }
    },
    data() {
        return {}
    },
    filters: {
        typeFilter: function(childrens) {
            var result = 'tree-folder'
            if(typeof(childrens) =='undefined') {
                result = 'tree-file' 
            }
            return result;
        }
    },
    methods: {
        open: function(key) {
            var open = this.data[key].open;
            this.data[key].open = open?false:true;
        }
    },
    computed: {
        getType: function() {

        }
    }
}
</script>
<style scoped>
    .tree-folder-header {
        font-size: 20px;
    }
    .tree-folder-header a{
        color: #000000;
    }
    .tree-file {
        font-size: 16px;
    }
    .tree-file a{
        color: #000000;
    }
    .tree-folder-header .md-del {
        display: none;
    }
    .folder-open .tree-folder-header .md-del{
        display: inline;
    }
    .folder-open .tree-folder-header .md-add {
        display: none;
    }
    .tree-folder .tree-folder-content {
        display: none;
    }
    .tree-folder.folder-open .tree-folder-content {
        display: block;
    }
</style>

 src/components/RadiusInput.vue

@@ -17,11 +17,12 @@
       border: 1px solid #000000;
       background-color: #FFFFFF;
       vertical-align: middle;
       font-size: 14px;
   }
   .radius-input-wrapper input {
       border: none;
       outline: none;
       width: 80px;
       width: 60px;
       height: 14px;
   } 
</style>

 src/libs/common.css

@@ -45,6 +45,15 @@
.mrt8 {
    margin-top: 8px;
}
.mrt16 {
    margin-top: 16px;
}
.mrt24 {
    margin-top: 24px;
}
.mrt32 {
    margin-top: 32px;
}
.mrr8 {
    margin-right: 8px;
}

 src/views/home/state.vue

@@ -79,7 +79,7 @@
    },
    computed: {
        getCol: function() {
            console.log(this.machines.length);
            // console.log(this.machines.length);
            var machines = this.machines.length;
            var col = 0;
            if(machines != 0) {

 src/views/monitor/index.vue

@@ -3,7 +3,14 @@
        <Row>
            <i-col :xl="6" :xxl="5" span="10">
                <divider-card title="测试柜1" style="margin-left:16px;">

                    <h-tree 
                    style="margin-left: 32px;"
                    :data="test1"></h-tree>
                </divider-card>
                <divider-card title="测试柜1" style="margin-left:16px;" class="mrt32">
                    <h-tree 
                    style="margin-left: 32px;"
                    :data="test2"></h-tree>
                </divider-card>
            </i-col>
            <i-col :xl="18" :xxl="19" span="14">
@@ -13,10 +20,112 @@
    </div>
</template>
<script>
import DividerCard from  '../../components/DividerCard'; 
import DividerCard from  '../../components/DividerCard';
import HTree from '../../components/HTree';
export default {
    components:{
       DividerCard 
       DividerCard,
       HTree 
    },
    data(){
        return {
            test1:[
                {
                    open: true,
                    txt: '测试用例1',
                    childrens:[
                        {
                            txt: '板卡DY0001',
                        },
                        {
                            txt: '板卡DY0002',
                        },
                        {
                            txt: '板卡DY0003',
                        },
                        {
                            txt: '板卡DY0004',
                        },
                        {
                            txt: '板卡DY0005',
                        },
                        {
                            txt: '板卡DY0006',
                        },
                        {
                            txt: '板卡DY0007',
                        },
                        {
                            txt: '板卡DY0008',
                        },
                        {
                            txt: '板卡DY0009',
                        },
                        {
                            txt: '板卡DY00010',
                        },
                        {
                            txt: '板卡DY00011',
                        },
                        {
                            txt: '板卡DY00012',
                        },
                        {
                            txt: '板卡DY00013',
                        }
                        
                    ]
                }
            ],
            test2:[
                {
                    open: false,
                    txt: '测试用例2',
                    childrens:[
                        {
                            txt: '板卡DY0001',
                        },
                        {
                            txt: '板卡DY0002',
                        },
                        {
                            txt: '板卡DY0003',
                        },
                        {
                            txt: '板卡DY0004',
                        },
                        {
                            txt: '板卡DY0005',
                        },
                        {
                            txt: '板卡DY0006',
                        },
                        {
                            txt: '板卡DY0007',
                        },
                        {
                            txt: '板卡DY0008',
                        },
                        {
                            txt: '板卡DY0009',
                        },
                        {
                            txt: '板卡DY00010',
                        },
                        {
                            txt: '板卡DY00011',
                        },
                        {
                            txt: '板卡DY00012',
                        },
                        {
                            txt: '板卡DY00013',
                        }
                        
                    ]
                }
            ]
        }
    }
}
</script>