From f4062e41dfbe26ca7664a963357cc0b9bea37b44 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期五, 01 十二月 2023 16:10:44 +0800
Subject: [PATCH] 风险模型页面的折线图写成组件
---
src/views/risk_assessment/DataIndexRank.vue | 192 ++++++++++++++++++++++++++----------------------
1 files changed, 104 insertions(+), 88 deletions(-)
diff --git a/src/views/risk_assessment/DataIndexRank.vue b/src/views/risk_assessment/DataIndexRank.vue
index 04e205d..54a3d0d 100644
--- a/src/views/risk_assessment/DataIndexRank.vue
+++ b/src/views/risk_assessment/DataIndexRank.vue
@@ -3,6 +3,7 @@
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import { useCommonFunction } from '../../utils/common.js'
import requetsApi from '@/api/exportExcel/requetsApi.js'
+import statisticApi from '@/api/statistic/statisticApi.js'
import dayjs from 'dayjs'
import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
@@ -35,13 +36,16 @@
// 缁撴潫鏃堕棿
endTime: ''
},
- tableHeight: '600'
+ tableHeight: '600',
+
+ orderProp: 'dayAvg',
+ order: 'descending'
}
},
setup() {
// 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const { cmpp, exportToExcel } = useCommonFunction()
- return { cmpp, exportToExcel }
+ const { cmpp, exportToExcel, percentFormatter } = useCommonFunction()
+ return { cmpp, exportToExcel, percentFormatter }
},
mounted() {
@@ -101,7 +105,6 @@
}
}
-
if (columnIndex == 8) {
if (row.dayValid < 0.9) {
return 'red-color'
@@ -112,9 +115,9 @@
// 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
calTableHeight() {
const h1 = this.$refs.h1.$el.offsetHeight
- const h2 = this.$refs.h2.$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`;
+ this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 40px - 120px - var(--el-main-padding) * 2`
},
// 椤靛ぇ灏忔敼鍙樻椂瑙﹀彂
handleSizeChange(val) {
@@ -144,21 +147,30 @@
},
// 鐐瑰嚮缁熻鎸夐挳
- fetchData() {
- let params = {}
- params['page'] = this.currentPage
- params['pageSize'] = this.pageSize
- params['siteName'] = ''
+ fetchData(p) {
+ if (p) {
+ this.orderProp = p.prop
+ this.order = p.order
+ }
+ let params = {
+ page: this.currentPage,
+ pageSize: this.pageSize,
+ siteName: '',
+ orderProp: this.orderProp,
+ //鎺掑簭 ascending 姝ｅ簭锛宒escending 闄嶅簭
+ asc: this.order == 'ascending'
+ }
if (this.form.beginTime) {
params['beginTime'] = this.form.beginTime
}
if (this.form.endTime) {
params['endTime'] = this.form.endTime
}
+
this.loading = true
this.queryButton = true
this.isNoData = false
- this.$http.get('/dust/analysistime', { params: params }).then((response) => {
+ statisticApi.fetchDayStatisticByOrder(params).then((response) => {
this.tableData = response.data.data.rows
this.loading = false
this.queryButton = false
@@ -182,83 +194,87 @@
</script>
<template>
- <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-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 width="300">
- <template #default="{ row }">
- <el-button type="primary" text @click="openDetail(row)">
- <span class="rank-site">{{row.name
- }}</span></el-button>
- </template>
- </el-table-column>
-
- <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-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-card v-show="!isNoData">
+ <el-table
+ :data="tableData"
+ :height="tableHeight"
+ style="width: 100%"
+ v-loading="loading"
+ :cell-class-name="tableCellClassName"
+ @sort-change="fetchData"
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ show-overflow-tooltip
/>
- </el-card>
- <el-empty v-show="isNoData" :image-size="200" />
+ <el-table-column prop="name" label="鐐逛綅鍚嶇О" show-overflow-tooltip width="300">
+ <template #default="{ row }">
+ <el-button type="primary" text @click="openDetail(row)">
+ <span class="rank-site">{{ row.name }}</span></el-button
+ >
+ </template>
+ </el-table-column>
+ <el-table-column prop="mnCode" label="璁惧缂栫爜" show-overflow-tooltip />
+ <el-table-column prop="lst" label="鐩戞祴鏃ユ湡" sortable="custom" show-overflow-tooltip />
+ <el-table-column prop="dayAvg" label="鏃ュ钩鍧囧��" sortable="custom" show-overflow-tooltip />
+ <el-table-column prop="min" label="鏃ユ渶灏忓��" sortable="custom" show-overflow-tooltip />
+ <el-table-column prop="max" label="鏃ユ渶澶у��" sortable="custom" show-overflow-tooltip />
+ <el-table-column prop="dayOnline" label="鏃ュ湪绾跨巼" sortable="custom" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ percentFormatter(row.dayOnline) }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="dayValid" label="鏃ユ湁鏁堢巼" sortable="custom" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ percentFormatter(row.dayValid) }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="dayExceeding" label="鏃ヨ秴鏍囩巼" sortable="custom" show-overflow-tooltip>
+ <template #default="{ row }">
+ {{ percentFormatter(row.dayExceeding) }}
+ </template>
+ </el-table-column>
+ </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>
--
Gitblit v1.9.3