From 73b40d54554307ced5aab5b89dff6e1980e8a242 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 26 十月 2023 16:48:01 +0800
Subject: [PATCH] 分险排名页面增加站点清单 辅助审核增加了选择日期以及查看详情页面的样式调整
---
src/views/line_graph/DataRiskModel.vue | 191 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 166 insertions(+), 25 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/line_graph/DataRiskModel.vue
index 7a343d3..91100fb 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/line_graph/DataRiskModel.vue
@@ -1,6 +1,7 @@
<!-- 鏃ュ潎鍊� -->
+
<script>
-import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
+// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
@@ -12,14 +13,16 @@
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import rank from '@/utils/risk_estimate_common_function/rank.js'
+import MonthSelect from '@/sfc/MonthSelect.vue';
export default {
components: {
LineChart,
- DateSelectWithShortCuts,
+ // DateSelectWithShortCuts,
InputSearch,
AreaAndmonitorType,
DustRadarChart,
- ButtonClick
+ ButtonClick,
+ MonthSelect
},
data() {
return {
@@ -40,6 +43,8 @@
name: '',
// 璁惧缂栧彿
number: '',
+
+ month:'',
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
@@ -65,19 +70,19 @@
isHasData: false
},
// 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
- queryButton: false
+ queryButton: false,
+
+ // 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
+ top_10_sites_with_risk_values:[
+ {name:'閲戝北鍖洪噾灞辨柊鍩嶫SC1-0401鍗曞厓1-11-01鍦板潡椤圭洰09',
+ riskValue:0.2
+ }
+ ]
}
},
+
watch:{
- // form:{
- // name(){
- // if(this.form.name!=''){
- // this.fetch()
- // this.screenLoading = false
- // }
- // },
- // deep: true
- // }
+
},
computed: {
weight() {
@@ -102,8 +107,17 @@
// this.getRiskWeightName()
this.fetch()
+ // 璁＄畻椋庨櫓鎺掑悕娓呭崟
+ this.getRiskRank()
},
methods: {
+
+ // 鏌ヨ绔欑偣缁熻淇℃伅
+ querySiteStaticsInfo(row){
+ this.form.name = row.siteName
+ this.riskDetails()
+ },
+
async getRiskWeightName() {
this.screenLoading = true
this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);
@@ -112,6 +126,17 @@
this.fetch()
this.screenLoading = false
},
+
+ 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);
+
+ },
+
/**
* 灏嗕腑鍥芥爣鍑嗘椂闂磋浆涓烘寚瀹氭牸寮�
* @param锛�
@@ -128,6 +153,17 @@
* @returns锛�
*/
fetch() {
+ // 璁＄畻椋庨櫓鎺掑悕娓呭崟,鑾峰彇椋庨櫓鏈�楂樼殑绔欑偣鍚嶅瓧
+ this.getRiskRank()
+
+ // 鍒嗘瀽鏁版嵁
+ this.fetchData()
+ // 寮傚父鏁版嵁
+ this.exceptiondataCount()
+
+
+ },
+ riskDetails() {
// 鍒嗘瀽鏁版嵁
this.fetchData()
// 寮傚父鏁版嵁
@@ -149,7 +185,7 @@
this.loading = true
this.queryButton = true
exceptionApi
- .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
+ .analysisdata(this.form.name, this.form.beginTime, this.form.endTime,'day')
.then((response) => {
this.chartData = response.data.data
this.loading = false
@@ -228,7 +264,53 @@
this.bill.exceptionRecurrence = obj['exceptionRecurrence']
this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
})
- }
+ },
+
+ // 鐐瑰嚮椋庨櫓鎺掑悕鎸夐挳
+ getRiskRank() {
+ exceptionApi
+ .analysisdataByType(this.form.month, 'month')
+ .then((response) => {
+ let staticsData = response.data.data
+
+ exceptionApi
+ .exceptiondata1({
+ siteName: this.form.name,
+ beginTime: this.form.beginTime,
+ endTime: this.form.endTime
+ })
+ .then((res) => {
+ const riskValueSite = index.merge(
+ staticsData,
+ res.data.data,
+ this.form.beginTime,
+ this.form.endTime
+ )
+ // 鑾峰彇鎺掑悕鍓�10鐨勯闄╁�肩珯鐐�
+
+ this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
+ this.form.name = this.top_10_sites_with_risk_values[0].siteName
+
+ this.$nextTick(()=>{
+ this.$refs.table.sort('riskValue','descending')
+ console.log('琛ㄦ牸鏁版嵁涓猴細',this.top_10_sites_with_risk_values);
+ })
+
+ })
+
+ })
+ },
+/**
+ * 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
+ * @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
+ */
+getTopriskData(arr,num) {
+ // 鎸夌収riskValue闄嶅簭鎺掑垪
+ arr.sort((a, b) => b.riskValue - a.riskValue);
+ // 鑾峰彇鍓峮um涓厓绱�
+ return arr.slice(0,num);
+ }
+
}
}
</script>
@@ -236,16 +318,20 @@
<template>
<el-form :inline="true" :model="form">
- <el-form-item>
+ <el-form-item class="form-item">
<AreaAndmonitorType></AreaAndmonitorType>
</el-form-item>
- <el-form-item>
+ <el-form-item class="form-item">
<!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
+ <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
</el-form-item>
- <el-form-item>
+ <!-- <el-form-item>
<DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
+ </el-form-item> -->
+
+ <el-form-item>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
</el-form-item>
@@ -262,7 +348,47 @@
<div class="chart-container" v-show="!isNoData && !screenLoading " >
<div class="time-text">鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</div>
- <el-row :gutter="20">
+ <el-row :gutter="10">
+ <el-col :span="5">
+ <div class="table-class">
+ <el-table
+ ref="table"
+ highlight-current-row="true"
+ :data="top_10_sites_with_risk_values"
+ :default-sort="{ prop: 'riskValue', order: 'descending' }"
+ height="540">
+ <el-table-column
+ type="index"
+ label="搴忓彿"
+ :index="indexMethod"
+ fixed
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="siteName"
+ label="绔欑偣鍚嶇О"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ prop="riskValue"
+ label="椋庨櫓鍊�"
+ sortable
+ width="70"
+ show-overflow-tooltip
+ />
+ <el-table-column label="鎿嶄綔" align="center">
+ <template #default="{ row }">
+ <el-button type="primary" text class="table-button" @click="querySiteStaticsInfo(row)"
+ >椋庨櫓璇︽儏</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ </el-col>
+
+
<el-col :span="12">
<el-card shadow="never">
<DustRadarChart
@@ -284,7 +410,7 @@
</el-card>
</el-col>
- <el-col :span="6">
+ <el-col :span="3">
<el-card shadow="never" class="card-height">
<template #header>
<h1
@@ -294,7 +420,7 @@
'weightColor-heigh': weight >= 0.6
}"
>
- 椋庨櫓鍊硷細{{ weight }}
+ 椋庨櫓鍊�(0~1)锛歿{ weight }}
</h1>
</template>
<div class="risk-grade">
@@ -327,7 +453,7 @@
</el-card>
</el-col>
- <el-col :span="6">
+ <el-col :span="4">
<el-card shadow="never" class="card-height">
<template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
@@ -348,6 +474,8 @@
</el-col>
</el-row>
+
+
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="never" class="card-value">
@@ -363,8 +491,10 @@
</el-card>
</el-col>
- </el-row>
+
+
+ </el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="never" class="card-value">
@@ -389,6 +519,9 @@
.el-form {
margin: 10px;
}
+.form-item {
+ margin-top:10px;
+}
.chart-container {
margin-left: 10px;
}
@@ -400,7 +533,7 @@
border-radius: 9px;
}
.chart-container {
- width: 95%;
+ width: 98%;
/* height: 600px; */
}
.card-value {
@@ -474,4 +607,12 @@
width: 500px;
height: 600px;
} */
+.table-class {
+ border: 1px solid blue;
+ margin: 20px 0px 20px 0px;
+}
+.table-button {
+ letter-spacing: 1px;
+ text-decoration: underline;
+}
</style>
--
Gitblit v1.9.3