From a3a02f14c32baad1a1d6c53cfba195dd06e4723a Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期二, 23 七月 2019 11:07:58 +0800
Subject: [PATCH] 过程监控
---
src/components/DividerCard.vue | 38 +++++++
src/views/monitor/index.vue | 27 +++++
src/views/monitor/process.vue | 115 +++++++++++++++++++++++
src/components/MainMenu.vue | 2
src/components/RadiusInput.vue | 27 +++++
src/libs/common.css | 13 ++
src/router.js | 16 +++
src/App.vue | 8
8 files changed, 241 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f0f2012..a7b17da 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/DividerCard.vue b/src/components/DividerCard.vue
new file mode 100644
index 0000000..e10bead
--- /dev/null
+++ b/src/components/DividerCard.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 414613b..771b054 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -73,7 +73,7 @@
childrens: [
{
txt: '杩囩▼鐩戞帶',
- url: '#',
+ url: '/monitor/process',
active: false
},
{
diff --git a/src/components/RadiusInput.vue b/src/components/RadiusInput.vue
new file mode 100644
index 0000000..5731d62
--- /dev/null
+++ b/src/components/RadiusInput.vue
@@ -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>
diff --git a/src/libs/common.css b/src/libs/common.css
index 306264a..7c62a9f 100644
--- a/src/libs/common.css
+++ b/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;/*绔栧悜婊氬姩鏉＄殑瀹藉害*/
diff --git a/src/router.js b/src/router.js
index 54a3540..b1a94a2 100644
--- a/src/router.js
+++ b/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;
\ No newline at end of file
diff --git a/src/views/monitor/index.vue b/src/views/monitor/index.vue
new file mode 100644
index 0000000..559fc25
--- /dev/null
+++ b/src/views/monitor/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/monitor/process.vue b/src/views/monitor/process.vue
new file mode 100644
index 0000000..0ad4932
--- /dev/null
+++ b/src/views/monitor/process.vue
@@ -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>
+
--
Gitblit v1.9.1