zmc
2023-08-15 d58be9584f409e7d198fd34982155331d6710f1f
src/views/ExceedingFume.vue
@@ -1,330 +1,380 @@
<template>
  <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>
  <el-row ref="h1">
    <el-col>
      <!-- 菜单读标题 -->
      <div ref="h1" class="header-container">
        <span class="describe-info">店铺名选择:</span>
        <!-- 店铺名  级联 -->
        <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>
      <!-- 异常类型选择 -->
      <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
      </ExceptionType>
        <!-- 异常类型选择 -->
        <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
        <TimeSelect @submit-time="giveTime"></TimeSelect>
      </div>
      <div
        ref="h2"
        style="display: flex; margin-top: 2px; justify-content: right"
      >
      <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"
        <el-button
          type="primary"
          plain
          @click="showTable"
          style="margin-left: 20px"
          :loading="button.queryButton"
          >查询</el-button
        >
          <i-ep-Download />
          <!-- 导出为Excel -->
        </el-icon>
      </el-tooltip>
    </div>
    <div style="display: flex; justify-content: right">
      <span class="collapse-header-text">
              静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
        <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; margin-right: 40px">
        <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"
            >
    </div>
    <br />
              <h4 class="collapse-header">异常分析</h4>
              <el-icon class="header-icon">
                <i-ep-info-filled />
              </el-icon>
            </el-tooltip>
    <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>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="点击可折叠"
            placement="right-start"
          >
                <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>
      <h4 class="table-text">异常数据</h4>
    </el-col>
  </el-row>
  <el-card class="table-page" v-show="!isNoData">
    <el-table
      ref="tableH"
      v-loading="loading"
      :data="displayData"
      style="width: 100%"
      border
      :height="tableHeight"
      :cell-class-name="tableCellClassName"
    >
      <el-table-column prop="diName" label="店铺名称">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.diName">
            <div class="cell ellipsis">{{ row.diName }}</div>
          </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">
                <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
                >
              </div>
      </el-table-column>
              <hr />
              <div class="box-card-butcontainer">
                <el-card class="sub-box-card">
                <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-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">
                <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
                >
              </div>
              <hr />
              <div>
                <el-card class="sub-box-card">
                <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-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">
                <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
                >
              </div>
              <hr />
              <div>
                <el-card class="sub-box-card">
                <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-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
        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>
      <el-table-column prop="devId" label="设备编号">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.devId">
            <div class="cell ellipsis">{{ row.devId }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
        <!-- 超标数据时 -->
        <!-- 折线图 -->
        <div
          ref="chart"
      <el-table-column prop="exception" label="异常分类">
        <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="异常类型">
        <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="地区">
        <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="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            class="table-button"
            @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 }}
          <span style="margin-left: 40px">异常类型:</span>
          <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"
            :loading="button.preButton"
            :disabled="isPreCantouch || banTouch"
            @click="getPreviousRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :loading="button.afterButton"
            :disabled="isNextCantouch || banTouch"
            @click="getNextRowData"
            >下条异常</el-button
          >
        </div>
      </template>
      <!-- 超标数据时 -->
      <!-- 折线图 -->
      <!-- 掉线 -->
      <!-- <div
          ref="ref"
          v-show="isOfflineShow"
          style="
            width: 100%;
            height: 300px;
@@ -333,51 +383,53 @@
            margin-left: 10px;
            min-width: 350px;
          "
        ></div>
        ></div> -->
        <!--  v-show="!isAbnormal" -->
        <!-- 表格 -->
      <ExceptionTypeLineChart
        :option="option"
        :is-open-dialog="centerDialogVisible"
        v-loading="chartLoading"
      ></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="设备编号" />
      <!--  -->
      <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>
          <el-table-column prop="mvDataTime" label="采集时间" />
          <el-table-column
            prop="mvFumeConcentration2"
            label="油烟浓度(mg/m³)"
          />
        </el-table>
      </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>
      <el-tag type="success" class="mx-1" effect="dark" round
        ><span class="table-line-lable" v-show="rowExceptionType == '0'"
          >异常记录:
        </span>
        <span v-show="rowExceptionType == '1' || rowExceptionType == '2'"
          >缺失数据:</span
        >
        <span class="table-line-num">{{ exceptionTotal }}条</span>
        <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
          (逻辑计算)</span
        >
      </el-tag>
    </el-dialog>
  </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';
