From eeef5d4039d2b3fee6854ddc2789aa23232b2cfb Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期三, 27 九月 2023 17:24:10 +0800
Subject: [PATCH] 登陆页换了背景，加了风险排名
---
src/views/line_graph/DataRiskRank.vue | 309 +++++++++++++++++++++++++--------------------------
1 files changed, 153 insertions(+), 156 deletions(-)
diff --git a/src/views/line_graph/DataRiskRank.vue b/src/views/line_graph/DataRiskRank.vue
index 56824f2..aa882a4 100644
--- a/src/views/line_graph/DataRiskRank.vue
+++ b/src/views/line_graph/DataRiskRank.vue
@@ -1,15 +1,18 @@
<script>
-import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
-// import InputSearch from '../../sfc/InputSearch.vue';
-import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
-import {useCommonFunction} from '../../utils/common.js';
-import requetsApi from '@/api/exportExcel/requetsApi.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 ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+
export default {
components: {
- TimeSelectWithShortCuts,
- // InputSearch
- AreaAndmonitorType
+ TimeShortCuts,
+ AreaAndmonitorType,
+ ButtonExportExcel,
+ ButtonClick
},
data() {
return {
@@ -20,16 +23,13 @@
total: 0,
// 琛ㄦ牸鏁版嵁
tableData: [],
- isNoData: false,
+ isNoData: true,
loading: false,
- // begin: '2023-05-01', //寮�濮嬫椂闂�
- // end: '2023-05-15', //缁撴潫鏃堕棿
-
+ // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
+ queryButton:false,
+ // 瀵煎嚭鎸夐挳鍔犺浇涓�
+ exportButton:false,
form: {
- // 绔欑偣鍚嶇О
- name: '',
- // 璁惧缂栧彿
- number: '',
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
@@ -37,56 +37,54 @@
}
};
},
- setup(){
- // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const {cmpp,exportToExcel} = useCommonFunction()
- return {cmpp,exportToExcel}
+ setup() {
+ // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
+ const { cmpp, exportToExcel } = useCommonFunction();
+ return { cmpp, exportToExcel };
},
-
- // watch:{
- // pageSize(){
- // this.handleSizeChange()
- // },
- // currentPage(){
- // this.handleCurrentChange()
- // },
- // },
mounted() {
this.form.name = '';
},
methods: {
// 鍔熻兘锛氬鍑轰负Excel
- exportData(){
- let params ={
- 'beginTime':this.form.beginTime,
- 'endTime': this.form.endTime
- }
- requetsApi.fetchAllData(params).then(res => {
- const data = res.data.data
- console.log('闀垮害锛�',data.length);
+ exportData() {
+ let params = {
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ };
+ this.exportButton = true
+ requetsApi.fetchAllData(params).then((res) => {
+ const data = res.data.data;
- 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) {
@@ -96,12 +94,12 @@
// 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹�
if (columnIndex == 7) {
- if (!this.cmpp(row.dayOnline,'90%')) {
+ if (!this.cmpp(row.dayOnline, '90%')) {
return 'red-color';
}
}
if (columnIndex == 8) {
- if (!this.cmpp(row.dayValid,'90%')) {
+ if (!this.cmpp(row.dayValid, '90%')) {
return 'red-color';
}
}
@@ -116,7 +114,6 @@
// 椤靛彿鏀瑰彉鏃惰Е鍙�
handleCurrentChange(val) {
- console.log('褰撳墠椤典负锛�', val);
// 灏嗗綋鍓嶉〉鍙风粰currentPage
this.currentPage = val;
@@ -136,7 +133,6 @@
// 鐐瑰嚮缁熻鎸夐挳
fetchData() {
- console.log(this.form.name);
let params = {};
params['page'] = this.currentPage;
params['pageSize'] = this.pageSize;
@@ -150,12 +146,13 @@
params['endTime'] = this.form.endTime;
}
this.loading = true;
+ this.queryButton = true
this.$http
.get('/dust/analysistime', { params: params })
.then((response) => {
this.tableData = response.data.data.rows;
- console.log(this.tableData);
this.loading = false;
+ this.queryButton = false
if (response.data.data.total == 0) {
this.isNoData = true;
return;
@@ -163,7 +160,6 @@
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false;
this.total = response.data.data.total;
- this.loading = false;
});
}
}
@@ -174,109 +170,111 @@
<div class="search-container">
<el-container>
<el-main>
- <el-form :inline="true" :model="form" class="demo-form-inline">
+ <el-form :inline="true" :model="form">
<el-form-item>
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
- <!-- <el-form-item>
- <InputSearch @submit-value="(n) => (form.name = n)"></InputSearch>
- </el-form-item> -->
+
<el-form-item>
- <TimeSelectWithShortCuts
+ <TimeShortCuts
+ timeType="currentMonth"
@submit-time="giveTime"
- ></TimeSelectWithShortCuts>
+ ></TimeShortCuts>
</el-form-item>
+
<el-form-item>
- <el-button type="primary" @click="fetchData">缁熻鍒嗘瀽</el-button>
- <el-button type="warning" @click="exportData">瀵煎嚭</el-button>
+ <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-card>
- <el-empty v-show="isNoData" :image-size="200" />
- <!-- <LineChart :chartData="option"> </LineChart> -->
+ <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-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>
-
- <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-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-empty v-show="isNoData" :image-size="200" />
</el-main>
</el-container>
</div>
@@ -290,7 +288,6 @@
background-color: red;
}
.el-table {
- color: #000000;
+ color: #333333;
}
-
</style>
--
Gitblit v1.9.3