From 9a3f0cae8fb887a50c3b7fb8cd8eb82b101c52bb Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Sat, 08 May 2021 08:50:35 +0800
Subject: [PATCH] 设备状态标签样式修改
---
src/views/clientManagement/clientManagement.vue | 90 ++++++++++++++++++++++++++++++++++++---------
1 files changed, 72 insertions(+), 18 deletions(-)
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index 832a1f0..7b0cb30 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -67,11 +67,17 @@
<!-- </el-button>-->
<!-- </template>-->
- <template slot-scope="{ row }" slot="dxzt">
- <el-tag>{{
- row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "正常" :row.dxzt == "2" ? "报警":row.dxzt == "3" ? "故障":"无"
+ <template class="tdtype" slot-scope="{ row }" slot="dxzt">
+ <el-tag class="dtype">
+ {{
+ row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "正常" :row.dxzt == "2" ? "预警":row.dxzt == "3" ? "故障":"无"
}}
+ <i class="dx" v-if="row.dxzt == '0' "></i>
+ <i class="zc" v-if="row.dxzt == '1' "></i>
+ <i class="yj" v-if="row.dxzt == '2' "></i>
+ <i class="gz" v-if="row.dxzt == '3' "></i>
</el-tag>
+
</template>
<template slot-scope="{ row }" slot="type">
@@ -213,6 +219,9 @@
},
data() {
return {
+ dataLIU:{
+ color:"#DFDFDF"
+ },
//legend-liu数据
datalistLIU:[
{
@@ -1049,26 +1058,26 @@
// }
if(row.dtype!=null && row.dtype!=""){
- if(row.dtype=='0'){
- return {
- color: "#DFDFDF"
- };
- }
- if(row.dtype=='1'){
- return {
- color: "#29C093"
- };
- }
+ // if(row.dtype=='0'){
+ // return {
+ // color: "#DFDFDF"
+ // };
+ // }
+ // if(row.dtype=='1'){
+ // return {
+ // color: "#29C093"
+ // };
+ // }
if(row.dtype=='2'){
return {
color: "#F34A4A"
};
}
- if(row.dtype=='3'){
- return {
- color: "#F48F57"
- };
- }
+ // if(row.dtype=='3'){
+ // return {
+ // color: "#F48F57"
+ // };
+ // }
}
},
handleManage(row) {
@@ -1251,6 +1260,51 @@
color: red;
}
+ .dtype{
+ width: 80px;
+ }
+
+ .dx{
+ position: absolute;
+ top: 50%;
+ margin-top: -5px;
+ margin-left: 6px;
+ width: 10px;
+ height: 10px;
+ border-radius: 30%;
+ background: #DFDFDF;
+ }
+ .zc{
+ position: absolute;
+ top: 50%;
+ margin-top: -5px;
+ margin-left: 6px;
+ width: 10px;
+ height: 10px;
+ border-radius: 30%;
+ background: #29C093;
+ }
+ .yj{
+ position: absolute;
+ top: 50%;
+ margin-top: -5px;
+ margin-left: 6px;
+ width: 10px;
+ height: 10px;
+ border-radius: 30%;
+ background: #F34A4A;
+ }
+ .gz{
+ position: absolute;
+ top: 50%;
+ margin-top: -5px;
+ margin-left: 6px;
+ width: 10px;
+ height: 10px;
+ border-radius: 30%;
+ background: #F48F57;
+ }
+
.tabFontSize{
font-size: 15px;
}
--
Gitblit v1.9.3