<template>
|
<div class="body">
|
<el-descriptions>
|
<el-descriptions-item label="餐饮企业名称">{{
|
localeInfo.customer.Name
|
}}</el-descriptions-item>
|
<el-descriptions-item label="联系人">{{
|
localeInfo.customer.Contact
|
}}</el-descriptions-item>
|
<el-descriptions-item label="联系电话">{{
|
localeInfo.customer.Mobile
|
}}</el-descriptions-item>
|
<el-descriptions-item label="详细地址">
|
{{ localeInfo.customer.Address }}
|
</el-descriptions-item>
|
<el-descriptions-item label="监测点类型">
|
{{
|
localeInfo.customer.Typ == 4 ? "一般检测点" : "其他"
|
}}</el-descriptions-item
|
>
|
<el-descriptions-item label="所属单位">
|
{{ localeInfo.customer.Org }}</el-descriptions-item
|
>
|
<el-descriptions-item label="菜系">
|
{{ this.getCuisineName(localeInfo.locale.Cuisine) }}
|
</el-descriptions-item>
|
<el-descriptions-item label="风速">
|
{{ localeInfo.locale.FanSpeed }}m/s
|
</el-descriptions-item>
|
<el-descriptions-item label="风量">
|
{{ localeInfo.locale.FanQuantity }}m³/h</el-descriptions-item
|
>
|
<el-descriptions-item label="管道截面面积">
|
{{ localeInfo.locale.PipeArea }}m²</el-descriptions-item
|
>
|
<el-descriptions-item label="灶头数量">
|
{{ localeInfo.locale.StoveNum }}个</el-descriptions-item
|
>
|
<el-descriptions-item label="集气罩面积">
|
{{ localeInfo.locale.StoveArea }}m²</el-descriptions-item
|
>
|
</el-descriptions>
|
|
<div class="title">一、技术指导：</div>
|
<el-table :data="tableData1" style="width: 100%">
|
<el-table-column prop="cuisine" label="菜系" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="建议使用的净化设施" width="180">
|
</el-table-column>
|
<el-table-column prop="img" label="净化器图片">
|
<template slot-scope="scope">
|
<img ref="scope.img" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="model" label="商家净化器款式"> </el-table-column>
|
<el-table-column prop="status" label="油烟排放情况"> </el-table-column>
|
</el-table>
|
|
<div class="title">二、餐饮企业在线监测情况汇总：</div>
|
|
<div id="myChart1" class="echart-foot"></div>
|
|
<div id="myChart2" class="echart-foot"></div>
|
|
<div class="title">三、餐饮企业健康情况展示：</div>
|
<el-table :data="tableData2" style="width: 100%">
|
<el-table-column prop="localeName" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="mn" label="设备编号" width="180">
|
</el-table-column>
|
<el-table-column prop="complianceDays" label="达标天数">
|
</el-table-column>
|
<el-table-column prop="excessDays" label="超标天数"> </el-table-column>
|
<el-table-column prop="filterAbnormallyUsedDays" label="净化器不正常天数">
|
</el-table-column>
|
<el-table-column prop="abnormalOfflineDays" label="店家原因离线天数">
|
</el-table-column>
|
<el-table-column prop="healthCodeColor" label="油烟健康码">
|
</el-table-column>
|
</el-table>
|
|
<div class="title small_title">净化器需清洗黄码报警提示：</div>
|
<el-table :data="tableData3" style="width: 100%">
|
<el-table-column prop="localeName" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="mn" label="设备编号" width="180">
|
</el-table-column>
|
<el-table-column prop="dayttt" label="净化器需清洗"> </el-table-column>
|
<el-table-column prop="dayttt" label="净化器未清洗导致超标">
|
</el-table-column>
|
<el-table-column prop="dayttt" label="净化器清洗天数"> </el-table-column>
|
<el-table-column prop="dayttt" label="净化器已洗天数"> </el-table-column>
|
</el-table>
|
|
<div class="title small_title">超标，设备损坏红码报警提示：</div>
|
<el-table :data="tableData4" style="width: 100%">
|
<el-table-column prop="localeName" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="mn" label="设备编号" width="180">
|
</el-table-column>
|
<el-table-column prop="dayttt2" label="超标原因"> </el-table-column>
|
<el-table-column prop="dayttt2" label="设备损坏原因"> </el-table-column>
|
<el-table-column prop="dayttt2" label="管理部门"> </el-table-column>
|
<el-table-column prop="dayttt2" label="商家进行整改"> </el-table-column>
|
<el-table-column prop="dayttt2" label="整改完成"> </el-table-column>
|
</el-table>
|
<div class="title">四、现场照片：</div>
|
<div>未上传现场照片</div>
|
<div class="title">五、净化设备清洗维保记录：</div>
|
|
<el-table :data="tableData5" style="width: 100%">
|
<el-table-column prop="cuisine" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="安装地址" width="180">
|
</el-table-column>
|
<el-table-column prop="cuisine" label="提交日期" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="起始日期" width="180">
|
</el-table-column>
|
<el-table-column prop="img" label="终止日期"> </el-table-column>
|
<el-table-column prop="model" label="清洗照片"> </el-table-column>
|
</el-table>
|
<div class="title">六、整改记录：</div>
|
|
<el-table :data="tableData6" style="width: 100%">
|
<el-table-column prop="cuisine" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="安装地址" width="180">
|
</el-table-column>
|
<el-table-column prop="cuisine" label="整改开始日期" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="整改结束日期" width="180">
|
</el-table-column>
|
<el-table-column prop="img" label="整改结果"> </el-table-column>
|
<el-table-column prop="model" label="详情"> </el-table-column>
|
</el-table>
|
<div class="title">七、执法管理记录：</div>
|
|
<el-table :data="tableData7" style="width: 100%">
|
<el-table-column prop="cuisine" label="监测点" width="180">
|
</el-table-column>
|
<el-table-column prop="name" label="安装地址" width="180">
|
</el-table-column>
|
<el-table-column prop="img" label="处理日期"> </el-table-column>
|
<el-table-column prop="model" label="管理类型"> </el-table-column>
|
<el-table-column prop="status" label="处理人员"> </el-table-column>
|
<el-table-column prop="status" label="处理结果"> </el-table-column>
|
<el-table-column prop="status" label="详情"> </el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
import statisticsApi from "@/api/smoke/statistics";
|
export default {
|
data() {
|
return {
|
localeInfo: {},
|
listLocale: [],
|
tableData1: [],
|
tableData2: [],
|
tableData3: [],
|
tableData4: [],
|
tableData5: [],
|
tableData6: [],
|
tableData7: [],
|
};
|
},
|
|
created() {
|
this.getData();
|
},
|
methods: {
|
getData() {
|
let param = {
|
field: "detectorDailySumDays",
|
localeId: this.inTimeData.Lid,
|
};
|
statisticsApi.getDocument(param).then((jsonStr) => {
|
const res = JSON.parse(jsonStr);
|
|
this.localeInfo = JSON.parse(res.detectorDailySumDays).Data;
|
this.listLocale = JSON.parse(res.listLocale).Data.content;
|
|
this.listLocale.forEach((l) => {
|
this.tableData1.push({
|
cuisine: this.getCuisineName(l.Cuisine),
|
name: "低空净化器",
|
img: "../../../../imgs/normalLocale.png",
|
model: "低空净化器",
|
status: "达标",
|
});
|
});
|
|
this.tableData2.push(this.localeInfo);
|
|
this.localeInfo.dayttt = 0;
|
this.tableData3.push(this.localeInfo);
|
|
this.localeInfo.dayttt2 = "-";
|
this.tableData4.push(this.localeInfo);
|
|
let ten_min_data = JSON.parse(res.tenMinData);
|
let detector_daily = JSON.parse(res.detectorDaily);
|
setTimeout(() => {
|
this.initLineChart(ten_min_data.Data);
|
this.initColumnarChart(detector_daily.Data);
|
}, 3000);
|
});
|
},
|
initLineChart(list) {
|
let myecharts = echarts.init(document.getElementById("myChart1"));
|
|
let times = this.getTimer("2020-01-01 00:00:00", 10, 144);
|
let data1 = []; // 油烟浓度
|
let data2 = []; // 颗粒物浓度
|
let data3 = []; // 非甲烷总烃浓度
|
times.forEach((o, index) => {
|
if (list[index]) {
|
data1.push(list[index].emissions_conc);
|
data2.push(list[index].granule_conc);
|
data3.push(list[index].hydrocarbon_conc);
|
} else {
|
data1.push(0);
|
data2.push(0);
|
data3.push(0);
|
}
|
});
|
// 绘制图表
|
myecharts.setOption({
|
title: {
|
text: "平均浓度mg/m³",
|
},
|
tooltip: {
|
trigger: "axis",
|
},
|
legend: {
|
data: ["油烟浓度", "颗粒物浓度", "非甲烷总烃浓度"],
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: times,
|
},
|
yAxis: {
|
type: "value",
|
},
|
series: [
|
{
|
name: "油烟浓度",
|
data: data1,
|
stack: "Total",
|
type: "line",
|
},
|
{
|
name: "颗粒物浓度",
|
data: data2,
|
stack: "Total",
|
type: "line",
|
},
|
{
|
name: "非甲烷总烃浓度",
|
stack: "Total",
|
data: data3,
|
type: "line",
|
},
|
],
|
});
|
},
|
initColumnarChart(list) {
|
let myecharts = echarts.init(document.getElementById("myChart2"));
|
let dataSource = [
|
["product", "油烟浓度", "颗粒物浓度", "非甲烷总烃浓度"],
|
];
|
list.forEach((e) => {
|
dataSource.push([
|
e.AcquitDate.split(' ')[0],
|
e.CEmissions,
|
e.CGranule,
|
e.CHydrocarbon,
|
]);
|
});
|
|
let option = {
|
legend: {},
|
tooltip: {},
|
dataset: {
|
source: dataSource,
|
},
|
xAxis: { type: "category" },
|
yAxis: {},
|
// Declare several bar series, each will be mapped
|
// to a column of dataset.source by default.
|
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
|
};
|
myecharts.setOption(option);
|
},
|
// 设置表格斑马纹
|
tableRowClassName({ row, rowIndex }) {
|
if ((rowIndex + 1) % 2 == 0) {
|
return "warning-row";
|
} else {
|
return "success-row";
|
}
|
},
|
getCuisineName(cuisine) {
|
switch (cuisine) {
|
case 1:
|
return "烧烤";
|
case 3:
|
return "川湘菜";
|
case 7:
|
return "家常菜";
|
|
default:
|
return "";
|
}
|
},
|
|
getTimer(start, Timer, length) {
|
var lists = [];
|
var count = 0; //初始值为0
|
for (let j = 0; j < length; j++) {
|
count += 1;
|
var seconds = Date.parse(start); //标准时间转毫秒数
|
var totals = j * Timer * 60 * 1000 + seconds; //固定时间间隔+开始时间的总毫秒数
|
var res = new Date(totals).toString().split(' ')[4];//毫秒数转字符串，截取，取值
|
|
lists.push(res)
|
}
|
return lists;
|
}
|
},
|
props: ["inTimeData"],
|
};
|
</script>
|
<style>
|
.body {
|
line-height: 1;
|
}
|
.title {
|
line-height: 1;
|
font-size: 20px;
|
text-align: left;
|
margin: 10px 0px;
|
}
|
.small_title {
|
font-size: 18px !important;
|
}
|
</style>
|
