油烟

zhanghua

2023-11-10 a1fb7d5473505c08cd0a20f68d3007c6efd383ff

油烟

 src/views/smoke/realTime/components/header/index.vue

@@ -1,199 +1,197 @@
<template>
    <div class="header">
        <el-form :inline="true" :model="seachData" class="demo-form-inline">
            <el-form-item label="">
                <el-select
                    style="width: 140px"
                    v-model="seachData.ownerIndex"
                    placeholder="所属单位"
                >
                    <el-option
                        v-for="(item, index) in ownerOptions"
                        :key="item.Id"
                        :label="item.Name"
                        :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select
                    style="width: 120px"
                    v-model="seachData.status"
                    placeholder="排放状态"
                >
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select
                    style="width: 120px"
                    v-model="seachData.onlineStatus"
                    placeholder="整体状态"
                >
                    <el-option
                        v-for="item in onlineStatusOptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
  <div class="header">
    <el-form :inline="true" :model="seachData" class="demo-form-inline">
      <el-form-item label="">
        <el-select
          style="width: 140px"
          v-model="seachData.ownerIndex"
          placeholder="所属单位"
        >
          <el-option
            v-for="(item, index) in ownerOptions"
            :key="item.Id"
            :label="item.Name"
            :value="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select
          style="width: 120px"
          v-model="seachData.status"
          placeholder="排放状态"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select
          style="width: 120px"
          v-model="seachData.onlineStatus"
          placeholder="整体状态"
        >
          <el-option
            v-for="item in onlineStatusOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

            <el-form-item>
                <el-radio v-model="seachData.type" label="1">监控设备</el-radio>
                <el-radio v-model="seachData.type" label="2">监测设备</el-radio>
            </el-form-item>
            <el-form-item label="">
                <el-date-picker
                    v-model="seachData.alarmTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList">刷新</el-button>
                <el-button type="primary" @click="resetAll">重置</el-button>
      <el-form-item>
        <el-radio v-model="seachData.type" label="1">监控设备</el-radio>
        <el-radio v-model="seachData.type" label="2">监测设备</el-radio>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker
          v-model="seachData.alarmTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">刷新</el-button>
        <el-button type="primary" @click="resetAll">重置</el-button>

                <el-button type="primary" @click="exportTableData"
                    >导出</el-button
                >
            </el-form-item>
        </el-form>
    </div>
        <el-button type="primary" @click="exportTableData">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import realTimeApi from "@/api/smoke/realTime";

