From 9bfdf6ecef01397978c140aa4fbd8c4840d894fb Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 15 八月 2023 13:04:35 +0800
Subject: [PATCH] 异常页面表格列的颜色
---
src/views/IndexView.vue | 117 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 77 insertions(+), 40 deletions(-)
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 3a608c3..58ef864 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -70,17 +70,9 @@
checkedShops: []
}
- // chartInstance: []
- // // 鍐呴儴璁惧
- // devices: []
};
},
- watch: {
- // 'outside.checkedShops'(){
- // this.saveOutsideData()
- // console.log('111');
- // }
- },
+
methods: {
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
@@ -97,7 +89,6 @@
this.outside.allDataLoaded = true;
}
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
@@ -462,14 +453,20 @@
:key="device.mvStatCode"
>
<!-- 鍐呴儴璁惧 -->
- <el-card v-if="index < inner.inFumeValue.length" height="1900px">
+ <el-card v-if="index < inner.inFumeValue.length" class="card-font-color" height="1900px">
<template #header>
- <div class="card-header">{{ device.siteName }}</div>
+ <div class="card-header">{{ device.siteName }}
+ <img src="@/assets/inner_device.jpg" class="icon-inner"/>
+ </div>
+
</template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
<DashBoard :data="device.value"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mnCode }}</div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.time }}</div>
+
+ <div >璁惧缂栧彿锛歿{ device.mnCode }}</div>
+
+ <div class="horizontal-line"></div>
+
<div class="status" :class="{ exceed: device.value > 1 }">
{{ device.value >= 1 ? '瓒呮爣' : '' }}
</div>
@@ -478,31 +475,31 @@
<br />
</el-card>
<!-- 澶栭儴璁惧 -->
- <el-card v-else>
+ <el-card v-else class="card-font-color">
<template #header>
<div class="card-header">
{{ device.diName }}
- <el-tooltip
- class="box-item"
- effect="dark"
- content="鍏朵粬璁惧"
- placement="top-start"
- >
- <i-ep-Shop></i-ep-Shop>
- </el-tooltip>
- <span> </span>
</div>
</template>
+ <div class="report-time-text">鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
<DashBoard :data="device.mvFumeConcentration2"></DashBoard>
- <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
- <hr class="divider-margin" />
- <divr class="data">椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity }} </divr>
- <hr class="divider-margin" />
- <div class="data">
+
+ <div class="imag-container">
+ <img src="@/assets/wind.jpg" class="image"/>
+ <span class="chart-below-text"> 椋庢満鐢垫祦(A)锛歿{ device.mvFanElectricity }} </span>
+
+ <span class="chart-below-text2">
+ <img src="@/assets/purifier.jpg" class="image"/>
鍑�鍖栧櫒鐢垫祦(A)锛歿{ device.mvPurifierElectricity }}
- </div>
- <hr class="divider-margin" />
- <div>鏁版嵁鍙戝竷鏃堕棿锛歿{ device.mvDataTime }}</div>
+ </span>
+ </div>
+ <div class="horizontal-line"></div>
+
+ <div>璁惧缂栧彿锛歿{ device.mvStatCode }}</div>
+
+ <div class="horizontal-line"></div>
+
+ <div>璁惧渚涘簲鍟嗭細{{ device.diSupplier }}</div>
<div
class="status"
:class="{ exceed: device.mvFumeConcentration2 >= 1 }"
@@ -534,13 +531,15 @@
}
.el-card {
margin-bottom: 10px;
- border-radius: 9px;
+ border-radius: 15px;
+ margin-left: 5px;
}
.card-header {
// display: flex;
// align-items: center;
// position: center;
text-align: center;
+ position: relative;
}
.card-header-item {
display: flex;
@@ -567,7 +566,19 @@
margin-bottom: 20px;
border: #1de01d;
}
-
+.chart-below-text2{
+ float: right;
+}
+.image {
+ height: 18px;
+}
+.icon-inner {
+ position: relative;
+ top: -20px;
+ right: -115px;
+ width: 50px;
+ height: 50px;
+}
.dashboard-title {
font-size: 20px;
text-align: center;
@@ -575,11 +586,25 @@
background-color: #f5f7fa;
}
+.report-time-text {
+ font-size: 12px;
+ color: #999999;
+}
+
+.card-font-color {
+ color: #000000;
+}
+
+
+
+
+
/* 瓒呮爣 鏂囧瓧鏁堟灉*/
.status {
font-size: 18px;
color: #ff4d4f;
font-weight: bold;
+ margin-top: 5px;
}
.exceed {
@@ -606,17 +631,15 @@
}
// 鍒嗗壊绾夸笂涓嬭窛绂�
.divider-margin {
- margin-top: 3px;
+ margin: 10px 0px;
+ border: 1px solid gray;
}
.el-input {
width: calc(100% / 6);
// margin-left: 70px;
}
-// .input-search {
-// display: flex;
-// justify-content: left;
-// }
+
.save-switch {
margin-top: 20px;
margin-left: 20px;
@@ -625,4 +648,18 @@
padding: 0px;
margin: 0px;
}
+.horizontal-line {
+ position: relative;
+ height: 1px;
+ margin: 10px 0px;
+}
+.horizontal-line::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background-color: rgb(221, 217, 217);
+}
</style>
--
Gitblit v1.9.3