From 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 15 八月 2023 16:02:58 +0800
Subject: [PATCH] 设置按钮的加载效果
---
src/views/IndexView.vue | 126 ++++++++++++++++++++++++++++-------------
1 files changed, 85 insertions(+), 41 deletions(-)
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 3a608c3..0e9f87d 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -12,6 +12,9 @@
},
data() {
return {
+ button:{
+ setButton:false
+ },
totalData: [],
// 淇濆瓨璁剧疆
save: false,
@@ -70,17 +73,9 @@
checkedShops: []
}
- // chartInstance: []
- // // 鍐呴儴璁惧
- // devices: []
};
},
- watch: {
- // 'outside.checkedShops'(){
- // this.saveOutsideData()
- // console.log('111');
- // }
- },
+
methods: {
//鑾峰彇鎵�鏈夊簵閾哄悕瀛�
getDeviceInfo() {
@@ -97,7 +92,6 @@
this.outside.allDataLoaded = true;
}
});
-
//浠庡唴閮ㄦ帴鍙ｈ幏鍙栧疄鏃舵暟鎹殑鎵�鏈夊簵閾哄悕绉�
axiosInstanceInstance
.get('https://fyami.com.cn/device/min/value/real_time', {
@@ -282,6 +276,8 @@
// 鐐瑰嚮鎸夐挳瑙﹀彂
show() {
+ //
+ this.button.setButton = true
// 褰撳彇娑堥�夋嫨鏃讹紝闃叉鍥惧舰杩樹繚鐣欏湪椤甸潰銆�
if (this.outside.checkedShops.length == 0) {
this.outside.realTimeData = [];
@@ -291,6 +287,8 @@
}
// 鏍规嵁鎵�閫夌殑搴楅摵璇锋眰鏁版嵁
this.request();
+ this.button.setButton = false
+ // 瀹氭椂鏇存柊
setInterval(() => {
this.request();
}, this.timeInterval);
@@ -441,7 +439,7 @@
content="鐐瑰嚮灞曠ず瀹炴椂鏁版嵁"
placement="top-start"
>
- <el-button type="success" @click="show" style="margin-left: 10px">
+ <el-button type="success" :loading="button.setButton" @click="show" style="margin-left: 10px">
璁剧疆
</el-button>
</el-tooltip>
@@ -462,14 +460,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 +482,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 +538,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 +573,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 +593,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 +638,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 +655,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