export default {
    data() {
        return {
            onlineStatusOptions: [
                {
                    label: "正常",
                    value: 1,
                },
                {
                    label: "离线",
                    value: 2,
                },
                {
                    label: "异常离线",
                    value: 3,
                },
            ],
            statusOptions: [
                {
                    label: "正常",
                    value: "NORMAL",
                },
                {
                    label: "预警",
                    value: "ALARM",
                },
                {
                    label: "超标",
                    value: "EXCESS",
                },
                {
                    label: "离线",
                    value: "DOWN",
                },
                {
                    label: "异常离线",
                    value: "OFF",
                },
            ],
            ownerOptions: [],
            seachData: {},
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
  data() {
    return {
      onlineStatusOptions: [
        {
          label: "正常",
          value: 1,
        },
        {
          label: "离线",
          value: 2,
        },
        {
          label: "异常离线",
          value: 3,
        },
      ],
      statusOptions: [
        {
          label: "正常",
          value: "NORMAL",
        },
        {
          label: "预警",
          value: "ALARM",
        },
        {
          label: "超标",
          value: "EXCESS",
        },
        {
          label: "离线",
          value: "DOWN",
        },
        {
          label: "异常离线",
          value: "OFF",
        },
      ],
      ownerOptions: [],
      seachData: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
        };
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.getOwnerOptions();
  },
  methods: {
    // 获取所属单位
    getOwnerOptions() {
      const param = { pageSize: 100, pageNum: 1 };
      realTimeApi
        .findCustomerList(param)
        .then((res) => {
          this.ownerOptions = res.list;
        })
        .catch((err) => this.$message.error(err));
    },
    created() { },
    mounted() {
        this.getOwnerOptions();
    },
    methods: {
        // 获取所属单位
        getOwnerOptions() {
            const param = { pageSize: 100, pageNum: 1 };
            realTimeApi
                .findCustomerList(param)
                .then((res) => {
                    this.ownerOptions = res.list;
                })
                .catch((err) => this.$message.error(err));
        },

        resetAll() {
            this.seachData = {};
            this.$emit("getList", { seachData: this.seachData });
        },
        getList() {
            if (this.seachData.ownerIndex !== undefined) {
                const ownerItem = this.ownerOptions[this.seachData.ownerIndex];
                this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/";
            }
            this.$emit("getList", { seachData: this.seachData });
        },
        exportTableData() {
          
            if (this.seachData.ownerIndex !== undefined) {
                const ownerItem = this.ownerOptions[this.seachData.ownerIndex];
                this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/";
            }
            this.$emit("exportTable", { seachData: this.seachData });
        }
    resetAll() {
      this.seachData = {};
      this.$emit("getList", { seachData: this.seachData });
    },
    getList() {
      if (this.seachData.ownerIndex !== undefined) {
        const ownerItem = this.ownerOptions[this.seachData.ownerIndex];
        this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/";
      }
      this.$emit("getList", { seachData: this.seachData });
    },
    exportTableData() {
      if (this.seachData.ownerIndex !== undefined) {
        const ownerItem = this.ownerOptions[this.seachData.ownerIndex];
        this.seachData.owner = ownerItem.Pid + ownerItem.Id + "/";
      }
      this.$emit("exportTable", { seachData: this.seachData });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
    line-height: normal;
  line-height: normal;
  margin-left: 20px;
}
</style>

 src/views/smoke/report/components/alarm.vue

@@ -1,13 +1,277 @@
<template>
  
  <div>
    <MyHeader @getList="getRealTimeList" @exportTable="exportInTime"></MyHeader>
    <!-- 数据展示 -->
    <div style="width: 100%; overflow-x: scroll">
      <el-table
        border
        stripe
        ref="multipleTable"
        :header-cell-style="{
          background: '#F5F5F5',
          'font-weight': '650',
          'line-height': '45px',
        }"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          prop="AcquitAtStr"
          label="监测点"          
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="Addr"
          label="超标天数"          
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="FanStatusStr"
          label="净化器不正常使用天数"          
          min-width="20%"
        >
        </el-table-column>
        <el-table-column
          prop="AA"
          label="异常使用天数"          
          min-width="10%"
        >
        </el-table-column>
        <el-table-column
          prop="EmissionsConc"
          label="清洗记录（次）"          
          min-width="10%"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="tools">
      <div class="pagination">
        <el-pagination
          background
          @prev-click="handlePrev"
          @next-click="handleNext"
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="totalNum"
          :page-size="pageSize"
          @current-change="changeCurrentPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "./header/header2.vue";
import realTimeApi from "@/api/smoke/realTime";
export default {
  data() {
    return {
      tableData: [],
      totalNum: 0,
      pageSize: 10,
      currentPage: 1,
    };
  },
  components: { MyHeader },
  created() {
    this.getRealTimeList();
  },
  methods: {
    getRealTimeList(seachData) {
      let params;
      if (seachData) {
        params = this.getParam(seachData);
      } else {
        params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        };
      }

}
      realTimeApi
        .findInTimeList(params)
        .then(({ list, total }) => {
          list.forEach((e) => {
            e.AcquitAtStr = this.dateFormat(
              "YYYY-mm-dd HH:MM",
              new Date(e.AcquitAt)
            );
            e.FanStatusStr = this.FanStatusStr(e.FanStatus);
            e.FilterStatusStr = this.FanStatusStr(e.FilterStatus);
            e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus);
            e.StatusStr = this.StatusStr(e.Status);
          });
          this.tableData = list;
          this.totalNum = total;
        })
        .catch((err) => this.$message.error(err));
    },
    exportInTime(seachData) {
      let params;
      if (seachData) {
        params = this.getParam(seachData);
      }
      realTimeApi
        .exportInTime(params)
        .then((res) => {
          debugger;
          let time = new Date();
          let deathdate = time.toLocaleDateString();
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          if (window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(
              blob,
              deathdate + "监测总体情况报表" + ".xls"
            );
          } else {
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.download = deathdate + "监测总体情况报表" + ".xls";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
          this.$message.success("操作成功");
        })
        .catch((err) => this.$message.error(err));
    },
    getParam(seachData) {
      let params;
      if (seachData) {
        const seachParams = seachData.seachData;
        params = {
          owner: seachParams.owner == undefined ? null : seachParams.owner,
          onlineStatus:
            seachParams.onlineStatus == undefined
              ? null
              : seachParams.onlineStatus,
          status: seachParams.status == undefined ? null : seachParams.status,
          type: seachParams.type == undefined ? null : seachParams.type,
          startTime:
            seachParams.alarmTime == undefined
              ? null
              : this.dateFormat(
                  "YYYY-mm-dd HH:MM:SS",
                  seachParams.alarmTime[0]
                ),
          endTime:
            seachParams.alarmTime == undefined
              ? null
              : this.dateFormat(
                  "YYYY-mm-dd HH:MM:SS",
                  seachParams.alarmTime[1]
                ),
        };
      }
      return params;
    },

    FanStatusStr(FanStatus) {
      switch (FanStatus) {
        case 1:
          return "开";
        case 2:
          return "关";
        default:
          return "异常";
      }
    },
    OnlineStatusStr(Status) {
      switch (Status) {
        case 1:
          return "在线";
        case 2:
          return "离线";
        default:
          return "异常离线";
      }
    },
    StatusStr(Status) {
      switch (Status) {
        case "NORMAL":
          return "正常";
        case "ALARM":
          return "预警";
        case "EXCESS":
          return "超标";
        case "DOWN":
          return "离线";
        default:
          return "异常离线";
      }
    },
    // 设置表格斑马纹
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    // 当前页改变触发事件
    changeCurrentPage(page) {
      this.currentPage = page;
      this.getRealTimeList();
    },
    // 上一页点击事件
    handlePrev(page) {
      this.currentPage = page;
      this.getRealTimeList();
    },
    // 下一页点击事件
    handleNext(page) {
      this.currentPage = page;
      this.getRealTimeList();
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    },
  },
};
</script>

<style>
<style lang="scss" scoped>
.el-table {
  .operation {
    display: flex;
    color: var(--operation-color);
    .line {
      padding: 0 5px;
    }

    span:hover {
      cursor: pointer;
    }
  }
}
</style>

 src/views/smoke/report/components/header/header1.vue

@@ -122,5 +122,6 @@
<style lang="scss" scoped>
.header {
  line-height: normal;
  margin-left: 20px;
}
</style>

 src/views/smoke/report/components/header/header2.vue

@@ -66,8 +66,12 @@
    return {
      codeColorOptions: [
        {
          label: "红书",
          label: "红色",
          value: "Red",
        },
        {
          label: "黄色",
          value: "Yellow",
        },
        {
          label: "绿色",
@@ -151,5 +155,6 @@
<style lang="scss" scoped>
.header {
  line-height: normal;
  margin-left: 20px;
}
</style>

 src/views/smoke/report/components/maintenance.vue

@@ -1,13 +1,301 @@
<template>
    <div>
      <MyHeader @getList="getRealTimeList" @exportTable="exportInTime"></MyHeader>
      <!-- 数据展示 -->
      <div style="width: 100%; overflow-x: scroll">
        <el-table
          border
          stripe
          ref="multipleTable"
          :header-cell-style="{
            background: '#F5F5F5',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :data="tableData"
          :row-class-name="tableRowClassName"
        >
          <el-table-column label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column
            prop="AcquitAtStr"
            label="监测点"          
            min-width="15%"
          >
          </el-table-column>
          <el-table-column
            prop="Addr"
            label="设备编号"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="FanStatusStr"
            label="异常离线天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="AA"
            label="异常离线待处理天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="歇业天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="净化器不正常使用天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="监测仪故障天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="店家原因导致离线天数"          
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="EmissionsConc"
            label="处理率"          
            min-width="10%"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="tools">
        <div class="pagination">
          <el-pagination
            background
            @prev-click="handlePrev"
            @next-click="handleNext"
            :current-page="currentPage"
            layout="prev, pager, next"
            :total="totalNum"
            :page-size="pageSize"
            @current-change="changeCurrentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
  <script>
  import MyHeader from "./header/header2.vue";
  import realTimeApi from "@/api/smoke/realTime";
  export default {
    data() {
      return {
        tableData: [],
        totalNum: 0,
        pageSize: 10,
        currentPage: 1,
      };
    },
    components: { MyHeader },
    created() {
      this.getRealTimeList();
    },
    methods: {
      getRealTimeList(seachData) {
        let params;
        if (seachData) {
          params = this.getParam(seachData);
        } else {
          params = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          };
        }
  
        realTimeApi
          .findInTimeList(params)
          .then(({ list, total }) => {
            list.forEach((e) => {
              e.AcquitAtStr = this.dateFormat(
                "YYYY-mm-dd HH:MM",
                new Date(e.AcquitAt)
              );
              e.FanStatusStr = this.FanStatusStr(e.FanStatus);
              e.FilterStatusStr = this.FanStatusStr(e.FilterStatus);
              e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus);
              e.StatusStr = this.StatusStr(e.Status);
            });
            this.tableData = list;
            this.totalNum = total;
          })
          .catch((err) => this.$message.error(err));
      },
      exportInTime(seachData) {
        let params;
        if (seachData) {
          params = this.getParam(seachData);
        }
        realTimeApi
          .exportInTime(params)
          .then((res) => {
            debugger;
            let time = new Date();
            let deathdate = time.toLocaleDateString();
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            });
            if (window.navigator.msSaveBlob) {
              window.navigator.msSaveBlob(
                blob,
                deathdate + "监测总体情况报表" + ".xls"
              );
            } else {
              const url = window.URL.createObjectURL(blob);
              const link = document.createElement("a");
              link.style.display = "none";
              link.href = url;
              link.download = deathdate + "监测总体情况报表" + ".xls";
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            }
            this.$message.success("操作成功");
          })
          .catch((err) => this.$message.error(err));
      },
      getParam(seachData) {
        let params;
        if (seachData) {
          const seachParams = seachData.seachData;
          params = {
            owner: seachParams.owner == undefined ? null : seachParams.owner,
            onlineStatus:
              seachParams.onlineStatus == undefined
                ? null
                : seachParams.onlineStatus,
            status: seachParams.status == undefined ? null : seachParams.status,
            type: seachParams.type == undefined ? null : seachParams.type,
            startTime:
              seachParams.alarmTime == undefined
                ? null
                : this.dateFormat(
                    "YYYY-mm-dd HH:MM:SS",
                    seachParams.alarmTime[0]
                  ),
            endTime:
              seachParams.alarmTime == undefined
                ? null
                : this.dateFormat(
                    "YYYY-mm-dd HH:MM:SS",
                    seachParams.alarmTime[1]
                  ),
          };
        }
        return params;
      },
  
      FanStatusStr(FanStatus) {
        switch (FanStatus) {
          case 1:
            return "开";
          case 2:
            return "关";
          default:
            return "异常";
        }
      },
      OnlineStatusStr(Status) {
        switch (Status) {
          case 1:
            return "在线";
          case 2:
            return "离线";
          default:
            return "异常离线";
        }
      },
      StatusStr(Status) {
        switch (Status) {
          case "NORMAL":
            return "正常";
          case "ALARM":
            return "预警";
          case "EXCESS":
            return "超标";
          case "DOWN":
            return "离线";
          default:
            return "异常离线";
        }
      },
      // 设置表格斑马纹
      tableRowClassName({ row, rowIndex }) {
        if ((rowIndex + 1) % 2 === 0) {
          return "warning-row";
        } else {
          return "success-row";
        }
      },
      // 当前页改变触发事件
      changeCurrentPage(page) {
        this.currentPage = page;
        this.getRealTimeList();
      },
      // 上一页点击事件
      handlePrev(page) {
        this.currentPage = page;
        this.getRealTimeList();
      },
      // 下一页点击事件
      handleNext(page) {
        this.currentPage = page;
        this.getRealTimeList();
      },
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(), // 年
          "m+": (date.getMonth() + 1).toString(), // 月
          "d+": date.getDate().toString(), // 日
          "H+": date.getHours().toString(), // 时
          "M+": date.getMinutes().toString(), // 分
          "S+": date.getSeconds().toString(), // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
            );
          }
        }
        return fmt;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .el-table {
    .operation {
      display: flex;
      color: var(--operation-color);
      .line {
        padding: 0 5px;
      }
  
      span:hover {
        cursor: pointer;
      }
    }
  }
  </style>

 src/views/smoke/report/components/overallSituation.vue

