<!-- 日均值 -->
|
<script>
|
import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.vue'
|
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 rank from '@/utils/risk_estimate_common_function/rank.js'
|
export default {
|
components: {
|
LineChart,
|
DateSelectWithShortCuts,
|
InputSearch,
|
AreaAndmonitorType,
|
DustRadarChart,
|
ButtonClick
|
},
|
data() {
|
return {
|
isNoData: false,
|
loading: false,
|
screenLoading:false,
|
chartData: [],
|
chartData1: {}, //保存查询的结果
|
chartData2: {},
|
chartData3: {},
|
chartData4: {},
|
//devId:'', //设备编号
|
begin: '', //开始时间
|
end: '', //结束时间
|
|
form: {
|
// 站点名称
|
name: '',
|
// 设备编号
|
number: '',
|
// 开始时间
|
beginTime: '',
|
// 结束时间
|
endTime: ''
|
},
|
// 折线图配置项
|
option: {},
|
// 数据清单
|
bill: {
|
min: '',
|
max: '',
|
avg: '',
|
online: 100,
|
valid: 100,
|
exceeding: 0,
|
|
// 典型异常复现率
|
exceptionRecurrence: 0,
|
// 异常类型据聚集度
|
exceptionTypeAggregation: 0
|
},
|
status: {
|
isHasData: false
|
},
|
// 查询按钮加载效果
|
queryButton: false
|
}
|
},
|
watch:{
|
// form:{
|
// name(){
|
// if(this.form.name!=''){
|
// this.fetch()
|
// this.screenLoading = false
|
// }
|
// },
|
// deep: true
|
// }
|
},
|
computed: {
|
weight() {
|
let singleOnline = ((100 - this.bill.online) / 100) * 0.1
|
let singleValid = ((100 - this.bill.valid) / 100) * 0.2
|
let singleExceeding = (this.bill.exceeding / 100) * 0.2
|
let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
|
let singleRecurrence = this.bill.exceptionRecurrence * 0.3
|
let allWeight = (
|
singleOnline +
|
singleValid +
|
singleExceeding +
|
singleAggregation +
|
singleRecurrence
|
).toFixed(2)
|
|
return allWeight
|
}
|
},
|
mounted() {
|
// 页面加载显示风险最高的站点
|
// this.getRiskWeightName()
|
|
this.fetch()
|
},
|
methods: {
|
async getRiskWeightName() {
|
this.screenLoading = true
|
this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);
|
|
// 加载该风险清单
|
this.fetch()
|
this.screenLoading = false
|
},
|
/**
|
* 将中国标准时间转为指定格式
|
* @param：
|
* @returns：
|
*/
|
giveTime(val) {
|
//将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
|
this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
|
this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
|
},
|
/**
|
* 初始加载函数
|
* @param：
|
* @returns：
|
*/
|
fetch() {
|
// 分析数据
|
this.fetchData()
|
// 异常数据
|
this.exceptiondataCount()
|
},
|
|
// 点击展示按钮
|
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.queryButton = true
|
exceptionApi
|
.analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
|
.then((response) => {
|
this.chartData = response.data.data
|
this.loading = false
|
this.queryButton = false
|
if (response.data.data.length == 0) {
|
this.isNoData = true
|
return
|
}
|
// 移除空数据状态
|
this.isNoData = false
|
this.setChart()
|
|
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']
|
|
this.begin = this.chartData[0].lst
|
this.end = this.chartData[this.chartData.length - 1].lst
|
})
|
},
|
|
// 选择其他值类型时
|
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))
|
})
|
|
this.chartData1 = {
|
x: dateList,
|
y: dayAvg
|
}
|
this.chartData2 = {
|
x: dateList,
|
y: dataOnline
|
}
|
this.chartData3 = {
|
x: dateList,
|
y: dataValid
|
}
|
this.chartData4 = {
|
x: dateList,
|
y: dataExceed
|
}
|
}
|
},
|
|
// 企业异常详情
|
exceptiondataCount() {
|
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']
|
})
|
}
|
}
|
}
|
</script>
|
|
|
<template>
|
<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)" :siteName="form.name"></InputSearch> -->
|
<InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
|
</el-form-item>
|
|
<el-form-item>
|
<DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
|
</el-form-item>
|
|
|
<el-form-item>
|
<ButtonClick
|
content="风险评估"
|
type="primary"
|
:loading="queryButton"
|
@do-search="fetch"
|
></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">数据统计时段：{{ begin }} ~ {{ end }}</div>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card shadow="never">
|
<DustRadarChart
|
:name="[
|
'数据有效风险',
|
'典型异常复现风险',
|
'异常类型聚集风险',
|
'数据超标风险',
|
'数据在线风险'
|
]"
|
:yData="[
|
bill.valid,
|
bill.exceptionRecurrence,
|
bill.exceptionTypeAggregation,
|
bill.exceeding,
|
bill.online
|
]"
|
></DustRadarChart>
|
</el-card>
|
</el-col>
|
|
<el-col :span="6">
|
<el-card shadow="never" class="card-height">
|
<template #header>
|
<h1
|
:class="{
|
'weightColor-low': weight < 0.2,
|
'weightColor-medium': weight >= 0.2 && weight < 0.6,
|
'weightColor-heigh': weight >= 0.6
|
}"
|
>
|
风险值：{{ weight }}
|
</h1>
|
</template>
|
<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>
|
</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>
|
</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>
|
</el-card>
|
</el-col>
|
|
<el-col :span="6">
|
<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="日均值">
|
</LineChart>
|
</el-card>
|
</el-col>
|
|
<el-col :span="12">
|
<el-card shadow="never" class="card-value">
|
<LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
|
</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="日有效率">
|
</LineChart>
|
</el-card>
|
</el-col>
|
|
<el-col :span="12">
|
<el-card shadow="never" class="card-value">
|
<LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
|
</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;
|
}
|
.chart-container {
|
margin-left: 10px;
|
}
|
.time-text {
|
letter-spacing: 2px;
|
}
|
.el-card {
|
margin-top: 15px;
|
border-radius: 9px;
|
}
|
.chart-container {
|
width: 95%;
|
/* height: 600px; */
|
}
|
.card-value {
|
/* min-width:900px; */
|
/* padding:0px */
|
}
|
.card-height {
|
height: 540px;
|
}
|
.el-header {
|
background-color: #010408;
|
color: #333;
|
line-height: 60px;
|
}
|
.risk-advice {
|
margin: 40px 0px;
|
}
|
.container {
|
display: flex;
|
margin-bottom: 10px;
|
}
|
.grade-instance {
|
margin-top: 80px;
|
}
|
.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;
|
}
|
.weightColor-medium {
|
color: #dabe09;
|
}
|
.weightColor-heigh {
|
color: red;
|
}
|
.risk-grade {
|
display: flex;
|
margin-top: 10px;
|
}
|
:deep().el-table__header-wrapper {
|
color: red;
|
}
|
/* .wait-name {
|
width: 500px;
|
height: 600px;
|
} */
|
</style>
|
