过程监控

whychdw

2019-07-23 a3a02f14c32baad1a1d6c53cfba195dd06e4723a

过程监控

 src/App.vue

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

 src/components/DividerCard.vue

New file
@@ -0,0 +1,38 @@
<template>
    <div class="component-container">
        <div class="divider-card">
            <div class="divider-card-title center">{{title}}</div>
            <div class="divider-card-content">
                <slot><div class="center">暂无内容</div></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        title: {
            type: [String, Number],
            default: '未知'
        }
    }
}
</script>
<style scoped>
    .divider-card {
        position: relative;
        border: 1px solid #0070C0;
    }
    .divider-card-title {
        position: absolute;
        font-size: 18px;
        background-color: #0070C0;
        color: #FFFFFF;
        padding: 4px 16px;
        left: 16px;
        top: -20px;
    }
    .divider-card-content {
        padding: 24px 8px;
    }
</style>

 src/components/MainMenu.vue

@@ -73,7 +73,7 @@
                    childrens: [
                        {
                            txt: '过程监控',
                            url: '#',
                            url: '/monitor/process',
                            active: false
                        },
                        {

 src/components/RadiusInput.vue

New file
@@ -0,0 +1,27 @@
<template>
    <div class="radius-input-wrapper">
        <input type="text">
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
   .radius-input-wrapper {
       display: inline-block;
       border-radius: 6px;
       overflow: hidden;
       padding: 2px 6px;
       border: 1px solid #000000;
       background-color: #FFFFFF;
       vertical-align: middle;
   }
   .radius-input-wrapper input {
       border: none;
       outline: none;
       width: 80px;
       height: 14px;
   } 
</style>

 src/libs/common.css

@@ -13,6 +13,10 @@
.page-container .graph{
    height: 100%;
}
/* text-align */
.center {
    text-align: center
}

/* height */
.h500 {
@@ -44,6 +48,9 @@
.mrr8 {
    margin-right: 8px;
}
.mrr16 {
    margin-right: 16px;
}
/* table cell bg */

.ivu-table .bg-error {
@@ -51,6 +58,12 @@
    color: #FFFFFF;
}

/* visibility */
.hidden {
    display: inline;
    visibility: hidden;
}

/*滚动条整体样式*/
::-webkit-scrollbar{
    width: 10px;/*竖向滚动条的宽度*/

 src/router.js

@@ -28,6 +28,22 @@
                component: (resolve) => require(['./views/home/account-info.vue'], resolve)
            }
        ]
    },
    {
        path: '/monitor',
        meta: {
            title: '',
        },
        component: (resolve) => require(['./views/monitor/index.vue'], resolve),
        children:[
            {
                path: 'process',
                meta: {
                    title: '过程监控'
                },
                component: (resolve) => require(['./views/monitor/process.vue'], resolve)
            }
        ]
    }
];
export default routers;

 src/views/monitor/index.vue

New file
@@ -0,0 +1,27 @@
<template>
    <div class="layout">
        <Row>
            <i-col :xl="6" :xxl="5" span="10">
                <divider-card title="测试柜1" style="margin-left:16px;">

                </divider-card>
            </i-col>
            <i-col :xl="18" :xxl="19" span="14">
                <router-view></router-view>
            </i-col>
        </Row>
    </div>
</template>
<script>
import DividerCard from  '../../components/DividerCard'; 
export default {
    components:{
       DividerCard 
    }
}
</script>
<style scoped>
    .layout {
        margin-top: 30px;
    }
</style>

 src/views/monitor/process.vue

New file
@@ -0,0 +1,115 @@
<template>
    <div class="component-container">
        <Row>
            <i-col :xl="14" :xxl="17" span="10">
                1
            </i-col>
            <i-col :xl="10" :xxl="7" span="14">
                <divider-card title="输入状态" style="margin-right:16px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">IN1</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN2</span>
                            <span class="mrr8">交流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN3</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">IN4</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
                <divider-card title="输出状态" style="margin-right:16px;margin-top:30px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">OUT1</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT2</span>
                            <span class="mrr8">交流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT3</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">OUT4</span>
                            <span class="mrr8">直流输入</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
                <divider-card title="采集状态" style="margin-right:16px;margin-top:30px;">
                    <div class="card-content">
                        <div class="content-item">
                            <span class="mrr16">sens1</span>
                            <span class="mrr8">电压量</span>
                            <span class="hidden">占</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens2</span>
                            <span class="mrr8">开关量</span>
                            <span class="hidden">占</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens3</span>
                            <span class="mrr8">信号波形</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                        <div class="content-item mrt8">
                            <span class="mrr16">sens4</span>
                            <span class="mrr8">通信</span>
                            <span class="hidden">占位</span>
                            <radius-input></radius-input> V 
                            <radius-input></radius-input> A
                        </div>
                    </div>
                </divider-card>
            </i-col>
        </Row>
    </div>
</template>
<script>
import DividerCard from  '../../components/DividerCard';
import RadiusInput from '../../components/RadiusInput';
export default {
    components:{
       DividerCard,
       RadiusInput 
    }
}
</script>
<style scoped>
    .card-content .content-item{
        font-size: 16px;
        text-align: center;
    }
</style>