@@ -18,98 +18,47 @@
                :data="tableData"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号" type="index" width="60px">
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column prop="Locale" label="监测点" width="120px">
                <el-table-column prop="AcquitAtStr" label="采集时间" width="auto" min-width="20%">
                </el-table-column>
                <el-table-column prop="Addr" label="安装地址" width="180px">
                </el-table-column>
                <el-table-column
                    prop="AcquitAtStr"
                    label="采集时间"
                    width="100px"
                >
                <el-table-column prop="Addr" label="设备总数" width="auto" min-width="10%">
                </el-table-column>
                <el-table-column
                    prop="FanStatusStr"
                    label="风机状态"
                    width="80px"
                    label="达标数"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="FilterStatusStr"
                    prop="达标比例"
                    label="净化器状态"
                    width="95px"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="EmissionsConc"
                    label="油烟实时浓度（mg/m3）"
                    width="110px"
                    label="超标数"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="CEmissions"
                    label="油烟折算浓度（mg/m3）"
                    width="110px"
                    label="超标比例"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="GranuleConc"
                    label="颗粒物实时浓度（mg/m3）"
                    width="120px"
                    label="在线数"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="CGranule"
                    label="颗粒物折算浓度（mg/m3）"
                    width="120px"
                    label="在线比例"
                    width="auto" min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="HydrocarbonConc"
                    label="非甲烷总烃实时浓度（mg/m3）"
                    width="160px"
                >
                </el-table-column>
                <el-table-column
                    prop="CHydrocarbon"
                    label="非甲烷总烃折算浓度（mg/m3）"
                    width="160px"
                >
                </el-table-column>
                <el-table-column prop="StatusStr" label="排放状态" width="80px">
                </el-table-column>
                <el-table-column
                    prop="OnlineStatusStr"
                    label="整体状态"
                    width="80px"
                >
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="550px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="handleUpload(scope.row)"
                                >一点一档</span
                            >
                            <span class="line">|</span>
                            <span @click="handleDispatch(scope.row)"
                                >查看每分钟数据</span
                            >
                            <span class="line">|</span>
                            <span @click="handleLearn(scope.row)"
                                >查看10min浓度</span
                            >
                            <span class="line">|</span>
                            <span @click="handleNotDeal(scope.row)"
                                >查看小时折算浓度</span
                            >
                            <span class="line">|</span>
                            <span @click="handleNotDeal(scope.row)"
                                >监测点设备管理</span
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
@@ -191,14 +140,14 @@
                    if (window.navigator.msSaveBlob) {
                        window.navigator.msSaveBlob(
                            blob,
                            deathdate + "实时数据" + ".xls"
                            deathdate + "监测总体情况报表" + ".xls"
                        );
                    } else {
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.download = deathdate + "实时数据" + ".xls";
                        link.download = deathdate + "监测总体情况报表" + ".xls";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);

 src/views/smoke/report/components/reduceEmissions.vue

