From cc890f987b770e5a73f5ef12d41b25f6bb448fcd Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 23 十一月 2023 16:37:45 +0800
Subject: [PATCH] 1.增加了风险模型跳转逻辑 2.修改了风险模型页面部分逻辑
---
src/views/risk_assessment/DataRiskRank.vue | 472 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 288 insertions(+), 184 deletions(-)
diff --git a/src/views/risk_assessment/DataRiskRank.vue b/src/views/risk_assessment/DataRiskRank.vue
index cfc8990..8292680 100644
--- a/src/views/risk_assessment/DataRiskRank.vue
+++ b/src/views/risk_assessment/DataRiskRank.vue
@@ -1,26 +1,22 @@
<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 ButtonExportExcel from '@/sfc/ButtonExportExcel.vue'
import ButtonClick from '@/sfc/ButtonClick.vue'
-
+import { ElMessage } from 'element-plus'
+import MonthSelect from '@/sfc/MonthSelect.vue'
+import riskApi from '@/api/risk/riskApi.js'
+import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
export default {
components: {
- TimeShortCuts,
AreaAndmonitorType,
ButtonExportExcel,
- ButtonClick
+ ButtonClick,
+ MonthSelect
},
data() {
return {
- // 褰撳墠椤�
- currentPage: 1,
- // 姣忛〉鏉℃暟
- pageSize: 20,
- total: 0,
// 琛ㄦ牸鏁版嵁
tableData: [],
isNoData: true,
@@ -30,238 +26,346 @@
// 瀵煎嚭鎸夐挳鍔犺浇涓�
exportButton: false,
form: {
+ // 绔欑偣鍚嶇О
+ name: '',
// 寮�濮嬫椂闂�
beginTime: '',
- // 缁撴潫鏃堕棿
- endTime: ''
+ // // 缁撴潫鏃堕棿
+ endTime: '',
+
+ // 閫夋嫨鐨勬湀浠�
+ month: ''
},
- tableHeight: '600'
+ bill: {
+ min: '',
+ max: '',
+ avg: '',
+ online: '',
+ valid: '',
+ exceeding: '',
+
+ // 鍏稿瀷寮傚父澶嶇幇鐜�
+ exceptionRecurrence: '',
+ // 寮傚父绫诲瀷鎹仛闆嗗害
+ exceptionTypeAggregation: ''
+ },
+
+ // 琛ㄦ牸鏁版嵁
+ table: [],
+ // 琛ㄦ牸楂樺害
+ tableHeight: 600,
+ currentRow: []
}
},
setup() {
// 寮曞叆 鐧惧垎鍙锋瘮杈冨ぇ灏� 瀵煎嚭鍔熻兘
- const { cmpp, exportToExcel } = useCommonFunction()
- return { cmpp, exportToExcel }
+ const { exportToExcel } = useCommonFunction()
+ return { exportToExcel }
},
-
+ computed: {
+ // 璁＄畻楂樹腑浣庣珯鐐规暟閲�
+ riskGradeNum() {
+ let riskGrade = {}
+ if (this.table) {
+ let highRisk = 0
+ let middleRisk = 0
+ let lowRisk = 0
+ this.table.forEach((item) => {
+ switch (item.riskGrade) {
+ case '楂橀闄�':
+ highRisk++
+ break
+ case '涓闄�':
+ middleRisk++
+ break
+ case '浣庨闄�':
+ lowRisk++
+ break
+ }
+ })
+ riskGrade.high = highRisk
+ riskGrade.middle = middleRisk
+ riskGrade.low = lowRisk
+ }
+ return riskGrade
+ },
+ // 楂樹腑浣庨闄╂瘮渚�
+ riskGradeRate() {
+ let rate = {
+ high:0,
+ middle:0,
+ low:0
+ }
+ if (this.table.length !=0 ) {
+ let num = this.table.length
+ let highGrade = ((this.riskGradeNum.high / num)*100).toFixed(2)
+ let middleGrade = ((this.riskGradeNum.middle / num)*100).toFixed(2)
+ let lowGrade = ((this.riskGradeNum.low / num)*100).toFixed(2)
+ rate.high = highGrade
+ rate.middle = middleGrade
+ rate.low = lowGrade
+ }
+ return rate
+ }
+ },
mounted() {
- this.fetchData()
+ //
+ this.fetch()
this.calTableHeight()
},
methods: {
- // 鍔熻兘锛氬鍑轰负Excel
- 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')
- this.exportButton = false
- })
+ /**
+ * 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
+ * @param锛�
+ * @returns锛�
+ */
+ giveMonth(val) {
+ //灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�(璇ョ粍浠惰繑鍥炵殑鏍囧噯鏃堕棿鐨勬牸寮忥紝鎵�浠ュ繀椤荤殑鍔犺繖涓嚱鏁�)
+ 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.dayAvg >= 0.8) {
+ if (row.riskValue >= 0.8) {
return 'warning-row'
}
}
-
- // 鍦ㄧ嚎鐜囷紝鏈夋晥鐜� 涓嶆弧瓒虫爣鍑嗘椂 鍙橀鑹�
- if (columnIndex == 7) {
- if (!this.cmpp(row.dayOnline, '90%')) {
- return 'red-color'
- }
- }
- if (columnIndex == 8) {
- 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.handleCurrentChange(1)
+ this.tableHeight = `calc(100vh - ${h1}px - 40px - 40px - var(--el-main-padding) * 2`
},
- // 椤靛彿鏀瑰彉鏃惰Е鍙�
- handleCurrentChange(val) {
- // 灏嗗綋鍓嶉〉鍙风粰currentPage
- this.currentPage = val
-
- // 椤甸潰鍙樺寲鏃惰皟鐢� 鏌ヨ鏁版嵁鍑芥暟
- this.fetchData()
- },
- //搴忓彿閫掑
- indexMethod(index) {
- 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')
- },
-
- // 鐐瑰嚮缁熻鎸夐挳
+ // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
fetchData() {
- let params = {}
- params['page'] = this.currentPage
- params['pageSize'] = this.pageSize
- params['siteName'] = ''
- 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) => {
- this.tableData = response.data.data.rows
- this.loading = false
- this.queryButton = false
- if (response.data.data.total == 0) {
+ riskApi.queryRiskValue('', this.form.month, 'month').then((response) => {
+ if (response.data.data.length == 0) {
this.isNoData = true
return
}
- // 绉婚櫎绌烘暟鎹姸鎬�
+
+ this.table = riskValue.backComprehensiveRiskTableData(response.data.data)
+ this.queryButton = false
this.isNoData = false
- this.total = response.data.data.total
+ this.loading = false
+ this.$nextTick(() => {
+ this.$refs.table.sort('riskValue', 'descending')
+ })
})
+ },
+
+ /**
+ * 鍒濆鍔犺浇鍑芥暟
+ */
+ fetch() {
+ // 鍒嗘瀽鏁版嵁
+ this.fetchData()
+ // 寮傚父鏁版嵁
+ // this.exceptiondataCount()
+ },
+
+ // 鍗曞厓鏍煎唴瀹规崲琛�
+ wrapIndex(index) {
+ return index.replace(/\n/g, '<br/>')
+ },
+
+ /**
+ * 瀵煎嚭涓篍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.exportButton = true
+ this.exportToExcel(this.table, tableColumns, excelColumns, '缁煎悎椋庨櫓鎺掑悕.xlsx')
+ this.exportButton = false
+ } else {
+ ElMessage('鏃犳暟鎹渶瑕佸鍑�')
+ }
+ },
+ openDetail(row) {
+ const encodedSiteName = encodeURIComponent(row.siteName)
+ const jumpPage = 1
+ this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.form.month}/1/${jumpPage}`)
}
}
}
</script>
<template>
- <el-form :inline="true" :model="form" ref="h1">
- <el-form-item>
- <AreaAndmonitorType></AreaAndmonitorType>
- </el-form-item>
+ <el-row ref="h1">
+ <el-col :span="24">
+ <el-form :inline="true" :model="form">
+ <el-form-item>
+ <AreaAndmonitorType></AreaAndmonitorType>
+ </el-form-item>
- <el-form-item>
- <TimeShortCuts timeType="currentMonth" @submit-time="giveTime"></TimeShortCuts>
- </el-form-item>
+ <el-form-item>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
+ </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>
+ <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-col>
+ <el-col :span="24" class="tag">
- <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-tag type="primary"> 鍙傝瘎绔欑偣鏁�</el-tag><span class="analysis-info">{{ table.length }}</span>
+ <el-tag type="danger"> 楂橀闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.high }} ({{ riskGradeRate.high }}%)</span>
+ <el-tag type="warning"> 涓闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.middle }} ({{ riskGradeRate.middle }}%)</span>
+ <el-tag type="success"> 浣庨闄╂暟</el-tag> <span class="analysis-info">{{ riskGradeNum.low }} ({{ riskGradeRate.low }}%)</span>
- <el-table-column prop="mnCode" label="璁惧缂栫爜" show-overflow-tooltip />
- <el-table-column prop="lst" label="鐩戞祴鏃ユ湡" sortable show-overflow-tooltip />
+ </el-col>
+ </el-row>
- <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
+ ref="table"
+ :data="table"
+ :height="tableHeight"
+ v-loading="loading"
+ element-loading-text="鍚庡彴鍒嗘瀽涓�..."
+ 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="搴忓彿"
+ fixed
+ align="center"
+ width="55"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="siteName" label="鐐逛綅鍚嶇О" align="center" show-overflow-tooltip>
+ <template #default="{ row }">
+ <el-button type="primary" text class="table-button" @click="openDetail(row)">{{
+ row.siteName
+ }}</el-button>
+ </template>
+ </el-table-column>
- <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" />
+ <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="riskGrade"
+ label="椋庨櫓绛夌骇"
+ align="center"
+ width="100"
+ show-overflow-tooltip
+ />
+ <el-table-column prop="riskAdvice" label="绠℃帶鎺柦" show-overflow-tooltip>
+ <template #default="scope">
+ <div v-html="wrapIndex(scope.row.riskAdvice)"></div>
+ </template>
+ </el-table-column>
+ <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-form {
- margin: 20px;
+.el-row,
+.el-table {
+ margin: 10px 0px 0px 10px;
}
-.el-card {
- margin: 20px 20px 0px 20px;
-}
-:deep().el-table__row .warning-row {
- background-color: #f7ba1e;
-}
-:deep().el-table__row .red-color {
+
+:deep(.el-table__row .warning-row) {
background-color: red;
+ /* color: rgb(241, 236, 236); */
+}
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+ border-radius: 0px;
}
.el-table {
color: #333333;
}
+.analysis-info {
+ margin-right: 20px;
+}
+.tag{
+ margin: 10px 5px 5px 1px;
+}
+.el-tag {
+ font-size: 14px;
+ vertical-align: baseline;
+}
</style>
--
Gitblit v1.9.3