@@ -385,22 +437,42 @@
const ShopNameAndID = defineAsyncComponent(() =>
  import('../sfc/../sfc/ShopNameAndID.vue')
);
//  异常图形异步组件
const ExceptionTypeLineChart = defineAsyncComponent(() =>
  import('../sfc/ExceptionTypeLineChart.vue')
);
export default {
  name: 'TablePage',
  components: {
    ExceptionType,
    TimeSelect,
    ShopNameAndID,
    ExceptionText
    ExceptionText,
    ExceptionTypeLineChart
  },
  data() {
    return {
      // 折线图加载中
      chartLoading:false,
      button:{
        // 查询按钮
        queryButton:false,
        // 上一条按钮
        preButton:false,
        // 下一条按钮
        afterButton:false,
        //
        banTouch:0
      },
      // 异常折线图的配置
      option: {},
      // 折线图展示
      isChartShow: false,
      // table元素
      tableRef:null,
      tableRef: null,
      // 异常表格数据
      tableHeight:300,
      tableHeight: 300,
      // 空数据状态
      isNoData: false,
      // 弹出框中表格条数
@@ -440,8 +512,6 @@
      // 无数据时增加的后40分钟数据
      afterData: [],
      // 折线图实例
      chart: null,
      // -1表示未选择表格的行
      selectedRowIndex: -1,
@@ -465,7 +535,8 @@
      // 抽屉加载动画
      loadingDrawer: true,
      // 分页展示数据
      // 每页展示的数据
      // 异常表的数据
      displayData: [],
      // 存放后端返回的json数据
      jsonData: [],
@@ -485,7 +556,7 @@
      endTime: '',
      // 异常表数据
      abnormalData: [],
      // 该时段的详细超标数据
      // 弹出的对话框中的异常表格数据
      exceedingData: [],
      drawerVisible: false,
      // 表格的一行数据
@@ -503,38 +574,24 @@
      // 店铺名 级联选择器
      optionsShop: [],
      // 异常类型选择器
      exceptionValue: [],
      exceptionOptions: [
        {
          value: '0',
          label: '油烟浓度超标'
        },
        {
          value: '1',
          label: '疑似供电异常'
        },
        {
          value: '2',
          label: '掉线'
        }
      ]
      exceptionValue: []
    };
  },
  // 监听  判断按钮是否可点击
  watch: {
    selectedRowIndex(newVaue) {
      // 处于表格的第一条数据 设置‘上一条’按钮不可点
      if (newVaue === 0) {
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      if (newVaue === this.displayData.length - 1) {
        this.isPreCantouch = true;
        //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁
        //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.isNextCantouch == true) {
          this.isNextCantouch = false;
        }
      }
      // 处于表格最后一提哦啊数据 设置‘下一条’按钮不可点
      else if (newVaue === this.displayData.length - 1) {
      // 处于表格第一条数据 设置‘下一条’按钮不可点
      else if (newVaue === 0) {
        this.isNextCantouch = true;
        //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁
        if (this.isPreCantouch == true) {
          this.isPreCantouch = false;
        }
@@ -552,45 +609,138 @@
    },
    endTime() {
      this.getShopNames();
    },
    centerDialogVisible() {
      window.addEventListener('resize', this.updateChart);
    }
  },
  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();
    // 展示最近7天数据
    this.getRecentSevenDays();
    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
    this.calcTableHeight();
    window.addEventListener('resize', this.updateChart);
    // this.tableHeight = this.calcTableHeight()
  },
  methods: {
    // calcTableHeight() {
    //   const h1 = this.$refs.h1.offsetHeight;
    //   const h2 = this.$refs.h2.offsetHeight;
    //   const h3 = this.$refs.h3.$el.offsetHeight;
    //   const h4 = this.$refs.h4.$el.offsetHeight;
    //   // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
    //   return `calc(100vh - ${h1}px - ${h2}px- ${h3}px - ${h4}px  - 60px - var(--el-main-padding) * 2)`;
    // },
    warn() {
      alert('点击了');
    // 功能:改变表格某个单元格的颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
     if(columnIndex == 3){
        if (row.exceptionType == '0') {
          return 'exceeding-row';
        } else if (row.exceptionType == '1') {
          return 'abnormal-power-supply';
        } else if (row.exceptionType == '2') {
          return 'disconnect';
        }
     }
    },
    //功能: 动态计算表格高度
    calcTableHeight() {
      const h1 = this.$refs.h1.$el.offsetHeight;
      const h2 = this.$refs.h4.$el.offsetHeight;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
    },
    //功能: 时间是否超过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();
      // 判断两个日期是否相差一个月
      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.chart) {
          this.chart.resize();
        }
      });
    },
    // updateChart() {
    //   this.$nextTick(() => {
    //     if (this.chart1) {
    //       this.chart1.resize();
    //     }
    //     if (this.chart2) {
    //       this.chart2.resize();
    //     }
    //   });
    // },
    // 从时间选择器组件拿到开始和结束时间
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数)
@@ -598,11 +748,15 @@
      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
    // 参数:异常的开始和结束时间。返回时间数组,从开始时间的后10分钟到结束时间为止。
    // 比如12:00:00-13:00:00 所以返回的数组元素是 12:10:00 ,12:20:00,12:30:00....13:00:00
    descTenTime(begin, end) {
      // 保留结果
      let time = [];
      if (begin == end) {
        time.push(begin);
        return time;
      }
      // 保留结果 00 10 20 30
      let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
      while (temp != end) {
        time.push(temp);
@@ -610,7 +764,6 @@
      }
      // 加上异常的结束时间
      time.push(temp);
      return time;
    },