@@ -1,13 +1,280 @@
<template>
  
    <div>
        <MyHeader
            @getList="getRealTimeList"
            @exportTable="exportInTime"
        ></MyHeader>
        <!-- 数据展示 -->
        <div style="width: 100%; overflow-x: scroll">
            <el-table
                border
                stripe
                ref="multipleTable"
                :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }"
                :data="tableData"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号" type="index" width="60px">
                </el-table-column>
                <el-table-column prop="AcquitAtStr" label="监测点" min-width="10%">
                </el-table-column>
                <el-table-column prop="Addr" label="安装地址"  min-width="20%">
                </el-table-column>
                <el-table-column
                    prop="FanStatusStr"
                    label="设备编码"
                    min-width="15%"
                >
                </el-table-column>
                <el-table-column
                    prop="AAA"
                    label="PM2.5减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="EmissionsConc"
                    label="PM10减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="CEmissions"
                    label="油烟减排（Kg）"
                    min-width="10%"
                >
                </el-table-column>
                <el-table-column
                    prop="GranuleConc"
                    label="vocs减排量（Kg）"
                    min-width="10%"
                >
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <div class="pagination">
                <el-pagination
                    background
                    @prev-click="handlePrev"
                    @next-click="handleNext"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totalNum"
                    :page-size="pageSize"
                    @current-change="changeCurrentPage"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import MyHeader from "./header/header1.vue";
