<!-- 日均值 -->
|
|
<script>
|
import InputSearch from '@/sfc/InputSearch.vue'
|
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
|
import DustRadarChart from './components/DustRadarChart.vue'
|
import exceptionApi from '@/api/exceptionApi.js'
|
import LineChart from './components/LineChart.vue'
|
import index from '@/utils/risk_estimate_common_function/index.js'
|
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,
|
InputSearch,
|
AreaAndmonitorType,
|
DustRadarChart,
|
ButtonClick,
|
MonthSelect
|
},
|
data() {
|
return {
|
isNoData: false,
|
loading: false,
|
screenLoading: false,
|
parentDataFlag: false,
|
chartData: [],
|
chartData1: {}, //保存查询的结果
|
chartData2: {},
|
chartData3: {},
|
chartData4: {},
|
begin: '', //开始时间
|
end: '', //结束时间
|
|
form: {
|
// 站点名称
|
name: '',
|
// 设备编号
|
number: '3234',
|
// 开始时间
|
beginTime: '',
|
// 结束时间
|
endTime: ''
|
},
|
month: '',
|
|
// 折线图配置项
|
option: {},
|
// 数据清单
|
bill: {
|
min: '',
|
max: '',
|
avg: '',
|
online: 100,
|
valid: 100,
|
exceeding: 0,
|
|
// 典型异常复现率
|
exceptionRecurrence: 0,
|
// 异常类型据聚集度
|
exceptionTypeAggregation: 0
|
},
|
|
// 查询按钮加载效果
|
queryButton: false,
|
|
// 风险值排名前十的站点
|
top_10_sites_with_risk_values: [{ name: '', riskValue: 0.2 }],
|
// 风险值
|
weight: '',
|
// 无数据配置时间段
|
areaColor: []
|
}
|
},
|
mounted() {
|
// // 加载风险值最高的站点数据
|
this.ShowDefaultData()
|
},
|
computed: {
|
// 风险等级
|
riskGradeAndAdvice() {
|
return riskApi.getRiskAdvice(this.weight)
|
}
|
},
|
|
methods: {
|
// 查询站点统计信息
|
querySiteStaticsInfo(row) {
|
this.form.name = row.siteName
|
// 更新统计数据
|
this.getAnalysisData()
|
// 计算风险值
|
this.calRiskValue()
|
},
|
|
// 格式化月份
|
giveMonth(val) {
|
//将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
|
this.month = dayjs(val).format('YYYY-MM-DD')
|
// 同时更新开始和结束时间
|
this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
|
this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
|
},
|
|
/**
|
* 风险评估按钮
|
* @param：
|
* @returns：
|
*/
|
riskAssessment() {
|
// 更新排名清单
|
this.getRiskRank()
|
// 更新分析数据
|
this.getAnalysisData()
|
// 计算风险值
|
this.calRiskValue()
|
},
|
|
// 更新分析数据
|
getAnalysisData() {
|
// 日统计数据
|
this.fetchDayAnalysisData()
|
// 异常数据
|
this.fetchExceptionAnalysisData()
|
},
|
|
findObjectByPropertyValue(array, property, value) {
|
return array.find((obj) => obj[property] === value)
|
},
|
|
// 此页面打开时
|
ShowDefaultData() {
|
// 默认加载展示的内容
|
this.updateOriginPage()
|
},
|
|
// 加载默认展示的内容
|
async updateOriginPage() {
|
this.screenLoading = true
|
// 更新排名清单，并得到风险值最高站点
|
let arr = await this.getRiskRank()
|
this.form.name = arr[0]
|
this.form.number = arr[1]
|
this.screenLoading = false
|
|
// 更新日统计数据
|
this.getAnalysisData()
|
// 计算风险值
|
this.calRiskValue()
|
},
|
|
// 计算风险值
|
calRiskValue() {
|
riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
|
this.weight = riskValue.calRiskValue(response.data.data[0]).toFixed(2)
|
})
|
},
|
|
// 根据目前站点，月份，查折线图日统计数据
|
fetchDayAnalysisData() {
|
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.queryButton = true
|
exceptionApi
|
.analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
|
.then((response) => {
|
this.chartData = response.data.data
|
this.loading = false
|
this.queryButton = false
|
if (response.data.data.length == 0) {
|
this.isNoData = true
|
return
|
}
|
// 分析数据中的最早时间
|
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, begin, end)
|
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']
|
})
|
},
|
// 企业异常统计数据
|
fetchExceptionAnalysisData() {
|
exceptionApi
|
.exceptiondata1({
|
siteName: this.form.name,
|
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']
|
})
|
},
|
|
// 选择其他值类型时
|
setChart() {
|
if (this.chartData.length) {
|
// 构建折线图x,y数据
|
let obj = lineChart.getLineChartXYData(
|
this.chartData,
|
this.form.beginTime,
|
this.form.endTime
|
)
|
|
this.chartData1 = {
|
x: obj.xData,
|
y: obj.yAvg
|
}
|
this.chartData2 = {
|
x: obj.xData,
|
y: obj.yOnline
|
}
|
this.chartData3 = {
|
x: obj.xData,
|
y: obj.yValid
|
}
|
this.chartData4 = {
|
x: obj.xData,
|
y: obj.yExceed
|
}
|
}
|
},
|
|
// 得到前10风险排名清单
|
async getRiskRank() {
|
let response = await riskApi.queryRiskValue('', this.month, 'month')
|
|
let tableData = riskValue.backComprehensiveRiskTableData(response.data.data)
|
|
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')
|
})
|
// 保存风险值最高的站点名称和设备编号
|
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： 对象数组，返回的数量
|
*/
|
getTopRiskData(arr, num) {
|
// 按照riskValue降序排列
|
arr.sort((a, b) => b.riskValue - a.riskValue)
|
// 获取前num个元素
|
return arr.slice(0, num)
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<el-form :inline="true" :model="form">
|
<el-form-item class="form-item">
|
<AreaAndmonitorType></AreaAndmonitorType>
|
</el-form-item>
|
<el-form-item class="form-item">
|
<InputSearch
|
: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 @submit-value="giveMonth"></MonthSelect>
|
</el-form-item>
|
|
<el-form-item>
|
<ButtonClick
|
content="风险评估"
|
type="primary"
|
:loading="queryButton"
|
@do-search="riskAssessment"
|
></ButtonClick>
|
</el-form-item>
|
</el-form>
|
|
<div v-loading="screenLoading" class="wait-name">
|
<div class="chart-container" v-show="!isNoData && !screenLoading">
|
<div class="time-text">
|
<span>数据统计时段：{{ form.beginTime }} ~ {{ form.endTime }}</span>
|
<span class="site-name">{{ form.name }}</span>
|
</div>
|
|
<el-row :gutter="10">
|
<el-col :span="5">
|
<el-card shadow="never" 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"
|
>
|
<!-- :index="indexMethod" -->
|
|
<el-table-column
|
type="index"
|
label="序号"
|
fixed
|
width="52"
|
show-overflow-tooltip
|
align="center"
|
/>
|
<el-table-column
|
prop="siteName"
|
label="站点名称"
|
show-overflow-tooltip
|
align="center"
|
>
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
text
|
class="table-button"
|
@click="querySiteStaticsInfo(row)"
|
>{{ row.siteName }}</el-button
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="riskValue"
|
label="风险值"
|
sortable
|
show-overflow-tooltip
|
align="center"
|
/>
|
</el-table>
|
</el-card>
|
</el-col>
|
|
<el-col :span="11">
|
<el-card shadow="never" class="table-class">
|
<DustRadarChart
|
:name="[
|
'数据有效风险',
|
'典型异常复现风险',
|
'异常类型聚集风险',
|
'超标异常风险',
|
'数据在线风险'
|
]"
|
:yData="[
|
bill.valid,
|
bill.exceptionRecurrence,
|
bill.exceptionTypeAggregation,
|
bill.exceeding,
|
bill.online
|
]"
|
></DustRadarChart>
|
</el-card>
|
</el-col>
|
|
<el-col :span="4">
|
<el-card shadow="never" class="card-height risk-card">
|
<template #header>
|
<h1
|
:class="{
|
'weightColor-low': weight < 0.2,
|
'weightColor-medium': weight >= 0.2 && weight < 0.6,
|
'weightColor-heigh': weight >= 0.6
|
}"
|
>
|
风险值(0~1)：{{ weight }}
|
</h1>
|
</template>
|
<div class="risk-text-container">
|
|
<div class="risk-grade">
|
<h1 class="sub-title">风险等级：</h1>
|
<span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
|
</div>
|
|
<div class="risk-advice">
|
<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>
|
<div>高风险(≥0.6)</div>
|
</div>
|
<div class="container">
|
<div class="block-color medium"></div>
|
<div>中风险(0.2~0.6)</div>
|
</div>
|
<div class="container">
|
<div class="block-color low"></div>
|
<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>
|
|
<el-form>
|
<el-form-item label="最大值："> {{ bill.max }} mg/m³ </el-form-item>
|
<el-form-item label="最小值："> {{ bill.min }} mg/m³ </el-form-item>
|
<el-form-item label="数据有效率："> {{ bill.online }}% </el-form-item>
|
<el-form-item label="数据在线率："> {{ bill.valid }}% </el-form-item>
|
<el-form-item label="数据超标率："> {{ bill.exceeding }}% </el-form-item>
|
<el-form-item label="异常类型聚集度：">
|
{{ bill.exceptionTypeAggregation * 100 }}%
|
</el-form-item>
|
<el-form-item label="典型异常复现率：">
|
{{ bill.exceptionRecurrence * 100 }}%
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card shadow="never" class="card-value">
|
<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="日在线率"
|
:areaColor="areaColor"
|
>
|
</LineChart>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card shadow="never" class="card-value">
|
<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="日超标率"
|
:areaColor="areaColor"
|
>
|
</LineChart>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<el-empty description="暂无数据" v-show="isNoData" :image-size="200" />
|
</template>
|
|
<style scoped>
|
.el-form {
|
margin: 10px;
|
}
|
.form-item {
|
margin-top: 10px;
|
}
|
.chart-container {
|
margin-left: 10px;
|
}
|
.time-text {
|
font-size: 14px;
|
color: #333333;
|
letter-spacing: 1px;
|
}
|
.el-card {
|
margin-top: 15px;
|
border-radius: 9px;
|
}
|
.chart-container {
|
width: 98%;
|
/* height: 600px; */
|
}
|
|
.card-height {
|
height: 570px;
|
}
|
.el-header {
|
background-color: #010408;
|
color: #333;
|
line-height: 60px;
|
}
|
.risk-advice {
|
/* margin: 20px 0px; */
|
}
|
.container {
|
display: flex;
|
margin-bottom: 10px;
|
}
|
.grade-instance {
|
/* margin-top: 50px; */
|
}
|
.block-color {
|
width: 1em;
|
height: 1em;
|
margin-right: 10px;
|
margin-top: 3px;
|
}
|
.heigh {
|
background-color: red;
|
}
|
.medium {
|
background-color: #fadc19;
|
}
|
.low {
|
background-color: #9fdb1d;
|
}
|
|
.el-text {
|
align-self: left;
|
}
|
.el-form-item {
|
margin-bottom: 20px;
|
}
|
:deep().el-form-item__content {
|
justify-content: flex-end;
|
}
|
.title-16 {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.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;
|
}
|
:deep().el-table__header-wrapper {
|
color: red;
|
}
|
/* .wait-name {
|
width: 500px;
|
height: 600px;
|
} */
|
.table-class {
|
/* border: 1px solid blue; */
|
/* margin: 20px 0px 20px 0px; */
|
height: 570px;
|
}
|
|
.table-button {
|
letter-spacing: 1px;
|
text-decoration: underline;
|
border-radius: 0px;
|
}
|
.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>
|