@@ -621,22 +774,18 @@
      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
      );
      // 去除供电异常和掉线区间的第一个有元素的值
      this.exceedingData = [];
      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.exceedingData.push({
          mvStatCode: this.rowMvStatCode,
@@ -645,6 +794,7 @@
          mvFumeConcentration2: ''
        });
      }
      // 保存无数据时表格条数
      this.exceptionTotal = abnormalTimeTenMinute.length;
    },
@@ -654,69 +804,17 @@
      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);
        // 警告
        // ElMessage.warn('已是第一条数据');
        // ElMessage.info('已是该页第一条数据');
        // ’上一条‘的按钮不可点击
        // this.isPreCantouch = true
      }
    },
    // 获取获取表格下一行数据
    getNextRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // ’上一条‘的按钮恢复点击
        // this.isPreCantouch = false
      if (this.selectedRowIndex !== 0) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1;
        console.log('上', this.selectedRowIndex);
        console.log(this.displayData[this.selectedRowIndex]);
        this.selectedRowIndex = this.selectedRowIndex - 1;
        //请求数据 改变exceedingData
        this.setinfo(this.selectedRowIndex);
        let params = {};
@@ -730,26 +828,53 @@
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }
        this.button.afterButton = true
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            console.log('返回的异常数据为:');
            console.log(this.exceedingData);
            this.chart = null;
            this.drawChart();
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.afterButton = false
          });
      }
      //表格的第一行,则上一条无数据
      else {
        console.log(null);
        // 警告
        // ElMessage.info('已是该页最后一条数据');
    },
        // ’下一条‘的按钮不可点击
        // this.isNextCantouch = true
    // 获取获取表格下一行数据
    getPreviousRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex + 1;
        //请求数据 改变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;
        }
        this.button.preButton = true
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.preButton = false
          });
      }
    },
