<script>
|
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
|
import InputSearch from '@/sfc/InputSearch.vue';
|
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';
|
import exceptionApi from '@/api/exceptionApi.js';
|
import {useCommonFunction} from '../../utils/common.js';
|
import index from '@/utils/risk_estimate_common_function/index.js'
|
import dayjs from 'dayjs';
|
export default {
|
components: {
|
TimeSelectWithShortCuts,
|
AreaAndmonitorType,
|
InputSearch
|
},
|
data() {
|
return {
|
// 当前页
|
currentPage: 1,
|
// 每页条数
|
pageSize: 20,
|
total: 0,
|
// 表格数据
|
tableData: [],
|
isNoData: false,
|
loading: false,
|
|
form: {
|
// 站点名称
|
name: '',
|
// 开始时间
|
beginTime: '',
|
// 结束时间
|
endTime: ''
|
},
|
bill: {
|
min: '',
|
max: '',
|
avg: '',
|
online: '',
|
valid: '',
|
exceeding: '',
|
|
// 典型异常复现率
|
exceptionRecurrence: '',
|
// 异常类型据聚集度
|
exceptionTypeAggregation: '',
|
},
|
// {
|
// siteName:'',
|
// region:'',
|
// monitorType:'',
|
// riskValue:'',
|
// riskGrage:'',
|
// riskAdvice:'',
|
// beginTime:'',
|
// endTime:'',
|
// }
|
table:[]
|
};
|
},
|
setup(){
|
// 引入 百分号比较大小 导出功能
|
const {exportToExcel} = useCommonFunction()
|
return {exportToExcel}
|
},
|
|
computed: {
|
weight() {
|
return (
|
(100 - this.bill.online) * 0.1 +
|
(100 - this.bill.valid) * 0.2 +
|
this.bill.exceeding * 0.2 +
|
this.bill.exceptionTypeAggregation * 0.2 +
|
this.bill.exceptionRecurrence * 0.3
|
).toFixed(2);
|
}
|
},
|
watch:{
|
weight(){
|
this.table[0].riskValue = this.weight
|
}
|
},
|
methods: {
|
/**
|
* 将中国标准时间转为指定格式
|
* @param：
|
* @returns：
|
*/
|
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 = {};
|
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;
|
exceptionApi
|
.analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
|
.then((response) => {
|
this.chartData = response.data.data;
|
this.loading = false;
|
if (response.data.data.length == 0) {
|
this.isNoData = true;
|
return;
|
}
|
// 移除空数据状态
|
this.isNoData = false;
|
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;
|
const tempObj = {}
|
tempObj.region = '金山区'
|
tempObj.monitorType = '扬尘'
|
tempObj.siteName = this.form.name
|
tempObj.beginTime = this.form.beginTime
|
tempObj.endTime = this.form.endTime
|
|
// this.table[0].region = '金山区'
|
// this.table[0].monitorType = '扬尘'
|
// this.table[0].siteName = this.form.name
|
// this.table[0].beginTime = this.form.beginTime
|
// this.table[0].endTime = this.form.endTime
|
|
if(this.weight>=0.6){
|
tempObj.riskGrage = '高风险'
|
tempObj.riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
|
// this.table[0].riskGrage = '高风险'
|
// this.table[0].riskAdvice = '建议对该站点进行线下执法检查，专项数据对比'
|
}else if(this.weight<0.6 && this.weight>=0.2){
|
tempObj.riskGrage = '中风险'
|
tempObj.riskAdvice = '建议开展常态追踪分析'
|
// this.table[0].riskGrage = '中风险'
|
// this.table[0].riskAdvice = '建议开展常态追踪分析'
|
}else {
|
tempObj.riskGrage = '低风险'
|
tempObj.riskAdvice = '建议引导企业长态保持'
|
// this.table[0].riskGrage = '低风险'
|
// this.table[0].riskAdvice = '建议引导企业长态保持'
|
}
|
this.table.push(tempObj)
|
});
|
},
|
|
// 企业异常详情
|
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'];
|
});
|
},
|
|
/**
|
* 初始加载函数
|
*/
|
fetch() {
|
// 分析数据
|
this.fetchData();
|
// 异常数据
|
this.exceptiondataCount();
|
},
|
|
/**
|
* 导出为Excel
|
|
*/
|
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.exportToExcel(this.table,tableColumns,excelColumns,'综合风险排名.xlsx')
|
}
|
|
},
|
|
}
|
};
|
</script>
|
|
<template>
|
<el-row>
|
<el-row>
|
<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)"
|
></InputSearch>
|
</el-form-item>
|
<el-form-item>
|
<TimeSelectWithShortCuts
|
@submit-time="giveTime"
|
></TimeSelectWithShortCuts>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="fetch">风险排名</el-button>
|
<el-button type="warning" @click="exportData">导出</el-button>
|
</el-form-item>
|
</el-form>
|
</el-row>
|
</el-row>
|
|
<el-table
|
:data="table"
|
height="600px"
|
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="siteName" label="站点名称" show-overflow-tooltip />
|
<el-table-column prop="region" label="区域" show-overflow-tooltip />
|
<el-table-column prop="monitorType" label="检测类型" show-overflow-tooltip />
|
<el-table-column prop="riskValue" label="风险值" show-overflow-tooltip />
|
<el-table-column prop="riskGrage" label="风险等级" show-overflow-tooltip />
|
<el-table-column prop="riskAdvice" label="管控措施" show-overflow-tooltip />
|
<el-table-column prop="beginTime" label="开始日期" show-overflow-tooltip />
|
<el-table-column prop="endTime" label="结束日期" show-overflow-tooltip />
|
</el-table>
|
<el-empty v-show="isNoData" :image-size="200" />
|
|
</template>
|
|
<style scoped>
|
.el-row,.el-table {
|
margin: 10px 0px 0px 10px
|
}
|
.el-table{
|
|
}
|
</style>
|
