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/HistoryFume.vue | 229 ++++++++++++---------------------------------------------
1 files changed, 48 insertions(+), 181 deletions(-)
diff --git a/src/views/HistoryFume.vue b/src/views/HistoryFume.vue
index 4396b51..58bf326 100644
--- a/src/views/HistoryFume.vue
+++ b/src/views/HistoryFume.vue
@@ -2,7 +2,7 @@
<script >
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
-import axiosInstance from '../utils/request.js'
+import axiosInstanceInstance from '../utils/request.js'
import TimeSelect from '../sfc/TimeSelect.vue';
// import ShopNameAndID from '../sfc/TimeSelect.vue';
@@ -23,6 +23,12 @@
},
data() {
return {
+ button:{
+ // 鏌ヨ鐨勬寜閽�
+ queryButton:false,
+ },
+ // 绌虹姸鎬�
+ isNoData:false,
// 涓嬫媺妗嗕竴寮�濮嬪睍绀虹殑鍚嶅瓧
beginShowShopName:[],
options: {},
@@ -87,158 +93,7 @@
],
// 閫夋嫨搴楅摵鍚�
devId: [null,null],
- optionsShop: [
- {
- value: '浠樺皬濮愬湪鎴愰兘',
- label: '浠樺皬濮愬湪鎴愰兘',
- children: [
- {
- value: 'qinshi_31010320210010',
- label: 'qinshi_31010320210010'
- }
- ]
- },
- {
- value: '鍚夊埢鑱旂洘',
- label: '鍚夊埢鑱旂洘 ',
- children: [
- {
- value: 'qinshi_31010320200006',
- label: 'qinshi_31010320200006'
- }
- ]
- },
- {
- value: '瀹跺湪濉斿暒',
- label: '瀹跺湪濉斿暒',
- children: [
- {
- value: 'hengzhiyuan_64480047347215',
- label: 'hengzhiyuan_64480047347215'
- }
- ]
- },
- {
- value: '鐙兼潵浜�',
- label: '鐙兼潵浜� ',
- children: [
- {
- value: 'zhuoquan_31011020175012',
- label: 'zhuoquan_31011020175012'
- }
- ]
- },
- {
- value: '涔愬嚡鎾掓槦娓稿簵',
- label: '涔愬嚡鎾掓槦娓稿簵',
- children: [
- {
- value: 'qinshi_31010320200007',
- label: 'qinshi_31010320200007'
- }
- ]
- },
- {
- value: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- label: '棣ㄨ繙缇庨灏忛晣锛堝搱灏肩編椋熷箍鍦猴級',
- children: [
- {
- value: 'hengzhiyuan_64480047078091',
- label: 'hengzhiyuan_64480047078091'
- }
- ]
- },
- {
- value: '妫掔害缈�',
- label: '妫掔害缈�',
- children: [
- {
- value: 'qinshi_31010320190005',
- label: 'qinshi_31010320190005'
- }
- ]
- },
- {
- value: '寮勫爞鍜亾',
- label: '寮勫爞鍜亾',
- children: [
- {
- value: 'zhuoquan_31011020175008',
- label: 'zhuoquan_31011020175008'
- }
- ]
- },
- {
- value: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- label: '鏉ㄨ榻愰綈鍝堝皵鐑よ倝',
- children: [
- {
- value: 'zhuoquan_31011020175002',
- label: 'zhuoquan_31011020175002'
- }
- ]
- },
- {
- value: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- label: '涓婃捣绋斾紶椁愰ギ绠＄悊鏈夐檺鍏徃锛堜汉鐢熶竴涓诧級',
- children: [
- {
- value: 'GLHB00000000016004',
- label: 'GLHB00000000016004'
- }
- ]
- },
- {
- value: '缂樺',
- label: '缂樺',
- children: [
- {
- value: 'fucheng310104200914',
- label: 'fucheng310104200914'
- }
- ]
- },
- {
- value: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- label: '娉夌洓椁愰ギ锛堜笂娴凤級鏈夐檺鍏徃锛堥鍏跺锛�',
- children: [
- {
- value: 'GLHB00000000016155',
- label: 'GLHB00000000016155'
- }
- ]
- },
- {
- value: '涓拌寕鐑や覆',
- label: '涓拌寕鐑や覆',
- children: [
- {
- value: 'GLHB00000000016011',
- label: 'GLHB00000000016011'
- }
- ]
- },
- {
- value: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- label: '涓婃捣娉扮厡椁愰ギ绠＄悊鏈夐檺鍏徃锛堟嘲鐓岄浮锛�',
- children: [
- {
- value: 'GLHB00000000010279',
- label: 'GLHB00000000010279'
- }
- ]
- },
- {
- value: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- label: '寰愭眹鍖鸿景鐔欓棣�(灏忛搧鍚涗覆鐑у眳閰掑眿)',
- children: [
- {
- value: 'GLHB00000000010504',
- label: 'GLHB00000000010504'
- }
- ]
- }
- ]
+
};
},
@@ -256,8 +111,7 @@
beforeRouteUpdate(to, from, next) {
if (to.name === this.$route.name) {
- this.backMinuteDataAWeekAgo();
-
+ this.backMinuteDataAWeekAgo();
}
next();
},
@@ -401,10 +255,6 @@
},
// 杩斿洖鍓嶄竴鍛ㄥ垎閽熸暟鎹〃鏁版嵁
backMinuteDataAWeekAgo() {
-
-
- // 鎵撳紑椤甸潰鍔犺浇鏈�杩戜竴鍛ㄧ殑鏁版嵁
- this.loading = true;
// 缁欑骇鑱旈�夋嫨鍣ㄨ缃粯璁ょ殑閫夋嫨椤�
this.beginShowShopName = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
this.devId = ['浠樺皬濮愬湪鎴愰兘', 'qinshi_31010320210010'];
@@ -412,7 +262,9 @@
// 缁欐椂闂撮�夋嫨鍣ㄨ缃粯璁ゆ椂闂�
// this.beginTime = dayjs().subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss');
// this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-
+ // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿
+ this.exportBeginTime =this.beginTime
+ this.exportEndTime = this.endTime
console.log(this.currentDateTime, this.oneWeekAgoDateTime);
@@ -420,12 +272,19 @@
params['devId'] = 'qinshi_31010320210010';
params['beginTime'] = this.beginTime;
params['endTime'] = this.endTime;
-
- axiosInstance
+ this.loading = true;
+ axiosInstanceInstance
.get('/fume/history', { params: params })
.then((response) => {
// 淇濆瓨杩斿洖鐨�
this.exceedingData = response.data.data;
+ this.loading = false;
+ if(response.data.data.length==0){
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+
// 鍒嗛〉
this.total = this.exceedingData.length;
// 榛樿鏄剧ず绗竴椤�
@@ -443,6 +302,9 @@
alert('鏃堕棿璺ㄥ害涓嶈兘瓒呰繃涓�涓湀');
return;
}
+ // 灏嗘椂闂村悓姝ョ粰瀵煎嚭鏃堕棿
+ this.exportBeginTime =this.beginTime
+ this.exportEndTime = this.endTime
let params = {};
if (this.devId[1]) {
params['devId'] = this.devId[1];
@@ -453,18 +315,27 @@
if (this.endTime) {
params['endTime'] = this.endTime;
}
- axiosInstance
+ this.loading=true
+ this.button.queryButton = true
+ axiosInstanceInstance
.get('/fume/history', { params: params })
.then((response) => {
+
// 淇濆瓨杩斿洖鐨�
this.exceedingData = response.data.data;
- // this.displayData = response.data.data //琛ㄦ牸娓叉煋
+ this.loading=false
+ this.button.queryButton = false
+ if(response.data.data.length==0){
+ ElMessage('璇ユ椂娈垫棤鏁版嵁')
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
// 鍒嗛〉
this.total = this.exceedingData.length;
// 榛樿鏄剧ず绗竴椤�
this.handleCurrentChange(1);
- // 灞曠ず鎶樼嚎鍥�
- // this.drawChart();
})
},
@@ -497,7 +368,7 @@
params['exportEndTime'] = this.exportEndTime;
}
- axiosInstance.get('/fume/export', { params: params }).then((result) => {
+ axiosInstanceInstance.get('/fume/export', { params: params }).then((result) => {
this.exportData = result.data.data;
console.log(this.exportData);
});
@@ -524,7 +395,7 @@
// 缂栬緫琛ㄥご琛� 淇敼琛ㄥご
xls['A1'].v = '璁惧缂栧彿';
xls['B1'].v = '搴楅摵鍚嶇О';
- xls['C1'].v = '鎶ヨ鏃堕棿';
+ xls['C1'].v = '閲囬泦鏃堕棿';
xls['D1'].v = '椋庢満鐢垫祦(A)';
xls['E1'].v = '鍑�鍖栧櫒鐢垫祦(A)';
xls['F1'].v = '娌圭儫娴撳害(mg/m鲁)';
@@ -619,7 +490,7 @@
<!-- <el-date-picker v-model="beginTime" type="datetime" placeholder="寮�濮嬫椂闂�" value-format="YYYY-MM-DD HH:mm:ss" />
<el-date-picker v-model="endTime" type="datetime" placeholder="缁撴潫鏃堕棿" value-format="YYYY-MM-DD HH:mm:ss" /> -->
<TimeSelect @submit-time="giveTime"></TimeSelect>
- <el-button type="primary" plain @click="lineChart">鏌ヨ</el-button>
+ <el-button type="primary" plain :loading="button.queryButton" @click="lineChart">鏌ヨ</el-button>
<el-tooltip
@@ -691,12 +562,12 @@
</div>
- <div v-show="!isSwitch" class="chart-container">
+ <div v-show="!isSwitch && !isNoData" v-loading="loading" class="chart-container">
<lineChart :chartData="options"></lineChart>
</div>
<!-- 琛ㄦ牸鏁版嵁 -->
- <div v-show="isSwitch" class="container">
+ <div v-show="isSwitch && !isNoData" v-loading="loading" class="container">
<el-table :data="displayData" style="width: 100%; margin-top: 25px" height="500px" table-layout="auto">
<el-table-column fixed prop="mvStatCode" label="璁惧缂栧彿">
<template #default="{ row }">
@@ -713,7 +584,7 @@
</template>
</el-table-column>
- <el-table-column prop="mvDataTime" label="閲囨牱鏃堕棿">
+ <el-table-column prop="mvDataTime" label="閲囬泦鏃堕棿">
<template #default="{ row }">
<el-tooltip effect="dark" :content="row.mvDataTime">
<div class="cell ellipsis">{{ row.mvDataTime }}</div>
@@ -747,6 +618,7 @@
<!-- layout="total, sizes, prev, pager, next, jumper" -->
</div>
+ <el-empty v-show="isNoData" :image-size="200" />
</div>
</template>
@@ -802,17 +674,12 @@
.container {
display: flex;
flex-direction: column;
- height: 100vh;
}
-@media screen and (max-width: 768px) {
- /* 鍦ㄥ皬灞忓箷涓婂簲鐢ㄧ殑鏍峰紡 */
+:deep().el-dialog {
+ border-radius: 9px;
}
-@media screen and (min-width: 769px) and (max-width: 1024px) {
- /* 鍦ㄤ腑绛夊睆骞曚笂搴旂敤鐨勬牱寮� */
-}
-
-@media screen and (min-width: 1025px) {
- /* 鍦ㄥぇ灞忓箷涓婂簲鐢ㄧ殑鏍峰紡 */
+.el-table {
+ color: #000000;
}
</style>
--
Gitblit v1.9.3