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/SiteComprehensiveRskRanking.vue | 381 ++++++++++++++++++++++++++++++------------------------
1 files changed, 210 insertions(+), 171 deletions(-)
diff --git a/src/views/line_graph/SiteComprehensiveRskRanking.vue b/src/views/line_graph/SiteComprehensiveRskRanking.vue
index cf6130c..f9260a6 100644
--- a/src/views/line_graph/SiteComprehensiveRskRanking.vue
+++ b/src/views/line_graph/SiteComprehensiveRskRanking.vue
@@ -1,36 +1,41 @@
<script>
-import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
-import InputSearch from '@/sfc/InputSearch.vue';
-import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
-import exceptionApi from '@/api/exceptionApi.js';
-import {useCommonFunction} from '../../utils/common.js';
+import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
+import exceptionApi from '@/api/exceptionApi.js'
+import { useCommonFunction } from '../../utils/common.js'
import index from '@/utils/risk_estimate_common_function/index.js'
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
+import ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
+import ButtonClick from '@/sfc/ButtonClick.vue'
+import { ElMessage } from 'element-plus'
+import MonthSelect from '@/sfc/MonthSelect.vue';
export default {
components: {
- TimeSelectWithShortCuts,
AreaAndmonitorType,
- InputSearch
+ ButtonExportExcel,
+ ButtonClick,
+ MonthSelect
},
+
data() {
return {
- // 褰撳墠椤�
- currentPage: 1,
- // 姣忛〉鏉℃暟
- pageSize: 20,
- total: 0,
// 琛ㄦ牸鏁版嵁
tableData: [],
- isNoData: false,
+ isNoData: true,
loading: false,
-
+ // 缁熻鍒嗘瀽鎸夐挳鍔犺浇涓�
+ queryButton: false,
+ // 瀵煎嚭鎸夐挳鍔犺浇涓�
+ exportButton: false,
form: {
// 绔欑偣鍚嶇О
name: '',
// 寮�濮嬫椂闂�
beginTime: '',
- // 缁撴潫鏃堕棿
- endTime: ''
+ // // 缁撴潫鏃堕棿
+ endTime: '',
+
+ // 閫夋嫨鐨勬湀浠�
+ month:''
},
bill: {
min: '',
@@ -43,228 +48,262 @@
// 鍏稿瀷寮傚父澶嶇幇鐜�
exceptionRecurrence: '',
// 寮傚父绫诲瀷鎹仛闆嗗害
- exceptionTypeAggregation: '',
+ exceptionTypeAggregation: ''
},
- // {
- // siteName:'',
- // region:'',
- // monitorType:'',
- // riskValue:'',
- // riskGrage:'',
- // riskAdvice:'',
- // beginTime:'',
- // endTime:'',
- // }
- table:[]
- };
- },
- setup(){
- // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const {exportToExcel} = useCommonFunction()
- return {exportToExcel}
- },
- computed: {
- weight() {
- return (
- (100 - this.bill.online) * 0.1 +
- (100 - this.bill.valid) * 0.2 +
- this.bill.exceeding * 0.2 +
- this.bill.exceptionTypeAggregation * 0.2 +
- this.bill.exceptionRecurrence * 0.3
- ).toFixed(2);
+ // 琛ㄦ牸鏁版嵁
+ table: [],
+ // 琛ㄦ牸楂樺害
+ tableHeight: 600
}
},
- watch:{
- weight(){
- this.table[0].riskValue = this.weight
- }
+ setup() {
+ // 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
+ const { exportToExcel } = useCommonFunction()
+ return { exportToExcel }
+ },
+ mounted(){
+ //
+ this.fetch()
+ this.calTableHeight()
},
methods: {
+
/**
* 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
* @param锛�
* @returns锛�
*/
- giveTime(val) {
+ giveMonth(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.month = dayjs(val).format('YYYY-MM-DD');
+ // 鍚屾椂鏇存柊寮�濮嬪拰缁撴潫鏃堕棿
+ this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
+ this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+ console.log(this.form.beginTime,this.form.endTime);
+
+ },
+
+ // 鍔熻兘锛氭敼鍙樿〃鏍兼煇涓崟鍏冩牸鐨勯鑹�
+ tableCellClassName({ row, columnIndex }) {
+ // 骞冲潎鍊间笉婊¤冻鏍囧噯鏃�
+ if (columnIndex == 4) {
+ if (row.riskValue >= 0.8) {
+ return 'warning-row';
+ }
+ }
+
+
+ },
+ // 鍔熻兘锛氳〃鏍奸珮搴︽牴鎹唴瀹硅嚜閫傚簲
+ calTableHeight() {
+ const h1 = this.$refs.h1.$el.offsetHeight
+ // 鍏朵腑涓�涓�40鏄洅瀛愮殑鎬诲杈硅窛
+ this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2`
},
// 鐐瑰嚮灞曠ず鎸夐挳
fetchData() {
-
- let params = {};
- if (this.form.name) {
- params['siteName'] = this.form.name;
- }
- if (this.form.beginTime) {
- params['beginTime'] = this.form.beginTime;
- }
- if (this.form.endTime) {
- params['endTime'] = this.form.endTime;
- }
- this.loading = true;
+ this.loading = true
+ this.queryButton = true
exceptionApi
- .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
+ .analysisdataByType(this.form.month, 'month')
.then((response) => {
- this.chartData = response.data.data;
- this.loading = false;
+ this.chartData = response.data.data
+ this.queryButton = false
+ this.isNoData = false
+
if (response.data.data.length == 0) {
- this.isNoData = true;
- return;
+ this.isNoData = true
+ return
}
- // 绉婚櫎绌烘暟鎹姸鎬�
- this.isNoData = false;
- let temp = index.calBillData(this.chartData,this.form.beginTime,this.form.endTime);
- this.bill.min = temp['min'];
- this.bill.max = temp['max'];
- this.bill.avg = temp['avg'];
- this.bill.online = temp['online'];
- this.bill.valid = temp['valid'];
- this.bill.exceeding = temp['exceeding'];
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ this.isNoData = false
+
+ this.table = index.merge(
+ this.chartData,
+ res.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ this.loading = false
- this.begin = this.chartData[0].lst;
- this.end = this.chartData[this.chartData.length - 1].lst;
- const tempObj = {}
- tempObj.region = '閲戝北鍖�'
- tempObj.monitorType = '鎵皹'
- tempObj.siteName = this.form.name
- tempObj.beginTime = this.form.beginTime
- tempObj.endTime = this.form.endTime
+ this.$nextTick(()=>{
+ this.$refs.table.sort('riskValue','descending')
+ })
- // this.table[0].region = '閲戝北鍖�'
- // this.table[0].monitorType = '鎵皹'
- // this.table[0].siteName = this.form.name
- // this.table[0].beginTime = this.form.beginTime
- // this.table[0].endTime = this.form.endTime
-
- if(this.weight>=0.6){
- tempObj.riskGrage = '楂橀闄�'
- tempObj.riskAdvice = '寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮'
- // this.table[0].riskGrage = '楂橀闄�'
- // this.table[0].riskAdvice = '寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮'
- }else if(this.weight<0.6 && this.weight>=0.2){
- tempObj.riskGrage = '涓闄�'
- tempObj.riskAdvice = '寤鸿寮�灞曞父鎬佽拷韪垎鏋�'
- // this.table[0].riskGrage = '涓闄�'
- // this.table[0].riskAdvice = '寤鸿寮�灞曞父鎬佽拷韪垎鏋�'
- }else {
- tempObj.riskGrage = '浣庨闄�'
- tempObj.riskAdvice = '寤鸿寮曞浼佷笟闀挎�佷繚鎸�'
- // this.table[0].riskGrage = '浣庨闄�'
- // this.table[0].riskAdvice = '寤鸿寮曞浼佷笟闀挎�佷繚鎸�'
- }
- this.table.push(tempObj)
- });
+ })
+
+ })
},
// 浼佷笟寮傚父璇︽儏
exceptiondataCount() {
exceptionApi
.exceptiondata1({
- siteName: this.form.name,
+ // siteName: this.form.name,
+ siteName: '',
beginTime: this.form.beginTime,
endTime: this.form.endTime
})
.then((res) => {
- let obj = index.calRecur(res.data.data);
- this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
- this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
- });
+ let obj = index.calRecur(res.data.data)
+ this.bill.exceptionRecurrence = obj['exceptionRecurrence']
+ this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
+ })
},
/**
* 鍒濆鍔犺浇鍑芥暟
*/
- fetch() {
+ fetch() {
// 鍒嗘瀽鏁版嵁
- this.fetchData();
+ this.fetchData()
// 寮傚父鏁版嵁
- this.exceptiondataCount();
+ // this.exceptiondataCount()
},
/**
* 瀵煎嚭涓篍xcel
*/
- exportData(){
- if(this.table.length!=0){
- const tableColumns = ['siteName','region','monitorType','riskValue','riskGrage','riskAdvice','beginTime','endTime']
- const excelColumns = [['A1','绔欑偣鍚嶇О'],
- ['B1','鍖哄煙'],['C1','鐩戞祴绫诲瀷'],['D1','椋庨櫓鍊�'],
- ['E1','椋庨櫓绛夌骇'],['F1','绠℃帶鎺柦'],['G1','寮�濮嬫棩鏈�'],
- ['H1','缁撴潫鏃ユ湡']]
-
- this.exportToExcel(this.table,tableColumns,excelColumns,'缁煎悎椋庨櫓鎺掑悕.xlsx')
- }
-
- },
-
+ exportData() {
+ if (this.table.length != 0) {
+ const tableColumns = [
+ 'siteName',
+ 'region',
+ 'monitorType',
+ 'riskValue',
+ 'riskGrage',
+ 'riskAdvice',
+ 'beginTime',
+ 'endTime'
+ ]
+ const excelColumns = [
+ ['A1', '绔欑偣鍚嶇О'],
+ ['B1', '鍖哄煙'],
+ ['C1', '鐩戞祴绫诲瀷'],
+ ['D1', '椋庨櫓鍊�'],
+ ['E1', '椋庨櫓绛夌骇'],
+ ['F1', '绠℃帶鎺柦'],
+ ['G1', '寮�濮嬫棩鏈�'],
+ ['H1', '缁撴潫鏃ユ湡']
+ ]
+ this.exportButton = true
+ this.exportToExcel(this.table, tableColumns, excelColumns, '缁煎悎椋庨櫓鎺掑悕.xlsx')
+ this.exportButton = false
+ } else {
+ ElMessage('鏃犳暟鎹渶瑕佸鍑�')
+ }
+ }
}
-};
+}
</script>
<template>
- <el-row>
+ <el-row ref="h1">
<el-row>
<el-form :inline="true" :model="form">
<el-form-item>
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
+
+ <!-- <el-form-item>
+ <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)"></InputSearch>
+ </el-form-item> -->
+
<el-form-item>
- <InputSearch
- isNeedDefaultSite="1"
- @submit-value="(n) => (form.name = n)"
- ></InputSearch>
- </el-form-item>
- <el-form-item>
- <TimeSelectWithShortCuts
- @submit-time="giveTime"
- ></TimeSelectWithShortCuts>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
</el-form-item>
+
<el-form-item>
- <el-button type="primary" @click="fetch">椋庨櫓鎺掑悕</el-button>
- <el-button type="warning" @click="exportData">瀵煎嚭</el-button>
+ <ButtonClick
+ style="margin-right: 12px"
+ content="椋庨櫓鎺掑悕"
+ type="primary"
+ :loading="queryButton"
+ @do-search="fetch"
+ ></ButtonClick>
+ <ButtonExportExcel
+ content="瀵煎嚭鏁版嵁"
+ type="success"
+ :loading="exportButton"
+ @do-export="exportData"
+ ></ButtonExportExcel>
</el-form-item>
</el-form>
</el-row>
</el-row>
<el-table
- :data="table"
- 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="siteName" label="绔欑偣鍚嶇О" show-overflow-tooltip />
- <el-table-column prop="region" label="鍖哄煙" show-overflow-tooltip />
- <el-table-column prop="monitorType" label="妫�娴嬬被鍨�" show-overflow-tooltip />
- <el-table-column prop="riskValue" label="椋庨櫓鍊�" show-overflow-tooltip />
- <el-table-column prop="riskGrage" label="椋庨櫓绛夌骇" show-overflow-tooltip />
- <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" show-overflow-tooltip />
- <el-table-column prop="beginTime" label="寮�濮嬫棩鏈�" show-overflow-tooltip />
- <el-table-column prop="endTime" label="缁撴潫鏃ユ湡" show-overflow-tooltip />
+ ref="table"
+ :data="table"
+ :height="tableHeight"
+ v-loading="loading"
+ style="width: 98%"
+ :cell-class-name="tableCellClassName"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ v-show="!isNoData"
+ border
+ >
+ <el-table-column
+ type="index"
+ prop="name"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ align="center"
+ width="55"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="绔欑偣鍚嶇О" align="center" show-overflow-tooltip />
+ <el-table-column prop="region" label="鍖哄煙" align="center" width="80" show-overflow-tooltip />
+ <el-table-column prop="monitorType" label="妫�娴嬬被鍨�" align="center" width="80" show-overflow-tooltip />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ align="center"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="riskGrage" label="椋庨櫓绛夌骇" align="center" width="100" show-overflow-tooltip />
+ <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" align="center" show-overflow-tooltip />
+ <el-table-column
+ prop="beginTime"
+ label="寮�濮嬫棩鏈�"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="endTime"
+ label="缁撴潫鏃ユ湡"
+ sortable
+ align="center"
+ width="160"
+ show-overflow-tooltip
+ />
</el-table>
<el-empty v-show="isNoData" :image-size="200" />
-
</template>
<style scoped>
-.el-row,.el-table {
- margin: 10px 0px 0px 10px
+.el-row,
+.el-table {
+ margin: 10px 0px 0px 10px;
}
-.el-table{
-
+
+:deep(.el-table__row .warning-row){
+ background-color: red;
+ /* color: rgb(241, 236, 236); */
}
+
</style>
--
Gitblit v1.9.3