油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/test/TestNoData.vue

@@ -1,149 +1,1827 @@

<template>
  <div>
    <div style="margin: 5px;">
    <span style="color: #b1b3b8;" >实时数据</span>
  </div>
  <div class="exception-root-container">
    <!-- 菜单读标题 -->
    <div ref="h1" class="header-container">
      <span class="describe-info">店铺名选择：</span>
      <!-- 店铺名  级联 -->
      <ShopNameAndID
        @submit-id="(n) => (deviceId[1] = n)"
        :devId="全部"
      ></ShopNameAndID>

  <hr style="margin-top: 10px;"/>
  <div v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="8" v-for="device in devices" :key="device.id">
        <div class="dashboard">
          <div class="dashboard-title">设备编号为：{{ device.mnCode }}</div>
          <div ref="charts" class="echarts"></div>
          <div>
            <div class="data">当前数值：{{ device.value }}</div>
            <div class="data">产生时间：{{ device.time }}</div>
            <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '超标' : '' }}</div>
            <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '未超标' : '' }}</div>
      <!-- 异常类型选择 -->
      <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
      </ExceptionType>

      <!-- <div style="display: flex"> -->
      <!-- <span class="describe-time-text">起止时间：</span> -->
      <!-- 日期时间选择器 -->
      <TimeSelect @submit-time="giveTime"></TimeSelect>
      <!-- </div> -->
    </div>
    <div
      ref="h2"
      style="display: flex; margin-top: 2px; justify-content: right"
    >
      <!-- <span class="collapse-header-text">
              静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
            > -->
      <!-- 做成表单 -->
      <el-button
        type="primary"
        plain
        @click="showTable"
        style="margin-left: 20px"
        >查询</el-button
      >

      <!-- <el-button
        type="warning"
        plain
        @click="getAllData"
        style="margin-left: 20px"
        >查询全部</el-button
      > -->

      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击可导出Excel文件"
        placement="top-start"
      >
        <!-- 做成函数js文件 -->
        <el-icon
          class="iconExcel clickable"
          title="导出Excel文件"
          @click="exportDom"
        >
          <i-ep-Download />
          <!-- 导出为Excel -->
        </el-icon>
      </el-tooltip>
    </div>
    <div style="display: flex; justify-content: right">
      <span class="collapse-header-text">
        静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
      >
    </div>
    <br />

    <el-collapse ref="h3" v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="点击可折叠"
            placement="right-start"
          >
            <h4 class="collapse-header">异常分析</h4>
            <el-icon class="header-icon">
              <i-ep-info-filled />
            </el-icon>
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            content="点击可折叠"
            placement="right-start"
          >
          </el-tooltip>
        </template>
        <el-card class="box-card">
          <el-row :gutter="25">
            <el-col :span="8">
              <div style="display: flex">
                <img
                  src="@/assets/exceed.jpg"
                  style="width: 25px; height: 25px; margin-top: 5px"
                />
                <span
                  style="
                    font-size: 16px;
                    font-weight: bold;
                    margin-top: 4px;
                    margin-left: 4px;
                  "
                  >油烟浓度超标</span
                >
              </div>

              <div class="box-card-label">
                <el-scrollbar>
                  <span class="box-card-label">店铺数量：</span>
                  <span style="font-size: 20px"
                    >{{ exception0.length }} /{{ shopsTotal }}</span
                  >
                  <span style="margin-left: 150px; font-size: 14px">
                    占比：{{
                      ((exception0.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  >
                </el-scrollbar>
              </div>

              <hr />
              <div class="box-card-butcontainer">
                <el-card class="sub-box-card">
                  <el-scrollbar max-height="70px">
                    <ExceptionText
                      v-for="(item, index) in exception0"
                      :key="item"
                      :devId="item.devId"
                      exception-value="0"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                    >
                      {{ item.diName }}
                      <span
                        v-if="index < exception0.length - 1"
                        class="text-blank"
                        >,</span
                      >
                    </ExceptionText>
                  </el-scrollbar>
                </el-card>
              </div>
            </el-col>

            <el-col :span="8">
              <div style="display: flex">
                <img
                  src="@/assets/exception.jpg"
                  style="width: 25px; height: 25px; margin-top: 5px"
                />
                <span
                  style="
                    font-size: 16px;
                    font-weight: bold;
                    margin-top: 5px;
                    margin-left: 4px;
                  "
                  >供电异常</span
                >
              </div>
              <div class="box-card-label">
                <el-scrollbar>
                  <span class="box-card-label">店铺数量：</span>
                  <span style="font-size: 20px"
                    >{{ exception1.length }} /{{ shopsTotal }}</span
                  >
                  <span style="margin-left: 150px; font-size: 14px">
                    占比：{{
                      ((exception1.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  >
                </el-scrollbar>
              </div>

              <hr />

              <div>
                <el-card class="sub-box-card">
                  <el-scrollbar max-height="70px">
                    <ExceptionText
                      v-for="(item, index) in exception1"
                      :key="item"
                      :devId="item.devId"
                      exception-value="1"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                    >
                      {{ item.diName }}
                      <span
                        v-if="index < exception1.length - 1"
                        class="text-blank"
                        >,</span
                      >
                    </ExceptionText>
                  </el-scrollbar>
                </el-card>
              </div>
            </el-col>

            <el-col :span="8">
              <div style="display: flex">
                <img
                  src="@/assets/offline.jpg"
                  style="width: 25px; height: 25px; margin-top: 5px"
                />
                <span
                  style="
                    font-size: 16px;
                    font-weight: bold;
                    margin-top: 5px;
                    margin-left: 4px;
                  "
                  >掉线</span
                >
              </div>
              <div class="box-card-label">
                <el-scrollbar>
                  <span class="box-card-label">店铺数量：</span>
                  <span style="font-size: 20px"
                    >{{ exception2.length }} /{{ shopsTotal }}</span
                  >
                  <span style="margin-left: 150px; font-size: 14px">
                    占比：{{
                      ((exception2.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  >
                </el-scrollbar>
              </div>
              <hr />
              <div>
                <el-card class="sub-box-card">
                  <el-scrollbar max-height="70px">
                    <ExceptionText
                      v-for="(item, index) in exception2"
                      :key="item"
                      :devId="item.devId"
                      exception-value="2"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                    >
                      {{ item.diName }}
                      <span
                        v-if="index < exception2.length - 1"
                        class="text-blank"
                        >,</span
                      >
                    </ExceptionText>
                  </el-scrollbar>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-collapse-item>
    </el-collapse>
    <!-- <hr/>
 <br> -->
    <h4 class="table-text">异常数据</h4>
    <el-card class="table-page" v-show="!isNoData">
      <el-table
        ref="tableH"
        v-loading="loading"
        :data="displayData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        stripe
        border
        :height="tableHeight"
      >
        <el-table-column fixed prop="diName" label="店铺名称" width="340">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.diName">
              <div class="cell ellipsis">{{ row.diName }}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="devId" label="设备编号" width="230">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.devId">
              <div class="cell ellipsis">{{ row.devId }}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="exception" label="异常分类" width="150">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.exception">
              <div class="cell ellipsis">{{ row.exception }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="异常类型" width="150">
          <template #default="{ row }">
            <span v-if="row.exceptionType == '0'">油烟数据超标</span>
            <span v-else-if="row.exceptionType == '1'">疑似供电异常</span>
            <span v-else-if="row.exceptionType == '2'">掉线</span>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="地区" width="150">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.region">
              <div class="cell ellipsis">{{ row.region }}</div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="beginTime" label="开始时间">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.beginTime">
              <div class="cell ellipsis">{{ row.beginTime }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.endTime">
              <div class="cell ellipsis">{{ row.endTime }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="warning" @click="showDrawer(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        ref="h4"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
      />
    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
    <!-- 对话框 -->
    <div>
      <el-dialog v-model="centerDialogVisible" draggable align-center>
        <template #header>
          <div style="font-size: 17px">
            店铺名：{{ rowShopName }}
            <di style="margin-left: 40px">异常类型：</di>
            <span v-if="rowExceptionType == '0'">油烟数据超标</span>
            <span v-else-if="rowExceptionType == '1'">供电异常</span>
            <span v-else-if="rowExceptionType == '2'">掉线</span>
            <div style="margin-top: 10px">
              异常时间段：{{ rowBeginTime }} ~
              {{ rowEndTime }}
            </div>
          </div>
          <div class="dialog-button-position">
            <el-button
              type="danger"
              :disabled="isPreCantouch"
              @click="getPreviousRowData"
              >上条异常</el-button
            >
            <el-button
              type="danger"
              :disabled="isNextCantouch"
              @click="getNextRowData"
              >下条异常</el-button
            >
          </div>
        </template>

        <!-- 超标数据时 -->
        <!-- 折线图 -->

        <!-- 掉线 -->
        <div
          ref="chart1"
          v-show="isOfflineShow"
          style="
            width: 100%;
            height: 300px;
            /* min-width: 100px; */
            margin-bottom: 20px;
            margin-left: 10px;
            min-width: 350px;
          "
        ></div>

        <!-- 超标 -->
        <div
          ref="chart2"
          v-show="isExceedShow"
          style="
            width: 100%;
            height: 300px;
            /* min-width: 100px; */
            margin-bottom: 20px;
            margin-left: 10px;
            min-width: 350px;
          "
        ></div>
        <!-- <ExceptionTypeLineChart :allData="allChartData"></ExceptionTypeLineChart> -->

        <!--  -->
        <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
          <el-table
            :data="exceedingData"
            height="360"
            border
            style="margin-top: 25px"
          >
            <el-table-column fixed prop="diName" label="店铺名称" />
            <el-table-column prop="mvStatCode" label="设备编号" />

            <el-table-column prop="mvDataTime" label="采集时间" />
            <el-table-column
              prop="mvFumeConcentration2"
              label="油烟浓度(mg/m³)"
            />
          </el-table>
        </div>
        </div>
        
        
      </el-col>
    </el-row>
    加载
  </div>

        <el-tag type="success" class="mx-1" effect="dark" round
          ><span class="table-line-lable">异常记录： </span>
          <span class="table-line-num">{{ exceptionTotal }}条</span>
          <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
            (逻辑计算)</span
          >
        </el-tag>
        <!-- <el-tag type="success" class="mx-1" effect="dark" round v-show="rowExceptionType === '1'"
          ><span class="table-line-lable">表格行数： </span>
          <span class="table-line-num">{{ exceptionTotal }}</span></el-tag> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
import ExceptionText from '../sfc/ExceptionText.vue';
import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';

import * as echarts from 'echarts'
import axios from 'axios'
const ShopNameAndID = defineAsyncComponent(() =>
  import('../sfc/../sfc/ShopNameAndID.vue')
);

// 异步组件
// const ExceptionTypeLineChart = defineAsyncComponent(() =>
//   import('../sfc/ExceptionTypeLineChart.vue')
// )
export default {
  name: 'TablePage',
  components: {
    ExceptionType,
    TimeSelect,
    ShopNameAndID,
    ExceptionText
    // ExceptionTypeLineChart
  },
  data() {
    return {
      devices: [],
      loading:false, //加载中
    }
      //掉线或超标的图形展示
      isOfflineShow: false,
      isExceedShow: false,
      // 折线图展示
      isChartShow: false,
      // table元素
      tableRef: null,
      // 异常表格数据
      tableHeight: 300,
      // 空数据状态
      isNoData: false,
      // 弹出框中表格条数
      exceptionTotal: 0,
      // 无数据时的时间数组，元素相差10分钟
      // abnormalTimeTenMinute: [],
      // 店铺总数
      shopsTotal: 0,

      // ’上一条‘按钮是否可以被点击状态
      isPreCantouch: false,
      // ’下一条‘按钮是否可以被点击状态
      isNextCantouch: false,

      // 对话框是否展示
      centerDialogVisible: false,

      // 抽屉头部信息
      // 折线图对应的当前表格行数据
      // 店铺名
      rowShopName: '',
      // 异常类型
      rowExceptionType: '',
      // 异常开始时间
      rowBeginTime: '',
      // 异常结束时间
      rowEndTime: '',
      // 异常的设备编号
      rowMvStatCode: '',

      // 表格的一行数据
      rowTable: [],
      //拼接的所有数据
      allExceptionTimeData: [],
      // 无数据时增加的前30分钟数据
      beforeData: [],
      // 无数据时增加的后40分钟数据
      afterData: [],

      // 折线图实例
      chart1: null,
      chart2: null,
      // -1表示未选择表格的行
      selectedRowIndex: -1,

      // 默认选择的折叠面板编号
      activeNames: ['1'],
      // 异常时的表格
      abnormalTb: [],
      // 异常的起止时间
      abnormalBt: '',
      abnormalEt: '',
      // 是否展示时间轴  否
      isAbnormal: false,
      // 保存着异常类型0对应的店铺名称和设备编号
      exception0: [],
      // 保存着异常类型1对应的店铺名称和设备编号
      exception1: [],
      // 保存着异常类型2对应的店铺名称和设备编号
      exception2: [],
      // 加载动画
      loading: false,
      // 抽屉加载动画
      loadingDrawer: true,
      // 分页展示数据
      // 每页展示的数据
      displayData: [],
      // 存放后端返回的json数据
      jsonData: [],
      // 分页的起始索引
      startIndex: 0,
      // 当前页
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      total: 0,
      // 选择店铺名
      deviceId: [],
      deviceInfo: [],
      // 时间选择器开始时间
      beginTime: '',
      // 时间选择器结束时间
      endTime: '',
      // 异常表数据
      abnormalData: [],
      // 该时段的详细超标数据
      exceedingData: [],
      drawerVisible: false,
      // 表格的一行数据
      drawerData: {},
      // 抽屉方向，从右向左打开
      drawerDirection: 'rtl',
      optionsTime: [
        // 时间颗粒度
        {
          value: '10',
          label: '10分钟数据',
          disabled: true
        }
      ],
      // 店铺名 级联选择器
      optionsShop: [],
      // 异常类型选择器
      exceptionValue: [],
      exceptionOptions: [
        {
          value: '0',
          label: '油烟浓度超标'
        },
        {
          value: '1',
          label: '疑似供电异常'
        },
        {
          value: '2',
          label: '掉线'
        }
      ]
    };
  },
  methods: {
    fetchData() {
      const params = {
        params: {
          page: 1,
          per_page: 10
  // 监听  判断按钮是否可点击
  watch: {
    selectedRowIndex(newVaue) {
      // 处于表格的第一条数据 设置‘上一条’按钮不可点
      if (newVaue === 0) {
        this.isPreCantouch = true;
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.isNextCantouch == true) {
          this.isNextCantouch = false;
        }
      }
      axios.get('https://fyami.com.cn/device/min/value/real_time', params)
        .then(response => {
          this.devices = response.data.data
        })
        .catch(error => {
          console.error(error)
        })
      // 处于表格最后一条数据 设置‘下一条’按钮不可点
      else if (newVaue === this.displayData.length - 1) {
        this.isNextCantouch = true;
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.isPreCantouch == true) {
          this.isPreCantouch = false;
        }
      }
      // 处于表格的中间行 将按钮设置为可点击状态
      else {
        this.isPreCantouch = false;
        this.isNextCantouch = false;
      }
    },
    updateCharts() {
      for (let i = 0; i < this.devices.length; i++) {
        const device = this.devices[i]
        const chart = echarts.init(this.$refs.charts[i])
        
        const option = {
        title: {
          // text: '实时数据'

    // 当选择的时间发生变化时，异常分析部分的异常店铺数量同步变化
    beginTime() {
      this.getShopNames();
    },
    endTime() {
      this.getShopNames();
    },
    centerDialogVisible() {
      window.addEventListener('resize', this.updateChart);
    }
  },

  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();

    // 展示最近7天数据
    this.getRecentSevenDays();

    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
    window.addEventListener('resize', this.updateChart);
  },
  methods: {
    // 时间是否超过10分钟
    isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
      const date1 = new Date(dateString1);
      const date2 = new Date(dateString2);

      // 计算两个日期的时间差（毫秒）
      const timeDifferenceMs = Math.abs(date1 - date2);

      // 转换为分钟
      const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60));

      // 判断时间差是否大于10分钟
      return timeDifferenceMinutes > 10;
    },

    // 以10分钟为间隔返回时间字符串数组
    generateTimePoints(timePoints,yAxisData) {
      let updatedTimePoints = [];
      let yAxisDataAdressed = []
      for (let i = 0; i < timePoints.length; i++) {
        updatedTimePoints.push(timePoints[i]);
        yAxisDataAdressed.push(yAxisData[i])
        if (i < timePoints.length - 1) {
          let current = timePoints[i];
          let next = timePoints[i + 1];
          while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
            current = dayjs(current)
              .add(10, 'minute')
              .format('YYYY-MM-DD HH:mm:ss');
            updatedTimePoints.push(current);
            yAxisDataAdressed.push(null)
          }
        }
      }
      let obj = {}
      obj['time'] = updatedTimePoints
      obj['data'] = yAxisDataAdressed
      return obj;
    },

    isExceedOneMonth(dateStr1, dateStr2) {
      // 超过一个月，返回True，否则返回False
      // 将日期字符串转为日期对象
      const date1 = new Date(dateStr1);
      const date2 = new Date(dateStr2);

      // 获取两个日期的年、月、日
      const year1 = date1.getFullYear();
      const month1 = date1.getMonth();
      const day1 = date1.getDate();

      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();
      console.log(month1, month2);

      // 判断两个日期是否相差一个月
      if (year1 === year2) {
        // 年份相等，比较月份差值
        if (Math.abs(month1 - month2) === 1) {
          // 月份差值为1，还需要判断具体日期
          if (
            (month1 < month2 && day1 < day2) ||
            (month1 > month2 && day1 > day2)
          ) {
            return true;
          }
        }
      } else if (Math.abs(year1 - year2) === 1) {
        // 年份差值为1，比较月份和日期
        if (
          (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) ||
          (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2)
        ) {
          return true;
        }
      }

      // 默认返回false，表示两个日期字符串不相差一个月
      return false;
    },

    // 刚打开卡片时第一个图形不会自动伸缩 当点击上/下一条时会自动伸缩
    // 图形响应式变化
    updateChart() {
      this.$nextTick(() => {
        if (this.chart1) {
          this.chart1.resize();
        }
        if (this.chart2) {
          this.chart2.resize();
        }
      });
    },
    // 从时间选择器组件拿到开始和结束时间
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
    },

    // 异常的开始和结束时间。返回时间数组，从开始时间的后10分钟到结束时间为止。
    // 比如12:00:00 -13:00:00 所以返回的数组元素是 12:10:00 ,12:20:00,12:30:00....13:00:00
    descTenTime(begin, end) {
      // 保留结果
      let time = [];
      let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
      while (temp != end) {
        time.push(temp);
        temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
      }
      // 加上异常的结束时间
      time.push(temp);

      return time;
    },

    // 保存当前选择的行所有信息
    setinfo(index) {
      this.rowShopName = this.displayData[index].diName;
      this.rowExceptionType = this.displayData[index].exceptionType;
      this.rowBeginTime = this.displayData[index].beginTime;
      this.rowEndTime = this.displayData[index].endTime;
      this.rowMvStatCode = this.displayData[index].devId;
      console.log('行名字：', this.rowShopName);
      console.log('行名字：', this.rowExceptionType);
      console.log('行名字：', this.rowBeginTime);
      console.log('行名字：', this.rowEndTime);
    },
    // 供电异常和掉线时的表格数据
    setExceptionData() {
      // 清空，让历史数据条数隐藏，使无数据的标签条数显示出来
      // this.exceedingData=[]
      // 清空上次的数据，防止影响本次的展示数
      // this.abnormalTimeTenMinute = [];
      // 无数据时的时间数组 时间相差10分钟
      const abnormalTimeTenMinute = this.descTenTime(
        this.rowBeginTime,
        this.rowEndTime
      );

      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.exceedingData.push({
          mvStatCode: this.rowMvStatCode,
          diName: this.rowShopName,
          mvDataTime: abnormalTimeTenMinute[i],
          mvFumeConcentration2: ''
        });
      }

      // 全部数据加入
      // for (let i = 0; i < data.length; i++) {
      //   if (data[i] == null) {
      //     this.exceedingData.push({
      //       mvStatCode: this.rowMvStatCode,
      //       diName: this.rowShopName,
      //       mvDataTime: abnormalTimeTenMinute[i],
      //       mvFumeConcentration2: ''
      //     });
      //   }
      //   else {
      //     this.exceedingData.push(data[i]);
      //   }
      // }

      // 保存无数据时表格条数
      this.exceptionTotal = abnormalTimeTenMinute.length;
    },
    // 点击表格的行时
    selectTableRow(row) {
      // 获取当前行的索引
      this.selectedRowIndex = this.displayData.indexOf(row);
      // 进入抽屉页面更新头部数据
      this.setinfo(this.selectedRowIndex);
      console.log('选择中行：', this.selectedRowIndex);
    },

    // 获取获取表格上一行数据
    getPreviousRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // ’下一条‘的按钮恢复点击
        // this.isNextCantouch = false

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1;
        console.log('上', this.selectedRowIndex);

        console.log(this.displayData[this.selectedRowIndex]);
        //请求数据 改变exceedingData
        this.setinfo(this.selectedRowIndex);
        let params = {};
        if (this.drawerData.devId) {
          params['devId'] = this.displayData[this.selectedRowIndex].devId;
        }
        if (this.drawerData.beginTime) {
          params['beginTime'] =
            this.displayData[this.selectedRowIndex].beginTime;
        }
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }

        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            // this.chart = null;
            this.drawChart();
            this.exceptionTotal = this.exceedingData.length;
          });
      }
      //表格的第一行，则上一条无数据
      else if (this.selectedRowIndex === 0) {
        console.log(null);
      }
    },

    // 获取获取表格下一行数据
    getNextRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // ’上一条‘的按钮恢复点击
        // this.isPreCantouch = false

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1;
        console.log('上', this.selectedRowIndex);

        console.log(this.displayData[this.selectedRowIndex]);
        //请求数据 改变exceedingData
        this.setinfo(this.selectedRowIndex);
        let params = {};
        if (this.drawerData.devId) {
          params['devId'] = this.displayData[this.selectedRowIndex].devId;
        }
        if (this.drawerData.beginTime) {
          params['beginTime'] =
            this.displayData[this.selectedRowIndex].beginTime;
        }
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            console.log('返回的异常数据为：');
            console.log(this.exceedingData);
            this.drawChart();
            this.exceptionTotal = this.exceedingData.length;
          });
      }
      //表格的第一行，则上一条无数据
      else {
        console.log(null);
        // 警告
        // ElMessage.info('已是该页最后一条数据');
        // ’下一条‘的按钮不可点击
        // this.isNextCantouch = true
      }
    },

    // ‘查看详情’ 弹出框部分
    showDrawer(row) {
      // 计算当前行的索引
      this.selectTableRow(row);

      this.rowTable = row;
      console.log('赋值后row', this.rowTable);
      console.log('赋值后row', this.rowTable);
      // 展开抽屉
      // 表格的行数据以对象形式给drawerData
      this.drawerData = row;

      this.centerDialogVisible = true;
      // this.drawerVisible = true;
      console.log(this.drawerData);
      // 根据行数据请求详细超标数据渲染折线图
      let params = {};
      if (this.drawerData.devId) {
        params['devId'] = this.drawerData.devId;
      }
      if (this.drawerData.beginTime) {
        params['beginTime'] = this.drawerData.beginTime;
      }
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }
      axiosInstanceInstance
        .get('/fume/exceed', { params: params })
        .then((response) => {
          // 保存返回的超标数据
          this.exceedingData = response.data.data;
          this.loadingDrawer = !this.loadingDrawer;
          // this.total = this.exceedingData.length;
          // this.handleCurrentChange(1); // 默认显示第一页
          console.log('返回的异常数据为：');
          console.log(this.exceedingData);
          this.drawChart();
          this.exceptionTotal = this.exceedingData.length;
        });
    },

    // 用户根据输入的条件查询
    showTable() {
      if (this.isExceedOneMonth(this.beginTime, this.endTime)) {
        alert('时间跨度不能超过一个月');
        return;
      }
      let params = {};
      // params['page'] = this.startIndex
      // params['pageSize'] = 10
      if (this.deviceId[1]) {
        params['devId'] = this.deviceId[1];
      }
      if (this.exceptionValue.length != 0) {
        params['exceptionValue'] = this.exceptionValue.join();
      }
      console.log('原', this.exceptionValue);
      console.log('处理', this.exceptionValue.join());
      if (this.beginTime) {
        params['beginTime'] = this.beginTime;
      }
      if (this.endTime) {
        params['endTime'] = this.endTime;
      }
      this.loading = true;
      axiosInstanceInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          this.abnormalData = response.data.data;
          this.total = this.abnormalData.length;
          this.loading = false;
          if (response.data.data.length == 0) {
            ElMessage('该时段无数据');
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 改变每页显示数目时跳到第一页
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      const startIndex = (val - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;

      this.displayData = this.abnormalData.slice(startIndex, endIndex);
    },

    //相差多少个十分钟  计算中并不包括开始时间，但包括结束时间。
    diffTenMinutesNum(beginNormal, endNormal) {
      // 将开始时间和结束时间转换为dayjs对象
      const start = dayjs(beginNormal);
      const end = dayjs(endNormal);

      // 计算结束时间减去开始时间中间相差多少个十分钟
      const diffInMinutes = end.diff(start, 'minute');
      const diffInTenMinutes = Math.floor(diffInMinutes / 10);
      console.log('几个10分钟', diffInTenMinutes);
      return diffInTenMinutes;
    },

    // 供电异常和掉线的折线图
    linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
      // 超标图形chart2实例为空
      if (this.chart2 != null) {
        this.chart2 == null;
      }
      if (this.chart1 == null) {
        this.chart1 = echarts.init(this.$refs.chart1);
      }
      this.chart1.setOption({
        tooltip: {},
        toolbox: {
          // 工具栏
          feature: {
            dataZoom: {
              // 区域缩放
              yAxisIndex: 'none'
            },

            // 保存为图片
            saveAsImage: {}
          }
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}'
        xAxis: {
          data: xAxisData1,
          name: '时间'
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
            // formatter:'{value} %'
          },
          name: 'mg/m³'
        },
        series: [
          {
            name: '实时数据',
            type: 'gauge',
            detail: { formatter: '{value}' },
            data: [{ 
              value: device.value, 
              name: '油烟浓度' ,
              itemStyle: {
                color:device.value >= 1?'red' :'green'
            name: '油烟数据',
            type: 'line',
            data: fumeExceeding,
            markLine: {
              silent: true,

              data: [
                // 标注无数据时间段的效果，将这个时间段的数轴部分变为红色
                {
                  name: '无数据',
                  xAxis: abnormalBeginTime
                },
                {
                  xAxis: abnormalEndTime
                }
              ],
              lineStyle: {
                color: 'red'
              }
            }],
            max:2
            }
          }
        ]
      });
    },

    // 展示折线图
    drawChart() {
      if (
        this.exceedingData.length === 0 ||
        this.rowExceptionType === '1' ||
        this.rowExceptionType === '2'
      ) {
        this.isOfflineShow = true;
        this.isExceedShow = false;

        //  // 重构表格 手动填充
        //  this.setExceptionData();
        // 展示
        this.isAbnormal = true;
        // 拼接日期
        //异常的开始时间
        this.abnormalBt = this.displayData[this.selectedRowIndex].beginTime;
        //异常的结束时间
        this.abnormalEt = this.displayData[this.selectedRowIndex].endTime;
        console.log(
          '供电开始',
          this.displayData[this.selectedRowIndex].beginTime
        );
        console.log(
          '供电结束',
          this.displayData[this.selectedRowIndex].endTime
        );
        // 往前30分钟
        const before30MinBegin = dayjs(this.abnormalBt)
          .subtract(30, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        // 后一段的开始时间
        const after10MinBegin = dayjs(this.abnormalEt)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        // 往后40分钟
        const after40MinEnd = dayjs(this.abnormalEt)
          .add(40, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');

        let paramsBefore = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: before30MinBegin,
          endTime: this.displayData[this.selectedRowIndex].beginTime
        };
        let paramsAfter = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: after10MinBegin,
          endTime: after40MinEnd
        };

        // 请求前半段
        axiosInstanceInstance
          .get('/fume/history', { params: paramsBefore })
          .then((result) => {
            this.beforeData = result.data.data;
            // 请求后半段
            axiosInstanceInstance
              .get('/fume/history', { params: paramsAfter })
              .then((result) => {
                this.afterData = result.data.data;
                //用null填充中异常无数据的时间
                //相差几个10分钟
                const TenMinuteNum = this.diffTenMinutesNum(
                  this.abnormalBt,
                  this.abnormalEt
                );
                //保存空值
                let tempArr = [];
                for (let i = 0; i < TenMinuteNum; i++) {
                  tempArr.push(null);
                }
                console.log('填充数组为：', tempArr);

                console.log('前后数据为：', this.beforeData, this.afterData);
                this.allExceptionTimeData = [
                  ...this.beforeData,
                  ...tempArr,
                  ...this.afterData
                ];
                console.log('合并后数组为', this.allExceptionTimeData);

                // 重构表格 手动填充
                this.setExceptionData(this.allExceptionTimeData);

                //展示图形
                // x轴日期时间
                let dateList = [];
                // y轴 超标油烟浓度
                let fumeExceeding = [];
                // 连续的时间
                let dateListTemp = []
                let fumeExceedingTemp = []

                for (let i = 0; i < this.allExceptionTimeData.length; i++) {
                  if (this.allExceptionTimeData[i] == null) {
                    //x轴日期
                    //无数据时， 为前面时间点增加10分钟
                    dateList.push(
                      dayjs(dateList[dateList.length - 1])
                        .add(10, 'minute')
                        .format('YYYY-MM-DD HH:mm:ss')
                    );
                    // 超标油烟浓度
                    fumeExceeding.push(null);
                  } else {
                    //x轴日期
                    dateList.push(this.allExceptionTimeData[i].mvDataTime);
                    // 超标油烟浓度
                    fumeExceeding.push(
                      this.allExceptionTimeData[i].mvFumeConcentration2
                    );
                  }
                }
                // 时间连续
                //  for(let i =0;i<dateList.length-1;i++){
                //   if(this.isTimeDifferenceGreaterThan10Minutes(dateList[i],dateList[i+1])){
                //     dateListTemp.push(dayjs(dateList[i]).add(10,'minute').format('YYYY-MM-DD HH:mm:ss'))
                //     fumeExceedingTemp.push(null)
                //   }else{
                //     dateListTemp.push(dateList[i])
                //     fumeExceedingTemp.push(fumeExceeding[i])
                //   }
                //  }
                 // 时间连续
                let objData= this.generateTimePoints(dateList,fumeExceeding);
                dateListTemp = objData['time']
                fumeExceedingTemp = objData['data']
                
                //展示折线图
                // this.chart = null;
                // console.log('x轴的日期为：',dateList);
                // console.log('开始和结束日期为：',this.abnormalBt,this.abnormalEt);
                let dateList1 = [];
                dateListTemp.forEach((item) => {
                  dateList1.push(dayjs(item).format('HH:mm'));
                });
                this.abnormalBt = dayjs(this.abnormalBt).format('HH:mm');
                this.abnormalEt = dayjs(this.abnormalEt).format('HH:mm');

                // console.log('变化的数据：',dateList1);
                // console.log('变化的数据：',this.abnormalBt);
                // console.log('变化的数据：',this.abnormalEt);

                if (this.char1) {
                  this.char1.dispose();
                }

                this.linechart(
                  dateList1,
                  this.abnormalBt,
                  this.abnormalEt,
                  fumeExceedingTemp
                );
              });
          });

      }

      // ----------------------------------------
      // 油烟浓度超标时的折线图
      else {
        // 图形展示
        this.isExceedShow = true;
        this.isOfflineShow = false;
        // // 清空，让无数据条数隐藏，使历史数据的标签条数显示出来
        // this.abnormalTimeTenMinute = []
        this.isAbnormal = false;
        // x轴日期时间
        let dateList = [];
        // y轴 超标油烟浓度
        let fumeExceeding = [];
        this.exceedingData.forEach((item) => {
          //x轴日期
          dateList.push(item.mvDataTime);
          // 超标油烟浓度
          fumeExceeding.push(item.mvFumeConcentration2);
        });
        // // 存放该时间段每隔十分钟一次的时间点
        // const xAxisData = [];
        // const xAxisData1 = [];
        let beginTime = new Date(dateList[0]);
        const endTime = new Date(dateList[dateList.length - 1]);

        let beginT = dayjs(beginTime).format('HH:mm');
        let endT = dayjs(endTime).format('HH:mm');
        // 往前30分钟
        const before30MinBegin = dayjs(beginTime)
          .subtract(30, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        const before10MinBegin = dayjs(beginTime)
          .subtract(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');

        // 往后40分钟
        const after30MinEnd = dayjs(endTime)
          .add(30, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        const after10MinEnd = dayjs(endTime)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');

        let paramsBefore = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: before30MinBegin,
          endTime: before10MinBegin
        };
        let paramsAfter = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: after10MinEnd,
          endTime: after30MinEnd
        };
        // 请求前半段
        axiosInstanceInstance
          .get('/fume/history', { params: paramsBefore })
          .then((result) => {
            this.beforeData = result.data.data;
            // 请求后半段
            axiosInstanceInstance
              .get('/fume/history', { params: paramsAfter })
              .then((result) => {
                this.afterData = result.data.data;
                let before = [];
                let after = [];
                console.log('请求后的数据为', this.beforeData, this.afterData);

                // 前后区间只显示距离超标区间时间最近的浓度小于1的时间点
                for (let i = this.beforeData.length - 1; i >= 0; i--) {
                  if (this.beforeData[i].mvFumeConcentration2 >= 1) {
                    break;
                  }
                  if (this.beforeData[i].mvFumeConcentration2 < 1) {
                    before.unshift(this.beforeData[i]);
                  }
                }
                console.log('before:', before);
                for (let i = this.afterData.length - 1; i >= 0; i--) {
                  if (this.afterData[i].mvFumeConcentration2 >= 1) {
                    break;
                  }
                  if (this.afterData[i].mvFumeConcentration2 < 1) {
                    after.unshift(this.afterData[i]);
                  }
                }
                console.log('after:', after);
                this.allExceptionTimeData = [
                  ...before,
                  ...this.exceedingData,
                  ...after
                ];

                // x轴日期时间
                let dateList1 = [];

                // y轴 超标油烟浓度
                let fumeExceeding1 = [];
                for (let i = 0; i < this.allExceptionTimeData.length; i++) {
                  if (this.allExceptionTimeData[i] == null) {
                    //x轴日期
                    //无数据时， 为前面时间点增加10分钟
                    dateList1.push(
                      dayjs(dateList1[dateList1.length - 1])
                        .add(10, 'minute')
                        .format('YYYY-MM-DD HH:mm:ss')
                    );
                    // 超标油烟浓度
                    fumeExceeding1.push(null);
                  } else {
                    //x轴日期
                    dateList1.push(this.allExceptionTimeData[i].mvDataTime);
                    // 超标油烟浓度
                    fumeExceeding1.push(
                      this.allExceptionTimeData[i].mvFumeConcentration2
                    );
                  }
                }
                let dateListLine = [];
                let fumeExceedingTemp = [];

                console.log('处理前数据为：', dateList1);
               

                // 颗粒度10分钟时间连续
                let objData= this.generateTimePoints(dateList1,fumeExceeding1);
                dateListLine = objData['time']
                fumeExceedingTemp = objData['data']
        
        chart.setOption(option)
                console.log('处理后时间为：', dateListLine);
                console.log('处理后数据为：', fumeExceedingTemp);

                // 提取时间区间内的数据索引
                let startIndex = dateListLine.findIndex(
                  (item) => item === dateList[0]
                );
                let endIndex = dateListLine.findIndex(
                  (item) => item === dateList[dateList.length - 1]
                );

                let dateListTemp = [];
                dateListLine.forEach((item) => {
                  dateListTemp.push(dayjs(item).format('HH:mm'));
                });

                // 供电异常或掉线图形chart1实例为空
                if (this.chart1 != null) {
                  this.chart1 == null;
                }
                if (this.chart2 == null || this.chart2 == undefined) {
                  this.chart2 = echarts.init(this.$refs.chart2);
                }
                console.log(dateListTemp);
                console.log(fumeExceedingTemp)
                let temp = fumeExceedingTemp.map((item) => {
                        if (item >= 1) {
                          return {
                            value: item,
                            itemStyle: {
                              color: 'red'
                            }
                          };
                        }
                        return item;
                      })
                console.log(temp);
                this.chart2.setOption({
                  tooltip: {},
                  toolbox: {
                    // 工具栏
                    feature: {
                      dataZoom: {
                        // 区域缩放
                        yAxisIndex: 'none'
                      },
                      // 保存为图片
                      saveAsImage: {}
                    }
                  },
                  xAxis: {
                    data: dateListTemp,
                    name: '时间'
                  },
                  yAxis: {
                    type: 'value',
                    axisLabel: {
                      show: true,
                      interval: 'auto'
                      // formatter:'{value} %'
                    },
                    name: 'mg/m³'
                  },
                  visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: [
                      {
                        lte: startIndex,
                        color: 'green'
                      },
                      {
                        gt: startIndex,
                        lte: endIndex,
                        color: 'red'
                      },
                      {
                        gt: endIndex,
                        lte: dateList1.length - 1,
                        color: 'green'
                      }
                    ]
                  },
                  series: [
                    {
                      name: '油烟浓度',
                      type: 'line',
                      data: temp,

                      markArea: {
                        itemStyle: {
                          color: 'rgba(255, 173, 177, 0.4)'
                        },
                        data: [
                          [
                            {
                              name: '超标时间段',
                              xAxis: beginT
                            },
                            {
                              xAxis: endT
                            }
                          ]
                        ]
                      },
                      markLine: {
                        symbol: 'none',
                        itemStyle: {
                          // 基线公共样式
                          normal: {
                            lineStyle: {
                              type: 'dashed'
                            },
                            label: {
                              show: true,
                              position: 'end',
                              formatter: '{b}'
                            }
                          }
                        },
                        data: [
                          {
                            name: '超标',
                            type: 'average',
                            yAxis: 1,
                            lineStyle: {
                              // color: '#ff0000'
                              color: 'red'
                            }
                          }
                        ]
                      }
                    }
                  ]
                });
              });
          });
      }
      console.log('调用了！');
    },
    getDeviceInfo() {
      // 级联下拉框数据 从接口中动态获取
      axiosInstanceInstance.get('/fume/device').then((result) => {
        this.deviceInfo = result.data.data;
        // 获取到总的店铺数量
        this.shopsTotal = result.data.data.length;
        this.deviceInfo.forEach((item) => {
          this.optionsShop[this.optionsShop.length] = {
            value: item.diName,
            label: item.diName,
            children: [
              {
                value: item.diCode,
                label: item.diCode
              }
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
      // 导出为Excel文件
      const fields = [
        'devId',
        'exceptionType',
        'region',
        'beginTime',
        'endTime'
      ];
      const itemsFormatted = this.abnormalData.map((item) => {
        const newItem = {};
        fields.forEach((field) => {
          newItem[field] = item[field];
        });
        return newItem;
      });
      // 创建xlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
      // 编辑表头行       修改表头
      xls['A1'].v = '设备编号';
      xls['B1'].v = '异常类型';
      xls['C1'].v = '地区';
      xls['D1'].v = '开始时间';
      xls['E1'].v = '结束时间';
      // 创建workbook，并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
      // 将workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, '分析数据.xlsx');
    },

    // 查询全部异常表数据
    // getAllData() {
    //   this.isNoData = false;
    //   this.loading = true;
    //   axiosInstanceInstance.get('/fume/abnormal').then((result) => {
    //     this.abnormalData = result.data.data;
    //     this.loading = false;
    //     this.total = this.abnormalData.length;
    //     if (result.data.data.length == 0) {
    //       ElMessage('该时段无数据')
    //       this.isNoData = true;
    //       return;
    //     }
    //     this.isNoData = false;
    //     // 默认显示第一页
    //     this.handleCurrentChange(1);
    //   });

    //   // 得到异常表的最早和最晚时间
    //   setTimeout(() => {
    //     axiosInstanceInstance.get('/fume/time').then((result) => {
    //       this.beginTime = result.data.data[0].beginTime;
    //       this.endTime = result.data.data[0].endTime;
    //       // console.log('be,end',this.beginTime,this.endTime);
    //     });
    //   }, 500);
    // },

    getAbnormalDataByClick(val) {
      this.abnormalData = val;
      this.total = this.abnormalData.length;
      // 默认显示第一页
      this.handleCurrentChange(1);
    },

    // 根据异常类型返回店铺名称和设备编号
    // 比如油烟超标对应的所有店铺名称和设备编号（已去除重复的店铺名）
    getShopNames() {
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception1 = result.data.data;
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception2 = result.data.data;
        });
    },

    // 页面加载时默认展示7天异常表数据
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
      this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
      // 给时间选择器设置默认时间
      // this.beginTime = dayjs()
      //   .subtract(3, 'week')
      //   .format('YYYY-MM-DD HH:mm:ss');
      // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');

      // this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      // this.oneWeekAgoDateTime = dayjs().subtract(1,'week').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.currentDateTime, this.oneWeekAgoDateTime);
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      axiosInstanceInstance
        .get('/fume/abnormalone', { params: params })
        .then((response) => {
          if (response.data.data.length == 0) {
            ElMessage('该时段无数据');
            return;
          }
          // 保存返回的
          this.abnormalData = response.data.data;
          // 分页
          this.total = this.abnormalData.length;
          // 默认显示第一页
          this.handleCurrentChange(1);
          this.loading = false;
        });
    }
  },
  mounted() {
    this.fetchData()
    this.loading = true
    setInterval(() => {
      this.updateCharts()
    }, 30000)    //每分钟（30秒）调用一次
    this.loading = false
  },
  created() {
    // 监听窗口大小变化，动态调整仪表盘布局
    window.addEventListener('resize', this.updateCharts)
  },
  beforeUnmount() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.updateCharts)
  }
}
};
</script>

<style scoped>
.dashboard {
  margin-bottom: 20px;
.exception-root-container {
  margin: 20px;
  padding: 10px;
  border: 1px;
  height: 615px;
  /* min-height: 80vh;
  min-width: 100vh; */
}
.header-container {
  display: flex;
  /* flex-wrap: wrap;
    align-items: center; */
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-title {
  font-size: 20px;
.iconExcel {
  font-size: 25px;
  margin-left: 20px;
  bottom: -6px;
}

/* 可鼠标箭头变为可点击状态 */
.clickable {
  cursor: pointer;
}
.card-header {
  margin: 0;
}

body {
  margin: 0;
}
.exception-divider-rowline {
  margin: 10px 0px;
}
/* 异常分析数据与按钮 */
.exception-container {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
  z-index: 9;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 10px;
  text-align: center;
  padding: 10px 0;
  background-color: #f5f7fa;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.collapse-header {
  margin-left: 5px;
  font-size: 18px;
}
.collapse-header-text {
  /* margin-right: 150px; */
  margin-top: 5px;
  font-size: 14px;
  color: gray;
}

.echarts {
  height: 300px;
.box-card-label {
  font-size: 14px;
  white-space: nowrap;
  /* overflow-x: auto; */
}
:deep().el-card {
  border-radius: 9px;
}
/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
  height: 98%;
  /* 不出现滚动条 */
  overflow-y: hidden;
  border-radius: 9px;
}
:deep().table-page .el-card__body {
  /* padding: 0px; */
}
.table-text {
  font-size: 18px;
  margin: 5px 0px 10px 4px;
}
.text-blank {
  margin-right: 10px;
}
/* 店铺名选择文本 */
.describe-info {
  margin-top: 5px;
  font-weight: bold;
  white-space: nowrap;
}
/* 时间选择文本 */
.describe-time-text {
  margin-left: 30px;
  margin-top: 5px;
  font-weight: bold;
}

/* 超标 文字效果*/
.status {
    font-size: 18px;
    color: #FF4D4F;
    font-weight: bold;
  }
  
  .exceed {
    color: #FF4D4F;
  }
  
/* 未超标 */
  .status1 {
    font-size: 18px;
    color: #1de01d;
    font-weight: bold;
  }
  
  .exceed1 {
    color:  #1de01d;
  }
/* 异常表格下标签中的数组 */
.table-line-num {
  font-weight: bold;
  color: black;
}
.button_info.el-button_inner {
  text-align: left;
}
:deep().el-collapse .el-collapse-item__content {
  padding-bottom: 0px;
}
.box-card {
  height: 190px;
}
:deep().box-card .el-card__body {
  /* padding: 5px; */
}
.sub-box-card {
  height: 100px;
  border: 0px;
}
:deep().sub-box-card .el-card__body {
  /* padding: 0px; */
}
.mx-1 {
  margin-bottom: 0px;
}
.dialog-button-position {
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>