From a7864c2d1757411076f6a8059613d67f169d1802 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 29 七月 2020 13:38:01 +0800
Subject: [PATCH] 算力管理相关组件样式调试
---
src/components/subComponents/SystemInfo.vue | 10 ++
src/components/subComponents/DataStackCard.vue | 99 +++++++++++++++++++++++++++++---
package.json | 2
src/pages/analysisPower/index/App.vue | 13 ++--
4 files changed, 103 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index 793a32b..73eb3ab 100644
--- a/package.json
+++ b/package.json
@@ -77,4 +77,4 @@
"keywords": [],
"author": "",
"license": "ISC"
-}
\ No newline at end of file
+}
diff --git a/src/components/subComponents/DataStackCard.vue b/src/components/subComponents/DataStackCard.vue
index 0cd0054..3a52bf8 100644
--- a/src/components/subComponents/DataStackCard.vue
+++ b/src/components/subComponents/DataStackCard.vue
@@ -1,17 +1,65 @@
<template>
- <div class="s-board-card flex-center">
- <div style="width:38%;">
- <div class="top-text">
- <em>{{title}}</em>
- </div>
- <div class="mid-text">
- <em>{{total}}</em>
+ <div class="s-board-card flex-center power-card">
+ <div class="card-name">
+ <div class="content" style="">
+ <div class="top-text">
+ <em>{{title}}</em>
+ </div>
+ <div class="mid-text">
+ <em>{{total}}</em>
+ </div>
</div>
</div>
- <div style="height:86px;">
- <el-divider class="divider-css" direction="vertical"></el-divider>
+ <el-divider class="divider-css" direction="vertical"></el-divider>
+ <div class="desc">
+ <div class="item">
+ <el-tooltip effect="dark" placement="top">
+ <div slot="content">鍏ㄩ儴鎵撳紑鍒嗘瀽寮�鍏�</div>
+ <span class="bottom-text">
+ <i class="iconfont iconquanbu" style="color:#3D68E1;" v-show="ValidCount.length"></i>
+ {{ValidCount}}
+ </span>
+ </el-tooltip>
+ </div>
+ <div class="item">
+ <el-tooltip effect="dark" placement="top">
+ <div slot="content">绠楁硶閰嶇疆涓嶅叏</div>
+ <span class="bottom-text">
+ <i
+ class="iconfont iconicon-test6"
+ style="color:#3D68E1;margin-left: 15px;"
+ v-show="InValidCount.length"
+ ></i>
+ {{InValidCount}}
+ </span>
+ </el-tooltip>
+ </div>
+ <el-divider></el-divider>
+ <div class="item">
+ <el-tooltip effect="dark" placement="top">
+ <div slot="content">姝ｅ湪鎵ц鍒嗘瀽澶勭悊</div>
+ <span class="bottom-text">
+ <i class="iconfont iconicon-test11" style="color:#3D68E1" v-show="RunningCount.length"></i>
+ {{RunningCount}}
+ </span>
+ </el-tooltip>
+ </div>
+ <div class="item">
+ <el-tooltip effect="dark" placement="top">
+ <div slot="content">{{fourTip}}</div>
+ <span class="bottom-text">
+ <i
+ :class="`iconfont ${fourIcon}`"
+ style="color:#3D68E1;margin-left:15px;"
+ v-show="NoDeal.length"
+ ></i>
+ {{NoDeal}}
+ </span>
+ </el-tooltip>
+ </div>
</div>
- <div style="width:61%;height:100%;">
+
+ <!-- <div style="width:61%;height:100%;float:right;">
<div style="height:50%;" class="flex-center right-bot-css">
<el-tooltip effect="dark" placement="top">
<div slot="content">鍏ㄩ儴鎵撳紑鍒嗘瀽寮�鍏�</div>
@@ -57,7 +105,7 @@
</span>
</el-tooltip>
</div>
- </div>
+ </div> -->
</div>
</template>
@@ -155,4 +203,33 @@
}
}
}
+.power-card{
+ display: flex;
+ align-items: center;
+ .card-name {
+ width:38%;
+ height:100%;
+ display:flex;
+ justify-content: center;
+ align-items:center;
+ }
+ .el-divider{
+ height: 86px;
+ }
+ .desc {
+ height: 100%;
+ margin-left: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ .item{
+ line-height: 56px;
+ height: 56px;
+ width: 40%
+ }
+ .el-divider{
+ width: 90%;
+ height: 1px;
+ }
+ }
+}
</style>
\ No newline at end of file
diff --git a/src/components/subComponents/SystemInfo.vue b/src/components/subComponents/SystemInfo.vue
index 5dd0915..4a67a74 100644
--- a/src/components/subComponents/SystemInfo.vue
+++ b/src/components/subComponents/SystemInfo.vue
@@ -75,7 +75,7 @@
</li>
</ul>
</div>-->
- <div class="eCharts-box" :style="`width:${liquidWidth}`">
+ <div class="eCharts-box" >
<eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
</div>
</div>
@@ -133,6 +133,7 @@
height: 100%;
.card-box {
width: 50%;
+ float: left;
@media screen and (min-width: 1280px) and (max-width: 1440px) {
width: 65%;
}
@@ -172,9 +173,14 @@
font-weight: 700;
}
}
+ ul{
+ padding-left: 0;
+ }
}
.eCharts-box {
- width: 50%;
+ width: 28%;
+ float: right;
+ box-sizing: border-box;
height: 100%;
margin-left: 5px;
@media screen and (min-width: 1280px) and (max-width: 1440px) {
diff --git a/src/pages/analysisPower/index/App.vue b/src/pages/analysisPower/index/App.vue
index ed19b56..75d30fc 100644
--- a/src/pages/analysisPower/index/App.vue
+++ b/src/pages/analysisPower/index/App.vue
@@ -56,7 +56,6 @@
<el-table
:header-cell-style="{background:'#F8F8F8', color: '#222222'}"
:data="PollData.CameraList"
- height="93%"
border
>
<el-table-column label="搴忓彿" type="index" align="center" width="100px"></el-table-column>
@@ -488,7 +487,7 @@
<style lang="scss">
.s-poll-setting {
width: 100%;
- height: 100%;
+
font-size: 14px;
position: relative;
.top {
@@ -538,12 +537,12 @@
}
}
.bottom {
- width: calc(100% + 76px);
- height: 100%;
+ //width: calc(100% + 76px);
+ //height: 100%;
// height: calc(100% - 220px);
- position: absolute;
+ //position: absolute;
// top: 220px;
- left: -38px;
+ //left: -38px;
.tip {
display: inline-block;
font-family: PingFangSC-Medium;
@@ -556,7 +555,7 @@
padding: 20px 38px 38px 38px;
box-sizing: border-box;
width: 100%;
- height: 100%;
+
.toolBar {
width: 100%;
height: 42px;
--
Gitblit v1.8.0