import realTimeApi from "@/api/smoke/realTime";
export default {
    data() {
        return {
            tableData: [],
            totalNum: 0,
            pageSize: 10,
            currentPage: 1,
        };
    },
    components: { MyHeader },
    created() {
        this.getRealTimeList();
    },
    methods: {
        getRealTimeList(seachData) {
            let params;
            if (seachData) {
                params = this.getParam(seachData)
            } else {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            }

}
            realTimeApi
                .findInTimeList(params)
                .then(({ list, total }) => {
                    list.forEach(e => {
                        e.AcquitAtStr = this.dateFormat("YYYY-mm-dd HH:MM", new Date(e.AcquitAt));
                        e.FanStatusStr = this.FanStatusStr(e.FanStatus)
                        e.FilterStatusStr = this.FanStatusStr(e.FilterStatus)
                        e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus)
                        e.StatusStr = this.StatusStr(e.Status)
                    });
                    this.tableData = list;
                    this.totalNum = total;
                })
                .catch((err) => this.$message.error(err));
        },
        exportInTime(seachData) {
            let params;
            if (seachData) {
                params = this.getParam(seachData)
            }
            realTimeApi
                .exportInTime(params)
                .then((res) => {
                  debugger
                    let time = new Date();
                    let deathdate = time.toLocaleDateString();
                    const blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel;charset=utf-8",
                    });
                    if (window.navigator.msSaveBlob) {
                        window.navigator.msSaveBlob(
                            blob,
                            deathdate + "监测总体情况报表" + ".xls"
                        );
                    } else {
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.download = deathdate + "监测总体情况报表" + ".xls";
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                    this.$message.success("操作成功");
                })
                .catch((err) => this.$message.error(err));
        },
        getParam(seachData) {
            let params;
            if (seachData) {
                const seachParams = seachData.seachData
                params = {
                    owner:
                        seachParams.owner == undefined
                            ? null
                            : seachParams.owner,
                    onlineStatus:
                        seachParams.onlineStatus == undefined
                            ? null
                            : seachParams.onlineStatus,
                    status: seachParams.status == undefined
                        ? null
                        : seachParams.status,
                    type:
                        seachParams.type == undefined
                            ? null
                            : seachParams.type,
                    startTime:
                        seachParams.alarmTime == undefined
                            ? null
                            : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[0]),
                    endTime:
                        seachParams.alarmTime == undefined
                            ? null
                            : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[1]),
                };
            }
            return params;
        },

        FanStatusStr(FanStatus) {
            switch (FanStatus) {
                case 1:
                    return "开"
                case 2:
                    return "关"
                default:
                    return "异常"
            }
        },
        OnlineStatusStr(Status) {
            switch (Status) {
                case 1:
                    return "在线"
                case 2:
                    return "离线"
                default:
                    return "异常离线"
            }
        },
        StatusStr(Status) {
            switch (Status) {
                case "NORMAL":
                    return "正常"
                case "ALARM":
                    return "预警"
                case "EXCESS":
                    return "超标"
                case "DOWN":
                    return "离线"
                default:
                    return "异常离线"
            }
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        },
    }
};
</script>

<style>
<style lang="scss" scoped>
.el-table {
    .operation {
        display: flex;
        color: var(--operation-color);
        .line {
            padding: 0 5px;
        }

        span:hover {
            cursor: pointer;
        }
    }
}
</style>