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 | 354 ++++++++++++++++++++++++++++------------------------------
1 files changed, 173 insertions(+), 181 deletions(-)
diff --git a/src/views/line_graph/DataRiskRank.vue b/src/views/line_graph/DataRiskRank.vue
index 3077011..465b2b8 100644
--- a/src/views/line_graph/DataRiskRank.vue
+++ b/src/views/line_graph/DataRiskRank.vue
@@ -1,13 +1,18 @@
<script>
-import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
-import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
-import {useCommonFunction} from '../../utils/common.js';
+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 dayjs from 'dayjs'
+import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+
export default {
components: {
- TimeSelectWithShortCuts,
- AreaAndmonitorType
+ TimeShortCuts,
+ AreaAndmonitorType,
+ ButtonExportExcel,
+ ButtonClick
},
data() {
return {
@@ -18,253 +23,241 @@
total: 0,
// 琛ㄦ牸鏁版嵁
tableData: [],
- isNoData: false,
+ isNoData: true,
loading: false,
-
+ // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
+ queryButton: false,
+ // 瀵煎嚭鎸夐挳鍔犺浇涓�
+ exportButton: false,
form: {
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
endTime: ''
- }
- };
+ },
+ tableHeight: '600'
+ }
},
- setup(){
- // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const {cmpp,exportToExcel} = useCommonFunction()
- return {cmpp,exportToExcel}
+ setup() {
+ // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
+ const { cmpp, exportToExcel } = useCommonFunction()
+ return { cmpp, exportToExcel }
},
-
mounted() {
- this.form.name = '';
+ this.form.name = ''
+ this.fetchData()
+ this.calTableHeight()
},
methods: {
// 鍔熻兘锛氬鍑轰负Excel
- exportData(){
- let params ={
- 'beginTime':this.form.beginTime,
- 'endTime': this.form.endTime
+ exportData() {
+ let params = {
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
}
- requetsApi.fetchAllData(params).then(res => {
+ this.exportButton = true
+ requetsApi.fetchAllData(params).then((res) => {
const data = res.data.data
- console.log('闀垮害锛�',data.length);
- const tableColumns = [
- 'name',
- 'mnCode',
- 'lst',
- 'dayAvg',
- 'min',
- 'max',
- 'dayOnline',
- 'dayValid',
- 'dayExceeding',
- ]
- const excelColumns = [['A1','绔欑偣鍚嶇О'],
- ['B1','璁惧缂栧彿'],['C1','鐩戞祴鏃ユ湡'],['D1','骞冲潎鍊�'],
- ['E1','鏈�灏忓��'],['F1','鏈�澶у��'],['G1','鍦ㄧ嚎鐜�'],
- ['H1','鏈夋晥鐜�'],['I1','瓒呮爣鐜�']]
- this.exportToExcel(data,tableColumns,excelColumns,'鍒嗘瀽琛�.xlsx')
+ const tableColumns = [
+ 'name',
+ 'mnCode',
+ 'lst',
+ 'dayAvg',
+ 'min',
+ 'max',
+ 'dayOnline',
+ 'dayValid',
+ 'dayExceeding'
+ ]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '璁惧缂栧彿'],
+ ['C1', '鐩戞祴鏃ユ湡'],
+ ['D1', '骞冲潎鍊�'],
+ ['E1', '鏈�灏忓��'],
+ ['F1', '鏈�澶у��'],
+ ['G1', '鍦ㄧ嚎鐜�'],
+ ['H1', '鏈夋晥鐜�'],
+ ['I1', '瓒呮爣鐜�']
+ ]
+ this.exportToExcel(data, tableColumns, excelColumns, '鍒嗘瀽琛�.xlsx')
+ this.exportButton = false
})
-
},
+
// 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
- tableCellClassName({ row, column, rowIndex, columnIndex }) {
+ 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';
+ if (!this.cmpp(row.dayOnline, '90%')) {
+ return 'red-color'
}
}
if (columnIndex == 8) {
- if (!this.cmpp(row.dayValid,'90%')) {
- return 'red-color';
+ if (!this.cmpp(row.dayValid, '90%')) {
+ 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) {
- console.log('褰撳墠椤典负锛�', 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() {
- console.log(this.form.name);
- 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.$http
- .get('/dust/analysistime', { params: params })
- .then((response) => {
- this.tableData = response.data.data.rows;
- console.log(this.tableData);
- this.loading = false;
- if (response.data.data.total == 0) {
- this.isNoData = true;
- return;
- }
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- this.total = response.data.data.total;
- this.loading = false;
- });
+ this.loading = true
+ this.queryButton = true
+ 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-item>
- <TimeSelectWithShortCuts
- @submit-time="giveTime"
- ></TimeSelectWithShortCuts>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="fetchData">缁熻鍒嗘瀽</el-button>
- <el-button type="warning" @click="exportData">瀵煎嚭</el-button>
- </el-form-item>
- </el-form>
+ <el-form :inline="true" :model="form" ref="h1">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-card>
- <el-empty v-show="isNoData" :image-size="200" />
+ <el-form-item>
+ <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
+ </el-form-item>
- <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-table-column
- prop="lst"
- 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="dayOnline"
- label="鏃ュ湪绾跨巼"
- sortable
- show-overflow-tooltip
- />
-
- <el-table-column
- prop="dayValid"
- label="鏃ユ湁鏁堢巼"
- sortable
- show-overflow-tooltip
- />
-
- <el-table-column
- prop="dayExceeding"
- label="鏃ヨ秴鏍囩巼"
- sortable
- show-overflow-tooltip
- />
- </el-table>
-
- <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 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-card>
+ <el-table-column prop="name" label="绔欑偣鍚嶇О" show-overflow-tooltip />
- </el-main>
- </el-container>
- </div>
+ <el-table-column prop="mnCode" label="璁惧缂栧彿" show-overflow-tooltip />
+
+ <el-table-column prop="lst" 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="dayOnline" label="鏃ュ湪绾跨巼" sortable show-overflow-tooltip />
+
+ <el-table-column prop="dayValid" label="鏃ユ湁鏁堢巼" sortable show-overflow-tooltip />
+
+ <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;
}
@@ -272,7 +265,6 @@
background-color: red;
}
.el-table {
- color: #000000;
+ color: #333333;
}
-
</style>
--
Gitblit v1.9.3