From 0ee16e9f5dd31c6c98df1a5fdcf081c8eb7f80df Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 14 十一月 2023 13:15:55 +0800
Subject: [PATCH] 修改了获取风险值的请求接口
---
src/views/line_graph/DataRiskRank.vue | 281 +++++++++++++++++++++++++------------------------------
1 files changed, 129 insertions(+), 152 deletions(-)
diff --git a/src/views/line_graph/DataRiskRank.vue b/src/views/line_graph/DataRiskRank.vue
index aa882a4..465b2b8 100644
--- a/src/views/line_graph/DataRiskRank.vue
+++ b/src/views/line_graph/DataRiskRank.vue
@@ -1,9 +1,9 @@
<script>
-import TimeShortCuts from '@/sfc/TimeShortCuts.vue';
-import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
-import { useCommonFunction } from '../../utils/common.js';
-import requetsApi from '@/api/exportExcel/requetsApi.js';
-import dayjs from 'dayjs';
+import TimeShortCuts from '@/sfc/TimeShortCuts.vue'
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import { useCommonFunction } from '../../utils/common.js'
+import requetsApi from '@/api/exportExcel/requetsApi.js'
+import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
@@ -26,25 +26,28 @@
isNoData: true,
loading: false,
// 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
- queryButton:false,
+ queryButton: false,
// 瀵煎嚭鎸夐挳鍔犺浇涓�
- exportButton:false,
+ exportButton: false,
form: {
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
endTime: ''
- }
- };
+ },
+ tableHeight: '600'
+ }
},
setup() {
// 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const { cmpp, exportToExcel } = useCommonFunction();
- return { cmpp, exportToExcel };
+ const { cmpp, exportToExcel } = useCommonFunction()
+ return { cmpp, exportToExcel }
},
mounted() {
- this.form.name = '';
+ this.form.name = ''
+ this.fetchData()
+ this.calTableHeight()
},
methods: {
// 鍔熻兘锛氬鍑轰负Excel
@@ -52,10 +55,10 @@
let params = {
beginTime: this.form.beginTime,
endTime: this.form.endTime
- };
+ }
this.exportButton = true
requetsApi.fetchAllData(params).then((res) => {
- const data = res.data.data;
+ const data = res.data.data
const tableColumns = [
'name',
@@ -67,7 +70,7 @@
'dayOnline',
'dayValid',
'dayExceeding'
- ];
+ ]
const excelColumns = [
['A1', '绔欑偣鍚嶇О'],
['B1', '璁惧缂栧彿'],
@@ -78,209 +81,183 @@
['G1', '鍦ㄧ嚎鐜�'],
['H1', '鏈夋晥鐜�'],
['I1', '瓒呮爣鐜�']
- ];
- this.exportToExcel(data, tableColumns, excelColumns, '鍒嗘瀽琛�.xlsx');
+ ]
+ this.exportToExcel(data, tableColumns, excelColumns, '鍒嗘瀽琛�.xlsx')
this.exportButton = false
- });
+ })
},
+
// 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
tableCellClassName({ row, columnIndex }) {
// 骞冲潎鍊间笉婊¤冻鏍囧噯鏃�
if (columnIndex == 4) {
if (row.dayAvg >= 0.8) {
- return 'warning-row';
+ return 'warning-row'
}
}
// 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹�
if (columnIndex == 7) {
if (!this.cmpp(row.dayOnline, '90%')) {
- return 'red-color';
+ return 'red-color'
}
}
if (columnIndex == 8) {
if (!this.cmpp(row.dayValid, '90%')) {
- return 'red-color';
+ return 'red-color'
}
}
},
+
+ // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+ calTableHeight() {
+ const h1 = this.$refs.h1.$el.offsetHeight
+ const h2 = this.$refs.h2.$el.offsetHeight;
+ // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`;
+ },
// 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
handleSizeChange(val) {
- this.pageSize = val;
+ this.pageSize = val
// 鏀瑰彉姣忛〉鏄剧ず鏁扮洰鏃惰烦鍒板綋鍓嶉〉
- this.handleCurrentChange(1);
+ this.handleCurrentChange(1)
},
// 椤靛彿鏀瑰彉鏃惰Е鍙�
handleCurrentChange(val) {
// 灏嗗綋鍓嶉〉鍙风粰currentPage
- this.currentPage = val;
+ this.currentPage = val
// 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
- this.fetchData();
+ this.fetchData()
},
//搴忓彿閫掑
indexMethod(index) {
- return index + 1 + (this.currentPage - 1) * this.pageSize;
+ return index + 1 + (this.currentPage - 1) * this.pageSize
},
giveTime(val) {
//灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
- this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
- this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
+ this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')
},
// 鐐瑰嚮缁熻鎸夐挳
fetchData() {
- let params = {};
- params['page'] = this.currentPage;
- params['pageSize'] = this.pageSize;
+ let params = {}
+ params['page'] = this.currentPage
+ params['pageSize'] = this.pageSize
if (this.form.name) {
- params['siteName'] = this.form.name;
+ params['siteName'] = this.form.name
}
if (this.form.beginTime) {
- params['beginTime'] = this.form.beginTime;
+ params['beginTime'] = this.form.beginTime
}
if (this.form.endTime) {
- params['endTime'] = this.form.endTime;
+ params['endTime'] = this.form.endTime
}
- this.loading = true;
+ this.loading = true
this.queryButton = true
- this.$http
- .get('/dust/analysistime', { params: params })
- .then((response) => {
- this.tableData = response.data.data.rows;
- this.loading = false;
- this.queryButton = false
- if (response.data.data.total == 0) {
- this.isNoData = true;
- return;
- }
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- this.total = response.data.data.total;
- });
+ this.isNoData = false
+ this.$http.get('/dust/analysistime', { params: params }).then((response) => {
+ this.tableData = response.data.data.rows
+ this.loading = false
+ this.queryButton = false
+ if (response.data.data.total == 0) {
+ this.isNoData = true
+ return
+ }
+ // 绉婚櫎绌烘暟鎹姸鎬�
+ this.isNoData = false
+ this.total = response.data.data.total
+ })
}
}
-};
+}
</script>
<template>
- <div class="search-container">
- <el-container>
- <el-main>
- <el-form :inline="true" :model="form">
- <el-form-item>
- <AreaAndmonitorType></AreaAndmonitorType>
- </el-form-item>
+ <el-form :inline="true" :model="form" ref="h1">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-form-item>
- <TimeShortCuts
- timeType="currentMonth"
- @submit-time="giveTime"
- ></TimeShortCuts>
- </el-form-item>
-
- <el-form-item>
- <ButtonClick style="margin-right: 12px;" content="椋庨櫓鎺掑悕" type="primary" :loading="queryButton" @do-search="fetchData" ></ButtonClick>
- <ButtonExportExcel content="瀵煎嚭鏁版嵁" type="success" :loading="exportButton" @do-export="exportData"></ButtonExportExcel>
- </el-form-item>
- </el-form>
+ <el-form-item>
+ <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
+ </el-form-item>
- <el-card v-show="!isNoData">
- <el-table
- :data="tableData"
- height="600px"
- style="width: 100%"
- v-loading="loading"
- :cell-class-name="tableCellClassName"
- >
- <el-table-column
- type="index"
- prop="name"
- label="搴忓彿"
- :index="indexMethod"
- fixed
- show-overflow-tooltip
- />
- <el-table-column
- prop="name"
- label="绔欑偣鍚嶇О"
- show-overflow-tooltip
- />
+ <el-form-item>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="鏁版嵁鎺掑悕"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetchData"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportData"
+ ></ButtonExportExcel>
+ </el-form-item>
+ </el-form>
- <el-table-column
- prop="mnCode"
- label="璁惧缂栧彿"
- show-overflow-tooltip
- />
+ <el-card v-show="!isNoData">
+ <el-table
+ :data="tableData"
+ :height="tableHeight"
+ style="width: 100%"
+ v-loading="loading"
+ :cell-class-name="tableCellClassName"
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ show-overflow-tooltip
+ />
+ <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
- <el-table-column
- prop="lst"
- label="鐩戞祴鏃ユ湡"
- sortable
- show-overflow-tooltip
- />
+ <el-table-column prop="mnCode" label="璁惧缂栧彿" show-overflow-tooltip />
- <el-table-column
- prop="dayAvg"
- label="鏃ュ钩鍧囧��"
- sortable
- show-overflow-tooltip
- />
- <el-table-column
- prop="min"
- label="鏃ユ渶灏忓��"
- sortable
- show-overflow-tooltip
- />
- <el-table-column
- prop="max"
- label="鏃ユ渶澶у��"
- sortable
- show-overflow-tooltip
- />
+ <el-table-column prop="lst" label="鐩戞祴鏃ユ湡" sortable show-overflow-tooltip />
- <el-table-column
- prop="dayOnline"
- label="鏃ュ湪绾跨巼"
- sortable
- show-overflow-tooltip
- />
+ <el-table-column prop="dayAvg" label="鏃ュ钩鍧囧��" sortable show-overflow-tooltip />
+ <el-table-column prop="min" label="鏃ユ渶灏忓��" sortable show-overflow-tooltip />
+ <el-table-column prop="max" label="鏃ユ渶澶у��" sortable show-overflow-tooltip />
- <el-table-column
- prop="dayValid"
- label="鏃ユ湁鏁堢巼"
- sortable
- show-overflow-tooltip
- />
+ <el-table-column prop="dayOnline" label="鏃ュ湪绾跨巼" sortable show-overflow-tooltip />
- <el-table-column
- prop="dayExceeding"
- label="鏃ヨ秴鏍囩巼"
- sortable
- show-overflow-tooltip
- />
- </el-table>
+ <el-table-column prop="dayValid" label="鏃ユ湁鏁堢巼" sortable show-overflow-tooltip />
- <el-pagination
- :page-sizes="[10, 20, 50, 100]"
- :total="total"
- layout="total,sizes, prev, pager, next, jumper"
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
- @update:current-page="handleCurrentChange"
- @update:page-size="handleSizeChange"
- />
- </el-card>
- <el-empty v-show="isNoData" :image-size="200" />
- </el-main>
- </el-container>
- </div>
+ <el-table-column prop="dayExceeding" label="鏃ヨ秴鏍囩巼" sortable show-overflow-tooltip />
+ </el-table>
+
+ <el-pagination
+ ref="h2"
+ :page-sizes="[10, 20, 50, 100]"
+ :total="total"
+ layout="total,sizes, prev, pager, next, jumper"
+ v-model:current-page="currentPage"
+ v-model:page-size="pageSize"
+ @update:current-page="handleCurrentChange"
+ @update:page-size="handleSizeChange"
+ />
+ </el-card>
+ <el-empty v-show="isNoData" :image-size="200" />
</template>
<style scoped>
+.el-form {
+ margin: 20px;
+}
+.el-card {
+ margin: 20px 20px 0px 20px;
+}
:deep().el-table__row .warning-row {
background-color: #f7ba1e;
}
--
Gitblit v1.9.3