From 73cb3ec2b1660610e3621d7614ad308f2c19331d Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 16 十一月 2023 17:19:38 +0800
Subject: [PATCH] 1.修改了综合风险模型表格数据的获取 2.修改了时间选择器
---
src/views/risk_assessment/DataRiskModel.vue | 261 ++++++++++++++++++++++++++--------------------------
1 files changed, 130 insertions(+), 131 deletions(-)
diff --git a/src/views/line_graph/DataRiskModel.vue b/src/views/risk_assessment/DataRiskModel.vue
similarity index 72%
copy from src/views/line_graph/DataRiskModel.vue
copy to src/views/risk_assessment/DataRiskModel.vue
index 2da5caf..e91ba3e 100644
--- a/src/views/line_graph/DataRiskModel.vue
+++ b/src/views/risk_assessment/DataRiskModel.vue
@@ -10,6 +10,9 @@
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import MonthSelect from '@/sfc/MonthSelect.vue'
+import riskApi from '@/api/risk/riskApi.js'
+import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
+import lineChart from '@/utils/chartFunction/lineChart.js'
export default {
components: {
LineChart,
@@ -37,15 +40,14 @@
// 绔欑偣鍚嶇О
name: '',
// 璁惧缂栧彿
- number: '',
+ number: '3234',
// 寮�濮嬫椂闂�
beginTime: '',
// 缁撴潫鏃堕棿
endTime: ''
},
month: '',
- // 浼犻�掔粰鏈堜唤缁勪欢鐨勫��
- sfc_month: '',
+
// 鎶樼嚎鍥鹃厤缃」
option: {},
// 鏁版嵁娓呭崟
@@ -62,40 +64,27 @@
// 寮傚父绫诲瀷鎹仛闆嗗害
exceptionTypeAggregation: 0
},
- status: {
- isHasData: false
- },
+
// 鏌ヨ鎸夐挳鍔犺浇鏁堟灉
queryButton: false,
// 椋庨櫓鍊兼帓鍚嶅墠鍗佺殑绔欑偣
top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
// 椋庨櫓鍊�
- weight: ''
+ weight: '',
+ // 鏃犳暟鎹厤缃椂闂存
+ areaColor: []
}
},
-
- watch: {
- sName() {
- // 褰撳埆鐨勯〉闈㈣皟鐢ㄦ椂
- if (this.sName != '' || this.month_1 != '') {
- // 鏇存柊绔欑偣鍚嶅瓧鍜屾椂闂�
- this.form.name = this.sName
- this.month = this.month_1
- this.parentDataFlag = true
- // 鏇存柊鎺掓竻鍗�
- this.getRiskRank()
- // 鏇存柊缁熻鏁版嵁
- this.getAnalysisData()
- // 璁＄畻椋庨櫓鍊�
- this.calRiskValue()
- }
- }
- },
-
mounted() {
// // 鍔犺浇椋庨櫓鍊兼渶楂樼殑绔欑偣鏁版嵁
this.ShowDefaultData()
+ },
+ computed: {
+ // 椋庨櫓绛夌骇
+ riskGradeAndAdvice() {
+ return riskApi.getRiskAdvice(this.weight)
+ }
},
methods: {
@@ -153,8 +142,11 @@
async updateOriginPage() {
this.screenLoading = true
// 鏇存柊鎺掑悕娓呭崟锛屽苟寰楀埌椋庨櫓鍊兼渶楂樼珯鐐�
- this.form.name = await this.getRiskRank()
+ let arr = await this.getRiskRank()
+ this.form.name = arr[0]
+ this.form.number = arr[1]
this.screenLoading = false
+
// 鏇存柊鏃ョ粺璁℃暟鎹�
this.getAnalysisData()
// 璁＄畻椋庨櫓鍊�
@@ -163,29 +155,8 @@
// 璁＄畻椋庨櫓鍊�
calRiskValue() {
- exceptionApi.analysisdataByType(this.month, 'month').then((response) => {
- const chartData = response.data.data
-
- if (response.data.data.length == 0) {
- return
- }
- // 浠庡璞℃暟缁勬壘鍒拌绔欑偣鎵�鍦ㄧ殑鍏冪礌
- let siteItem = this.findObjectByPropertyValue(chartData, 'name', this.form.name)
- if (Object.keys(siteItem).length === 0) {
- return
- }
- let arr = []
- arr.push(siteItem)
- exceptionApi
- .exceptiondata1({
- siteName: this.form.name,
- beginTime: this.form.beginTime,
- endTime: this.form.endTime
- })
- .then((res) => {
- let table = index.merge(arr, res.data.data, this.form.beginTime, this.form.endTime)
- this.weight = table[0].riskValue
- })
+ riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
+ this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
})
},
@@ -213,14 +184,22 @@
this.isNoData = true
return
}
- this.begin = this.chartData[0].lst
- this.end = this.chartData[this.chartData.length - 1].lst
+ // 鍒嗘瀽鏁版嵁涓殑鏈�鏃╂椂闂�
+ let begin = this.chartData[0].lst
+ // 鍒嗘瀽鏁版嵁涓殑鏈�鏅氭椂闂�
+ let end = this.chartData[this.chartData.length - 1].lst
// 绉婚櫎绌烘暟鎹姸鎬�
this.isNoData = false
+
+ // 鏃犳暟鎹殑鏃堕棿娈�
+ let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
+ // 鏃犳暟鎹厤缃椂闂存
+ this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
+ console.log('鍖哄煙', this.areaColor)
this.setChart()
// 鎶樼嚎鍥炬暟鎹�
- let temp = index.calBillData(this.chartData, this.begin, this.end)
+ let temp = index.calBillData(this.chartData, begin, end)
this.bill.min = temp['min']
this.bill.max = temp['max']
@@ -248,69 +227,53 @@
// 閫夋嫨鍏朵粬鍊肩被鍨嬫椂
setChart() {
if (this.chartData.length) {
- // x杞存棩鏈熸椂闂�
- let dateList = []
- //棰楃矑鐗╁钩鍧囨祿搴�
- let dayAvg = []
- let dataOnline = []
- let dataValid = []
- let dataExceed = []
- this.chartData.forEach((item) => {
- //x杞存棩鏈�
- dateList.push(item.lst)
- // 鍘嗗彶娌圭儫娴撳害
- dayAvg.push(item.dayAvg)
- dataOnline.push(item.dayOnline.slice(0, -1))
- dataValid.push(item.dayValid.slice(0, -1))
- dataExceed.push(item.dayExceeding.slice(0, -1))
- })
+ // 鏋勫缓鎶樼嚎鍥緓,y鏁版嵁
+ let obj = lineChart.getLineChartXYData(
+ this.chartData,
+ this.form.beginTime,
+ this.form.endTime
+ )
this.chartData1 = {
- x: dateList,
- y: dayAvg
+ x: obj.xData,
+ y: obj.yAvg
}
this.chartData2 = {
- x: dateList,
- y: dataOnline
+ x: obj.xData,
+ y: obj.yOnline
}
this.chartData3 = {
- x: dateList,
- y: dataValid
+ x: obj.xData,
+ y: obj.yValid
}
this.chartData4 = {
- x: dateList,
- y: dataExceed
+ x: obj.xData,
+ y: obj.yExceed
}
}
},
// 寰楀埌鍓�10椋庨櫓鎺掑悕娓呭崟
async getRiskRank() {
- let staticsData = await exceptionApi.analysisdataByType(this.month, 'month')
+ let response = await riskApi.queryRiskValue('', this.month, 'month')
- let exceptionData = await exceptionApi.exceptiondata1({
- siteName: '',
- beginTime: this.form.beginTime,
- endTime: this.form.endTime
- })
+ let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)
- const riskValueSites = index.merge(
- staticsData.data.data,
- exceptionData.data.data,
- this.form.beginTime,
- this.form.endTime
- )
- this.top_10_sites_with_risk_values = this.getTopRiskData(riskValueSites, 10)
+ this.top_10_sites_with_risk_values = this.getTopRiskData(tableData, 10)
if (this.top_10_sites_with_risk_values.length != 0) {
// 琛ㄦ牸鎸夐闄╁�煎�掑彊鎺掑垪
this.$nextTick(() => {
this.$refs.table.sort('riskValue', 'descending')
})
- // Promise
- return this.top_10_sites_with_risk_values[0].siteName
+ // 淇濆瓨椋庨櫓鍊兼渶楂樼殑绔欑偣鍚嶇О鍜岃澶囩紪鍙�
+ let temp = []
+ temp.push(
+ this.top_10_sites_with_risk_values[0].siteName,
+ this.top_10_sites_with_risk_values[0].mnCode
+ )
+ return temp
}
},
-
/**
* 闄嶅簭鎺掑垪锛岃繑鍥為檷搴忓墠num鐨勫厓绱�
* @param锛� 瀵硅薄鏁扮粍锛岃繑鍥炵殑鏁伴噺
@@ -335,11 +298,12 @@
:site-name="form.name"
isNeedDefaultSite="0"
@submit-value="(n) => (form.name = n)"
+ @submit-mncode="(n) => (form.number = n)"
></InputSearch>
</el-form-item>
<el-form-item>
- <MonthSelect :month="this.month_1" @submit-value="giveMonth"></MonthSelect>
+ <MonthSelect @submit-value="giveMonth"></MonthSelect>
</el-form-item>
<el-form-item>
@@ -355,7 +319,7 @@
<div v-loading="screenLoading" class="wait-name">
<div class="chart-container" v-show="!isNoData && !screenLoading">
<div class="time-text">
- <span>鏁版嵁缁熻鏃舵锛歿{ begin }} ~ {{ end }}</span>
+ <span>鏁版嵁缁熻鏃舵锛歿{ form.beginTime }} ~ {{ form.endTime }}</span>
<span class="site-name">{{ form.name }}</span>
</div>
@@ -364,15 +328,16 @@
<el-card shadow="never" class="table-class">
<el-table
ref="table"
- highlight-current-row="true"
+ :highlight-current-row="true"
:data="top_10_sites_with_risk_values"
:default-sort="{ prop: 'riskValue', order: 'descending' }"
height="540"
>
+ <!-- :index="indexMethod" -->
+
<el-table-column
type="index"
label="搴忓彿"
- :index="indexMethod"
fixed
width="52"
show-overflow-tooltip
@@ -401,22 +366,11 @@
show-overflow-tooltip
align="center"
/>
- <!-- <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>
</el-card>
</el-col>
- <el-col :span="12">
+ <el-col :span="11">
<el-card shadow="never" class="table-class">
<DustRadarChart
:name="[
@@ -437,8 +391,8 @@
</el-card>
</el-col>
- <el-col :span="3">
- <el-card shadow="never" class="card-height">
+ <el-col :span="4">
+ <el-card shadow="never" class="card-height risk-card">
<template #header>
<h1
:class="{
@@ -450,19 +404,20 @@
椋庨櫓鍊�(0~1)锛歿{ weight }}
</h1>
</template>
+ <div class="risk-text-container">
+
<div class="risk-grade">
- <strong>椋庨櫓绛夌骇锛�</strong>
- <span v-if="weight >= 0.6"> 楂橀闄�</span>
- <span v-else-if="weight >= 0.2 && weight < 0.6"> 涓闄�</span>
- <span v-else> 浣庨闄�</span>
+ <h1 class="sub-title">椋庨櫓绛夌骇锛�</h1>
+ <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
</div>
<div class="risk-advice">
- <strong>绠℃帶寤鸿锛�</strong>
- <span v-if="weight >= 0.6"> 寤鸿瀵硅绔欑偣杩涜绾夸笅鎵ф硶妫�鏌ワ紝涓撻」鏁版嵁瀵规瘮</span>
- <span v-else-if="weight >= 0.2 && weight < 0.6"> 寤鸿寮�灞曞父鎬佽拷韪垎鏋�</span>
- <span v-else> 寤鸿寮曞浼佷笟闀挎�佷繚鎸�</span>
+ <h1 class="sub-title">绠℃帶寤鸿锛�</h1>
+ <div v-for="item in riskGradeAndAdvice.riskAdvice" :key="item" class="risk-advice-text">
+ {{ item }}
+ </div>
</div>
+
<div class="grade-instance">
<div class="container">
<div class="block-color heigh"></div>
@@ -477,12 +432,16 @@
<div>浣庨闄�(锛�0.2)</div>
</div>
</div>
+
+ </div>
</el-card>
</el-col>
<el-col :span="4">
<el-card shadow="never" class="card-height">
- <template #header><span class="title-16">椋庨櫓璇︽儏</span></template>
+ <template #header>
+ <span class="title-16">椋庨櫓璇︽儏</span>
+ </template>
<el-form>
<el-form-item label="鏈�澶у�硷細"> {{ bill.max }} mg/m鲁 </el-form-item>
@@ -504,14 +463,26 @@
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="never" class="card-value">
- <LineChart title="鏃ュ潎鍊�" :chartData="chartData1" yName="mg/m鲁" seriesName="鏃ュ潎鍊�">
+ <LineChart
+ title="鏃ュ潎鍊�"
+ :chartData="chartData1"
+ yName="mg/m鲁"
+ seriesName="鏃ュ潎鍊�"
+ :areaColor="areaColor"
+ >
</LineChart>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never" class="card-value">
- <LineChart title="鏃ュ湪绾跨巼" :chartData="chartData2" yName="%" seriesName="鏃ュ湪绾跨巼">
+ <LineChart
+ title="鏃ュ湪绾跨巼"
+ :chartData="chartData2"
+ yName="%"
+ seriesName="鏃ュ湪绾跨巼"
+ :areaColor="areaColor"
+ >
</LineChart>
</el-card>
</el-col>
@@ -519,14 +490,26 @@
<el-row :gutter="20">
<el-col :span="12">
<el-card shadow="never" class="card-value">
- <LineChart title="鏃ユ湁鏁堢巼" :chartData="chartData3" yName="%" seriesName="鏃ユ湁鏁堢巼">
+ <LineChart
+ title="鏃ユ湁鏁堢巼"
+ :chartData="chartData3"
+ yName="%"
+ seriesName="鏃ユ湁鏁堢巼"
+ :areaColor="areaColor"
+ >
</LineChart>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never" class="card-value">
- <LineChart title="鏃ヨ秴鏍囩巼" :chartData="chartData4" yName="%" seriesName="鏃ヨ秴鏍囩巼">
+ <LineChart
+ title="鏃ヨ秴鏍囩巼"
+ :chartData="chartData4"
+ yName="%"
+ seriesName="鏃ヨ秴鏍囩巼"
+ :areaColor="areaColor"
+ >
</LineChart>
</el-card>
</el-col>
@@ -559,10 +542,7 @@
width: 98%;
/* height: 600px; */
}
-.card-value {
- /* min-width:900px; */
- /* padding:0px */
-}
+
.card-height {
height: 570px;
}
@@ -572,14 +552,14 @@
line-height: 60px;
}
.risk-advice {
- margin: 40px 0px;
+ /* margin: 20px 0px; */
}
.container {
display: flex;
margin-bottom: 10px;
}
.grade-instance {
- margin-top: 80px;
+ /* margin-top: 50px; */
}
.block-color {
width: 1em;
@@ -612,16 +592,18 @@
}
.weightColor-low {
color: #9fdb1d;
+ font-size: 16px;
}
.weightColor-medium {
color: #dabe09;
+ font-size: 16px;
}
.weightColor-heigh {
color: red;
+ font-size: 16px;
}
.risk-grade {
display: flex;
- margin-top: 10px;
}
:deep().el-table__header-wrapper {
color: red;
@@ -644,4 +626,21 @@
.site-name {
margin-left: 20px;
}
+.risk-advice-text {
+ font-size: 14px;
+ color: #333333;
+ letter-spacing: 1.5px;
+ margin-top: 10px;
+}
+.sub-title {
+ font-size: 14px;
+ color: #333333;
+}
+
+.risk-text-container{
+ height: 490px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
</style>
--
Gitblit v1.9.3