@@ -759,15 +884,12 @@
      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) {
@@ -779,38 +901,32 @@
      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.drawChartTest();
          this.exceptionTotal = this.exceedingData.length;
        });
    },
    // 用户根据输入的条件查询
    showTable() {
      if (this.beginTime > this.endTime) {
        alert('请输入正确的时间范围');
      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;
      }
@@ -818,22 +934,24 @@
        params['endTime'] = this.endTime;
      }
      this.loading = true;
      this.button.queryButton = true
      axiosInstanceInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          this.abnormalData = response.data.data;
          this.total = this.abnormalData.length;
          this.loading = false;
          this.button.queryButton = false
          if (response.data.data.length == 0) {
            alert('该时段无数据');
            ElMessage('该时段无数据');
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);
        });
    },
    handleSizeChange(val) {
@@ -842,19 +960,10 @@
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      // this.startIndex = (val - 1) * this.pageSize;
      // const endIndex = this.startIndex + this.pageSize;
      const startIndex = (val - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      // console.log('起始索引为:',this.startIndex)
      // console.log('页面大小为:',this.pageSize)
      this.displayData = this.abnormalData.slice(startIndex, endIndex);
      // setTimeout(() => {
      //  this.displayData = this.abnormalData
      // }, 1000);
      // console.log(this.displayData);
      this.displayData = this.abnormalData.slice(startIndex, endIndex);
    },
    //相差多少个十分钟  计算中并不包括开始时间,但包括结束时间。
@@ -866,428 +975,477 @@
      // 计算结束时间减去开始时间中间相差多少个十分钟
      const diffInMinutes = end.diff(start, 'minute');
      const diffInTenMinutes = Math.floor(diffInMinutes / 10);
      console.log('几个10分钟', diffInTenMinutes);
      return diffInTenMinutes;
    },
    // 供电异常和掉线的折线图
    linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
      this.chart = echarts.init(this.$refs.chart);
      // $('#ModalGrade').on('shown.bs.modal', function(){
      //   this.chart.resize()
      // })
      this.chart.setOption({
        title: {
          // text: '油烟超标数据',
          // left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {},
        // legend: {
        //   data: ['油烟超标数据']
        // },
        toolbox: {
          // 工具栏
          feature: {
            dataZoom: {
              // 区域缩放
              yAxisIndex: 'none'
            },
            // 保存为图片
            saveAsImage: {}
          }
        },
        xAxis: {
          // type: 'time',
          // 在类目轴(type: 'category')中有效。
          data: xAxisData1,
          name: '时间'
          // axisLabel: {
          //   interval:3,
          //   rotate:40
          // }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
            // formatter:'{value} %'
          },
          name: 'mg/m³'
        },
        series: [
          {
            name: '油烟超标数据',
            type: 'line',
            data: fumeExceeding,
            markLine: {
              silent: true,
              data: [
                // 标注无数据时间段的效果,将这个时间段的数轴部分变为红色
                {
                  name: '无数据',
                  xAxis: abnormalBeginTime
                },
                {
                  xAxis: abnormalEndTime
                }
              ],
              lineStyle: {
                color: 'red'
              }
            }
          }
        ]
      });
    // 参数:异常的开始时间,异常的结束时间。
    // 功能:返回开始时间的前30分钟的时间点,结束时间后40分钟的时间点
    before30AndAfter40(begin, end) {
      let time = [];
      const before30MinBegin = dayjs(begin)
        .subtract(30, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      // 后一段的开始时间
      const after10MinBegin = dayjs(end)
        .add(10, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      // 往后40分钟
      const after40MinEnd = dayjs(end)
        .add(40, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      time.push(before30MinBegin);
      time.push(after10MinBegin);
      time.push(after40MinEnd);
      return time;
    },
    // 展示折线图
    drawChart() {
      // 当出现供电异常和掉线时,时段无数据 则拼接前后段数据
      if (
        this.exceedingData.length === 0 ||
        this.rowExceptionType === '1' ||
        this.rowExceptionType === '2'
      ) {
        // 重构表格 手动填充
        this.setExceptionData();
    // 参数:设备编号, 开始时间, 结束时间
    // 功能:返回某设备在该时段历史数据的get请求参数。
    requestGetParms(devnum, begin, end) {
      return {
        devId: devnum,
        beginTime: begin,
        endTime: end
      };
    },
    // 参数:对象数组(该对象中的属性不能是引用类型,否则拷贝的值还是会相互影响)
    // 功能:拷贝该对象数组。
    shallowCopyList(itemIsObjOfList) {
      let tempList = [];
      itemIsObjOfList.forEach((item) => {
        tempList.push({ ...item });
      });
      return tempList;
    },
        // 展示
        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);
        //合并数组
        setTimeout(() => {
          this.allExceptionTimeData = [
            ...this.beforeData,
            ...tempArr,
            ...this.afterData
          ];
          console.log('合并后数组为', this.allExceptionTimeData);
          //展示图形
          // x轴日期时间
          let dateList = [];
          // y轴 超标油烟浓度
          let fumeExceeding = [];
          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
              );
            }
          }
          console.log('x:', dateList);
          console.log('fume:', fumeExceeding);
          //展示折线图
          this.chart = null;
          this.linechart(
            dateList,
            this.abnormalBt,
            this.abnormalEt,
            fumeExceeding
    // 参数:添加首尾时间数据的异常数据数组(元素为对象)
    // 功能:对中间异常区间时间和值进行补充,返回处理后的结果
    // 详细描述:遍历数组,当发现数组元素为空时,设置该元素的时间为上一个元素时间的后10分钟,并把浓度值设置为null(上个元素的时间一定不为空,无需再去判断上个元素为空的情况)。
    addTenMinutes(exceptionDataArr) {
      // x轴 日期时间
      let dateList = [];
      // y轴 超标油烟浓度
      let fumeExceeding = [];
      let obj = {};
      for (let i = 0; i < exceptionDataArr.length; i++) {
        if (exceptionDataArr[i] == null) {
          //x轴日期。元素为null时, 设置该元素的时间为前一元素的时间后10分钟
          dateList.push(
            dayjs(dateList[dateList.length - 1])
              .add(10, 'minute')
              .format('YYYY-MM-DD HH:mm:ss')
          );
        }, 500);
        // ----------------------------------------
      }
      // 油烟浓度超标时的折线图
      else {
        // // 清空,让无数据条数隐藏,使历史数据的标签条数显示出来
        // 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]);
          fumeExceeding.push(null);
        } else {
          //x轴日期
          dateList.push(exceptionDataArr[i].mvDataTime);
          // 超标油烟浓度
          fumeExceeding.push(exceptionDataArr[i].mvFumeConcentration2);
        }
      }
      obj['dateList'] = dateList;
      obj['fumeExceeding'] = fumeExceeding;
      return obj;
    },
        // 往前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)
    // 参数:加上前后区间的异常数据,时间字符串
    // 功能:判断data中是否有该日期时间,存在返回该时间对应的浓度值,否则返回-1
    findTimeInExceptionData(data, time) {
      for (let i = 0; i < data.length; i++) {
        if (data[i] == null) {
          continue;
        }
        if (data[i]['mvDataTime'] == time) {
          return data[i]['mvFumeConcentration2'];
        }
      }
      return -1;
    },
    // 参数:前区间的开始时间, 后区间的结束时间, 加上前后区间的总时间段的异常数据的对象数组
    // 功能:根据开始和结束时间,返回以10分钟为间隔的时间和对应的值
    keepContinuousByEachTenMinutes(
      intervalStarTime,
      intervalEndTime,
      headAndTailExceptionData
    ) {
      let xAxis = [];
      let yAxis = [];
      let obj = {};
      let current = intervalStarTime;
      let tail = dayjs(intervalEndTime)
        .add(10, 'minute')
        .format('YYYY-MM-DD HH:mm:ss');
      while (current != tail) {
        let value = this.findTimeInExceptionData(
          headAndTailExceptionData,
          current
        );
        if (value != -1) {
          xAxis.push(current);
          yAxis.push(value);
        } else {
          xAxis.push(current);
          yAxis.push(null);
        }
        current = dayjs(current)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        console.log('前后时间为', before30MinBegin, after30MinEnd);
        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;
          });
      }
      obj['xAxis'] = xAxis;
      obj['yAxis'] = yAxis;
      return obj;
    },
        setTimeout(() => {
          console.log('请求后的数据为', this.beforeData, this.afterData);
          this.allExceptionTimeData = [
            ...this.beforeData,
            ...this.exceedingData,
            ...this.afterData
          ];
          // x轴日期时间
          let dateList1 = [];
          // y轴 超标油烟浓度
          let fumeExceeding1 = [];
          console.log('所有数据长度', this.allExceptionTimeData.length);
          console.log('所有数据', this.allExceptionTimeData);
          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
              );
    // 参数:超标数据前面区间的数据
    // 功能:返回除去最后一个元素的数组
    removeLastItemOfBeforeData(beforeDataOfExceeding) {
      let tempList = [];
      if (beforeDataOfExceeding.length == 1) {
        return tempList;
      } else {
        for (let i = 0; i < beforeDataOfExceeding.length - 1; i++) {
          tempList.push({ ...beforeDataOfExceeding[i] });
        }
        return tempList;
      }
    },
    // 设置option
    // 参数:x轴时间, y轴油烟浓度, 异常类别(0代表超标,1代表供电异常和掉线), 异常开始时间,异常结束时间,异常开始时间在整个区间的索引下标,异常结束时间在整个区间的索引下标
    setOption(
      xData,
      yData,
      exceptionCategory,
      exceptionBeginTime,
      exceptionEndTime,
      beginIndex,
      endIndex
    ) {
      this.option = {};
      // 超标
      if (exceptionCategory == 0) {
        this.option = {
          tooltip: {},
          toolbox: {
            // 工具栏
            feature: {
              //     dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // 保存为图片
              saveAsImage: {}
            }
          }
          // 提取时间区间内的数据索引
          var startIndex = dateList1.findIndex((item) => item === dateList[0]);
          var endIndex = dateList1.findIndex(
            (item) => item === dateList[dateList.length - 1]
          );
          this.chart = echarts.init(this.$refs.chart);
          this.chart.setOption({
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {},
            // legend: {
            //   data: ['油烟超标数据']
            // },
            toolbox: {
              // 工具栏
              feature: {
                dataZoom: {
                  // 区域缩放
                  yAxisIndex: 'none'
                },
                // 保存为图片
                saveAsImage: {}
          },
          xAxis: {
            type: 'category',
            data: xData,
            name: '时间',
            axisLabel: {
              formatter: function (value) {
                return value.slice(11, -3);
              }
            },
            xAxis: {
              // type: 'time',
              // 在类目轴(type: 'category')中有效。
              data: dateList1,
              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: fumeExceeding1,
                // markArea: {
                //   itemStyle: {
                //     color: 'rgba(255, 173, 177, 0.4)'
                //   },
                //   data: [
                //     [
                //       {
                //         name: '浓度超标',
                //         xAxis: dateList[0]
                //       },
                //       {
                //         xAxis: dateList[dateList.length - 1]
                //       }
                //     ]
                //   ]
                // },
                markLine: {
                  symbol: 'none',
                  itemStyle: {
                    // 基线公共样式
                    normal: {
                      lineStyle: {
                        // show:false,
                        // 'solid'实线;'dashed'虚线;'dotted'点线
                        type: 'dashed'
                      },
                      label: {
                        show: true,
                        position: 'end',
                        formatter: '{b}'
                      }
            }
          },
          yAxis: {
            type: 'value',
            name: 'mg/m³'
          },
          series: [
            {
              name: '油烟浓度',
              type: 'line',
              data: yData.map((item) => {
                if (item >= 1) {
                  return {
                    value: item,
                    itemStyle: {
                      color: 'red'
                    }
                  },
                  data: [
                  };
                }
                return item;
              }),
              // 变换指定时间区间的背景颜色
              markArea: {
                itemStyle: {
                  color: 'rgba(255, 173, 177, 0.4)'
                },
                data: [
                  [
                    {
                      name: '预警',
                      type: 'average',
                      yAxis: 1,
                      lineStyle: {
                        // color: '#ff0000'
                        color: 'red'
                      }
                      name: '超标时间段',
                      xAxis: exceptionBeginTime
                    },
                    {
                      xAxis: exceptionEndTime
                    }
                  ]
                }
                ]
              },
              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'
                    }
                  }
                ]
              }
            }
          ],
          // 指定时间区间的线段变颜色
          visualMap: {
            show: false,
            dimension: 0,
            pieces: [
              {
                lte: beginIndex,
                color: 'green'
              },
              {
                gt: beginIndex,
                lte: endIndex,
                color: 'red'
              },
              {
                gt: endIndex,
                lte: xData.length - 1,
                color: 'green'
              }
            ]
          });
        }, 500);
          }
        };
      }
      // 供电异常和掉线
      else if (exceptionCategory == 1) {
        this.option = {
          tooltip: {},
          toolbox: {
            // 工具栏
            feature: {
              // dataZoom: {
              //   // 区域缩放
              //   yAxisIndex: 'none'
              // },
              // 保存为图片
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: xData,
            name: '时间',
            axisLabel: {
              formatter: function (value) {
                return value.slice(11, -3);
              }
            }
          },
          yAxis: {
            type: 'value',
            name: 'mg/m³'
          },
          series: [
            {
              name: '油烟数据',
              type: 'line',
              data: yData,
              markLine: {
                silent: true,
                data: [
                  // 标注无数据时间段的效果,将这个时间段的数轴部分变为红色
                  {
                    name: '无数据',
                    xAxis: exceptionBeginTime
                  },
                  {
                    xAxis: exceptionEndTime
                  }
                ],
                lineStyle: {
                  color: 'red'
                }
              }
            }
          ]
        };
      }
      this.banTouch = 0
    },
    // 功能:点击 ‘查看详情’, ‘下一条’按钮时会 先逻辑计算。最后展示图形
    drawChartTest() {
      this.beforeData = [];
      this.afterData = [];
      this.allExceptionTimeData = [];
      //异常的开始时间 结束时间
      let exceptionBeginTime = this.rowBeginTime;
      let exceptionEndTime = this.rowEndTime;
      // beforeAndAfterTime[0]:前30分钟的时间点
      // beforeAndAfterTime[1]:后10分钟的时间点
      // beforeAndAfterTime[2]:后40分钟的时间点
      let beforeAndAfterTime = this.before30AndAfter40(
        exceptionBeginTime,
        exceptionEndTime
      );
      // 构造异常时间前的区间数据请求参数
      let paramsBefore = this.requestGetParms(
        this.displayData[this.selectedRowIndex].devId,
        beforeAndAfterTime[0],
        this.displayData[this.selectedRowIndex].beginTime
      );
      // 构造异常时间后的区间数据请求参数
      let paramsAfter = this.requestGetParms(
        this.displayData[this.selectedRowIndex].devId,
        beforeAndAfterTime[1],
        beforeAndAfterTime[2]
      );
      // 折线图加载中效果
      this.chartLoading = true
      // 请求前半段
      axiosInstanceInstance
        .get('/fume/history', { params: paramsBefore })
        .then((result1) => {
          this.beforeData = result1.data.data;
          // 请求后半段
          axiosInstanceInstance
            .get('/fume/history', { params: paramsAfter })
            .then((result2) => {
              this.afterData = result2.data.data;
              //保存异常区间的值
              let tempArr = [];
              // 保存异常区间前后的值
              let before = [];
              let after = [];
              // 判断是否是供电异常或掉线
              if (
                this.rowExceptionType === '1' ||
                this.rowExceptionType === '2'
              ) {
                // 重构表格 缺失异常数据自动填充
                this.setExceptionData();
                //相差几个10分钟
                const TenMinuteNum = this.diffTenMinutesNum(
                  exceptionBeginTime,
                  exceptionEndTime
                );
                //用null填充中异常无数据的时间
                for (let i = 0; i < TenMinuteNum; i++) {
                  tempArr.push(null);
                }
                before = this.shallowCopyList(this.beforeData);
                after = this.shallowCopyList(this.afterData);
                // after = this.afterData
              }
              // 超标
              else {
                let beforeTemp = this.removeLastItemOfBeforeData(
                  this.beforeData
                );
                // 前后区间只显示距离超标区间时间最近的浓度小于1的时间点
                for (let i = beforeTemp.length - 1; i >= 0; i--) {
                  if (beforeTemp[i].mvFumeConcentration2 >= 1) {
                    break;
                  }
                  if (beforeTemp[i].mvFumeConcentration2 < 1) {
                    before.unshift(this.beforeData[i]);
                  }
                }
                for (let i = 0; i < this.afterData.length; i++) {
                  if (this.afterData[i].mvFumeConcentration2 >= 1) {
                    break;
                  }
                  if (this.afterData[i].mvFumeConcentration2 < 1) {
                    after.unshift(this.afterData[i]);
                  }
                }
                tempArr = this.shallowCopyList(this.exceedingData);
              }
              // 将前后区间数据 与 异常区间数据 合并
              this.allExceptionTimeData = [...before, ...tempArr, ...after];
              // x轴日期时间
              let dateList = [];
              // y轴 超标油烟浓度
              let fumeExceeding = [];
              let timeAndValue = {};
              // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔
              timeAndValue = this.keepContinuousByEachTenMinutes(
                beforeAndAfterTime[0],
                beforeAndAfterTime[2],
                this.allExceptionTimeData
              );
              dateList = timeAndValue['xAxis'];
              fumeExceeding = timeAndValue['yAxis'];
              // 提取异常起始时间点在整个区间内的数据索引
              let startIndex = dateList.findIndex(
                (item) => item === exceptionBeginTime
              );
              let endIndex = dateList.findIndex(
                (item) => item === exceptionEndTime
              );
              // 供电异常和掉线情况 超标情况
              if (
                this.rowExceptionType === '1' ||
                this.rowExceptionType === '2'
              ) {
                this.setOption(
                  dateList,
                  fumeExceeding,
                  1,
                  exceptionBeginTime,
                  exceptionEndTime,
                  startIndex,
                  endIndex
                );
              } else {
                // 超标情况
                this.setOption(
                  dateList,
                  fumeExceeding,
                  0,
                  exceptionBeginTime,
                  exceptionEndTime,
                  startIndex,
                  endIndex
                );
              }
              this.chartLoading = false
            });
        });
    },
    getDeviceInfo() {
      // 级联下拉框数据 从接口中动态获取
      axiosInstanceInstance.get('/fume/device').then((result) => {
@@ -1306,7 +1464,6 @@
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
@@ -1340,34 +1497,6 @@
      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) {
          alert('该时段无数据');
          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;
@@ -1388,8 +1517,6 @@
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
@@ -1414,20 +1541,11 @@
          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;
@@ -1435,7 +1553,7 @@
        .get('/fume/abnormalone', { params: params })
        .then((response) => {
          if (response.data.data.length == 0) {
            alert('该时段无数据');
            ElMessage('该时段无数据');
            return;
          }
          // 保存返回的
@@ -1447,23 +1565,15 @@
          this.loading = false;
        });
    }
  },
  }
};
</script>
<style scoped>
.exception-root-container {
  margin: 20px;
  padding: 10px;
  border: 1px;
  height: 615px;
  /* min-height: 80vh;
  min-width: 100vh; */
}
.header-container {
  display: flex;
  margin-left: 20px;
  /* flex-wrap: wrap;
    align-items: center; */
}
@@ -1496,8 +1606,6 @@
/* 异常分析数据与按钮 */
.exception-container {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
  z-index: 9;
@@ -1515,10 +1623,10 @@
  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;
@@ -1527,11 +1635,9 @@
.box-card-label {
  font-size: 14px;
  white-space: nowrap;
  overflow-x: auto;
}
:deep().el-card {
  border-radius: 9px;
}
/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
@@ -1540,15 +1646,17 @@
  overflow-y: hidden;
  border-radius: 9px;
}
:deep().table-page .el-card__body {
  padding: 0px;
.table-page {
  margin-left: 20px;
}
.table-text {
  font-size: 18px;
  margin-bottom: 10px;
  margin: 5px 0px 10px 20px;
}
.text-blank {
  margin-left: 10px;
  margin-right: 10px;
  color: #000000;
}
/* 店铺名选择文本 */
.describe-info {
@@ -1563,7 +1671,6 @@
  font-weight: bold;
}
/* 异常表格下标签中的数组 */
.table-line-num {
  font-weight: bold;
@@ -1572,23 +1679,21 @@
.button_info.el-button_inner {
  text-align: left;
}
:deep().el-collapse .el-collapse-item__content{
.el-collapse {
  margin-left: 20px;
}
: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;
  overflow-y: auto;
  border: 0px;
}
:deep().sub-box-card .el-card__body {
  padding: 0px;
}
.mx-1 {
  margin-bottom: 0px;
}
@@ -1597,10 +1702,31 @@
  justify-content: right;
  margin-bottom: 10px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
:deep().el-table__row .exceeding-row{
  background-color:  #F53F3F;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
:deep().el-table__row .abnormal-power-supply{
  background-color:  #FDF4BF;
}
:deep().el-table__row .disconnect{
  background-color:  #F7BA1E;
}
.el-table {
  color: #000000;
}
/* 表格的内边距 */
:deep().el-table .el-table__cell {
  padding: 2px;
}
/* 表格中的按钮宽度铺满 */
.table-button {
  width: 100%;
}
</style>