添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/views/smoke/realTime/components/detectorDailySumDays.vue

@@ -1,121 +1,351 @@
<template>
    <div>
        <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="菜系"></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="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="date" label="菜系" width="180">
            </el-table-column>
            <el-table-column prop="name" label="建议使用的净化设施" width="180">
            </el-table-column>
            <el-table-column prop="address" label="净化器图片">
            </el-table-column>
            <el-table-column prop="address" label="商家净化器款式">
            </el-table-column>
            <el-table-column prop="address" label="油烟排放情况">
            </el-table-column>
        </el-table>
    <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 class="title">二、餐饮企业在线监测情况汇总：</div>

        <div class="title">三、餐饮企业健康情况展示：</div>
    <div id="myChart1" class="echart-foot"></div>

        <div class="title">四、现场照片：</div>
    <div id="myChart2" class="echart-foot"></div>

        <div class="title">五、净化设备清洗维保记录：</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">六、整改记录：</div>
    <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">七、执法管理记录：</div>
    </div>
    <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: {},
            tableData1:[],
            tableData2:[],
            tableData3:[],
            tableData4:[],
            tableData5:[],
            tableData6:[],
            tableData7:[]
  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);
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "detectorDailySumDays",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                debugger
                this.localeInfo = res.Data
            })

      });
      // 绘制图表
      myecharts.setOption({
        title: {
          text: "平均浓度mg/m³",
        },

        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
            return "";
        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",
          },
        ],
      });
    },
    props: ['inTimeData']
}
    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 {
    font-size: 20px;
    text-align: left;
  line-height: 1;
  font-size: 20px;
  text-align: left;
  margin: 10px 0px;
}
.small_title {
  font-size: 18px !important;
}
</style>