油烟 更新了实时监控页面

zmc

2023-10-12 f3acb8ce787f3df0eda633031473be4e6a9ff448

 src/views/ExceedingFume.vue

@@ -1,376 +1,400 @@
<template>
  <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>
    <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>

      <TimeSelect @submit-time="giveTime"></TimeSelect>
      <!-- </div> -->
    </div>
    <div
      ref="h2"
      style="display: flex; margin-top: 2px; justify-content: right"
    >
   
      <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-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
          style="margin-left: 20px"
          :loading="button.queryButton"
          @click="showTable"
          >查询</el-button
        >
          <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"
        <el-tooltip
          class="box-item"
          effect="dark"
          content="点击可导出Excel文件"
          placement="top-start"
        >
          <!-- 做成函数js文件 -->
          <el-icon
            class="iconExcel clickable"
            title="导出Excel文件"
            @click="exportDom"
          >
            <h4 class="collapse-header">异常分析</h4>
            <el-icon class="header-icon">
              <i-ep-info-filled />
            </el-icon>
          </el-tooltip>
            <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-tooltip
            class="box-item"
            effect="dark"
            content="点击可折叠"
            placement="right-start"
          >
      <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="font-size: 17px">
                      ({{
                        ((exception0.length/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    {{  shopsTotal}}
                    <span class="right-text">
                      异常数占比：{{  ((exception0Num/exceptionAllNum) * 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="font-size: 17px">
                      ({{
                        ((exception1.length/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    <span class="right-text">
                      异常数占比：{{  ((exception1Num/exceptionAllNum) * 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="font-size: 17px">
                      ({{
                        (((exception2.length)/shopsTotal)*100).toFixed(1)
                      }}%)</span
                    >
                    <span class="right-text">
                      异常数占比：{{ connectException  }}%
                    </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"
      size="small"
      v-loading="loading"
      :data="displayData"
      style="width: 100%"
      border
      :height="tableHeight"
      :cell-class-name="tableCellClassName"
 
    >
      <el-table-column prop="diName" label="店铺名称" align="center">
        <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>
      </el-table-column>

              <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-col>
</el-row>
    <el-card class="table-page" v-show="!isNoData">
      <el-table
        ref="tableH"
        v-loading="loading"
        :data="displayData"
        style="width: 100%"
        stripe
        border
        :height="tableHeight"
      >
        <el-table-column fixed prop="diName" label="店铺名称" >
          <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="设备编号" >
          <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="异常分类" >
          <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="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 }}
            <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"
              :disabled="isPreCantouch"
              @click="getPreviousRowData"
              >上条异常</el-button
            >
            <el-button
              type="danger"
              :disabled="isNextCantouch"
              @click="getNextRowData"
              >下条异常</el-button
            >
          </div>
      <el-table-column prop="devId" label="设备编号" align="center">
        <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="diSupplier" label="供应商" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.diSupplier">
            <div class="cell ellipsis">{{ row.diSupplier }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
 
 
      <el-table-column prop="exception" label="异常分类" align="center">
        <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="异常类型" align="center">
        <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="地区" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.region">
            <div class="cell ellipsis">{{ row.region }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

        <!-- 掉线 -->
        <!-- <div
      <el-table-column prop="beginTime" label="开始时间" align="center">
        <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="结束时间" align="center">
        <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="操作" align="center">
        <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="
@@ -383,43 +407,64 @@
          "
        ></div> -->

        <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible"></ExceptionTypeLineChart>
      <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
          type="index"
          label="序号"
          width="60px"
          align="center"
          fixed
          :index="indexMethod"
          
        ></el-table-column>
          <el-table-column fixed prop="diName" label="店铺名称"  show-overflow-tooltip/>
          <el-table-column prop="mvStatCode" label="设备编号" align="center" show-overflow-tooltip/>
          <el-table-column prop="diSupplier" label="供应商" align="center" show-overflow-tooltip/>
          <el-table-column prop="mvDataTime" label="采集时间" align="center" show-overflow-tooltip/>
         
          <el-table-column
            prop="mvFumeConcentration2"
            label="油烟浓度(mg/m³)"
            align="center"
            show-overflow-tooltip
          />
        </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" 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>
      <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 XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstanceInstance from '../utils/request.js';
@@ -443,6 +488,21 @@
  },
  data() {
    return {
      exception0Num:0,
      exception1Num:0,
      exception2Num:0,
      // 折线图加载中
      chartLoading:false,
      button:{
        // 查询按钮
        queryButton:false,
        // 上一条按钮
        preButton:false,
        // 下一条按钮
        afterButton:false,
        // 
        banTouch:0
      },
      // 异常折线图的配置
      option: {},
      // 折线图展示
@@ -480,7 +540,8 @@
      rowEndTime: '',
      // 异常的设备编号
      rowMvStatCode: '',

      // 供应商
      rowDiSupplier:'',
      // 表格的一行数据
      rowTable: [],
      //拼接的所有数据
@@ -552,7 +613,7 @@
      // 店铺名 级联选择器
      optionsShop: [],
      // 异常类型选择器
      exceptionValue: [],
      exceptionValue: []
    };
  },
  // 监听  判断按钮是否可点击
@@ -561,16 +622,16 @@
      // 处于表格的最后一条数据 设置‘上一条’按钮不可点
      if (newVaue === this.displayData.length - 1) {
        this.isPreCantouch = true;
       //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
       if (this.isNextCantouch == true) {
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.isNextCantouch == true) {
          this.isNextCantouch = false;
        }
      }
      // 处于表格第一条数据 设置‘下一条’按钮不可点
      else if (newVaue === 0) {
        this.isNextCantouch = true;
         //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
         if (this.isPreCantouch == true) {
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.isPreCantouch == true) {
          this.isPreCantouch = false;
        }
      }
@@ -592,7 +653,21 @@
      window.addEventListener('resize', this.updateChart);
    }
  },

  computed:{
    exceptionAllNum(){
      let sum = this.exception0Num+this.exception1Num+this.exception2Num
      return sum == 0?1:sum
    },
    connectException(){
      let sum = this.exception0Num+this.exception1Num+this.exception2Num
      if(sum == 0){
        return 0
      }
      else{
        return (100 - ((exception0Num/sum) * 100) - ((exception1Num/sum) * 100)).toFixed(1)
      }
    }
  },
  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();
@@ -600,19 +675,38 @@
    this.getRecentSevenDays();
    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
    this.calcTableHeight()
    this.calcTableHeight();
    window.addEventListener('resize', this.updateChart);
 
  },
  methods: {
     // 动态计算表格高度
     calcTableHeight(){
    // 功能：对话框表格序号递增
    // 时间：2023-8-17
    indexMethod(index) {
      return index + 1 ;
    },

    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
     if(columnIndex == 4){
        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))`;
      this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
    },
    
    // 时间是否超过10分钟

    //功能： 时间是否超过10分钟
    isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
      const date1 = new Date(dateString1);
      const date2 = new Date(dateString2);
@@ -638,7 +732,6 @@
          let current = timePoints[i];
          let next = timePoints[i + 1];
          while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) {
            console.log('generateTimePoints');
            current = dayjs(current)
              .add(10, 'minute')
              .format('YYYY-MM-DD HH:mm:ss');
@@ -667,7 +760,6 @@
      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();
      console.log(month1, month2);

      // 判断两个日期是否相差一个月
      if (year1 === year2) {
@@ -707,6 +799,7 @@
    //     }
    //   });
    // },

    // 从时间选择器组件拿到开始和结束时间
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
@@ -718,9 +811,9 @@
    // 比如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
      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');
@@ -740,22 +833,24 @@
      this.rowBeginTime = this.displayData[index].beginTime;
      this.rowEndTime = this.displayData[index].endTime;
      this.rowMvStatCode = this.displayData[index].devId;
      this.rowDiSupplier = this.displayData[index].diSupplier
    },

    //功能： 供电异常和掉线时的表格数据 
    //功能： 供电异常和掉线时的表格数据
    setExceptionData() {
        // 无数据时的时间数组 时间相差10分钟
        const abnormalTimeTenMinute = this.descTenTime(
      // 无数据时的时间数组 时间相差10分钟
      const abnormalTimeTenMinute = this.descTenTime(
        this.rowBeginTime,
        this.rowEndTime
      )
      );
      // 去除供电异常和掉线区间的第一个有元素的值
      this.exceedingData = []
      this.exceedingData = [];

      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.exceedingData.push({
          mvStatCode: this.rowMvStatCode,
          diName: this.rowShopName,
          diSupplier:this.rowDiSupplier,
          mvDataTime: abnormalTimeTenMinute[i],
          mvFumeConcentration2: ''
        });
@@ -774,8 +869,11 @@

    // 获取获取表格下一行数据
    getNextRowData() {
      // 不是表格的第一行 
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1

        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1;
        //请求数据 改变exceedingData
@@ -791,32 +889,29 @@
        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;
            // this.chart = null;
            // this.drawChart();
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.afterButton = false
          });
      }
      //表格的第一行，则上一条无数据
      else{
        console.log(null);
      }
 
    },

    // 获取获取表格下一行数据
    getPreviousRowData() {
      // 不是表格的第一行  
      // 不是表格的第一行
      if (this.selectedRowIndex < this.displayData.length - 1) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1

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

        //请求数据 改变exceedingData
        this.setinfo(this.selectedRowIndex);
@@ -831,19 +926,16 @@
        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;
            console.log(this.exceedingData);
            this.drawChartTest();
            this.exceptionTotal = this.exceedingData.length;
            this.button.preButton = false
          });
      }
      //表格的第一行，则上一条无数据
      else {
        console.log(null);
      }
    },

@@ -870,6 +962,7 @@
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }

      axiosInstanceInstance
        .get('/fume/exceed', { params: params })
        .then((response) => {
@@ -894,8 +987,7 @@
      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;
      }
@@ -903,12 +995,15 @@
        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) {
            ElMessage('该时段无数据');
            this.isNoData = true;
@@ -917,8 +1012,7 @@
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);

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

@@ -1021,8 +1114,8 @@
    // 功能：判断data中是否有该日期时间，存在返回该时间对应的浓度值，否则返回-1
    findTimeInExceptionData(data, time) {
      for (let i = 0; i < data.length; i++) {
        if(data[i]==null){
            continue
        if (data[i] == null) {
          continue;
        }
        if (data[i]['mvDataTime'] == time) {
          return data[i]['mvFumeConcentration2'];
@@ -1059,7 +1152,6 @@
        current = dayjs(current)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
      
      }
      obj['xAxis'] = xAxis;
      obj['yAxis'] = yAxis;
@@ -1068,19 +1160,17 @@

    // 参数：超标数据前面区间的数据
    // 功能：返回除去最后一个元素的数组
    removeLastItemOfBeforeData(beforeDataOfExceeding){
    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;
      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代表供电异常和掉线), 异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标
@@ -1093,21 +1183,21 @@
      beginIndex,
      endIndex
    ) {
      this.option = {}
      this.option = {};
      // 超标
      if (exceptionCategory == 0) {
        this.option = {
          tooltip: {},
        toolbox: {
          // 工具栏
          feature: {
        //     dataZoom: {
        //   yAxisIndex: 'none'
        // },
            // 保存为图片
            saveAsImage: {}
          }
        },
          toolbox: {
            // 工具栏
            feature: {
              //     dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // 保存为图片
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: xData,
@@ -1120,7 +1210,7 @@
          },
          yAxis: {
            type: 'value',
            name: 'mg/m³',
            name: 'mg/m³'
          },
          series: [
            {
@@ -1146,10 +1236,10 @@
                  [
                    {
                      name: '超标时间段',
                      xAxis: exceptionBeginTime,
                      xAxis: exceptionBeginTime
                    },
                    {
                      xAxis: exceptionEndTime,
                      xAxis: exceptionEndTime
                    }
                  ]
                ]
@@ -1210,17 +1300,17 @@
      else if (exceptionCategory == 1) {
        this.option = {
          tooltip: {},
        toolbox: {
          // 工具栏
          feature: {
            // dataZoom: {
            //   // 区域缩放
            //   yAxisIndex: 'none'
            // },
            // 保存为图片
            saveAsImage: {}
          }
        },
          toolbox: {
            // 工具栏
            feature: {
              // dataZoom: {
              //   // 区域缩放
              //   yAxisIndex: 'none'
              // },
              // 保存为图片
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: xData,
@@ -1260,17 +1350,17 @@
          ]
        };
      }
      this.banTouch = 0
    },


    // 功能：点击 ‘查看详情’， ‘下一条’按钮时会 先逻辑计算。最后展示图形
    drawChartTest() {
      this.beforeData = []
      this.afterData= []
      this.allExceptionTimeData = []
      this.beforeData = [];
      this.afterData = [];
      this.allExceptionTimeData = [];
      //异常的开始时间 结束时间
      let exceptionBeginTime =this.rowBeginTime
      let exceptionEndTime = this.rowEndTime
      let exceptionBeginTime = this.rowBeginTime;
      let exceptionEndTime = this.rowEndTime;

      // beforeAndAfterTime[0]:前30分钟的时间点
      // beforeAndAfterTime[1]:后10分钟的时间点
@@ -1294,18 +1384,18 @@
        beforeAndAfterTime[2]
      );

      // 折线图加载中效果
      this.chartLoading = true
      // 请求前半段
      axiosInstanceInstance
        .get('/fume/history', { params: paramsBefore })
        .then((result1) => {
          this.beforeData = result1.data.data;
          console.log('beforeData:',this.beforeData);
          // 请求后半段
          axiosInstanceInstance
            .get('/fume/history', { params: paramsAfter })
            .then((result2) => {
              this.afterData = result2.data.data;
              console.log('afterData:',this.afterData);
              //保存异常区间的值
              let tempArr = [];
              // 保存异常区间前后的值
@@ -1333,11 +1423,12 @@

                after = this.shallowCopyList(this.afterData);
                // after = this.afterData
                console.log('after:',after);
              } 
              }
              // 超标
              else {
                let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
                let beforeTemp = this.removeLastItemOfBeforeData(
                  this.beforeData
                );
                // 前后区间只显示距离超标区间时间最近的浓度小于1的时间点
                for (let i = beforeTemp.length - 1; i >= 0; i--) {
                  if (beforeTemp[i].mvFumeConcentration2 >= 1) {
@@ -1348,7 +1439,7 @@
                  }
                }

                for (let i = 0; i<this.afterData.length; i++) {
                for (let i = 0; i < this.afterData.length; i++) {
                  if (this.afterData[i].mvFumeConcentration2 >= 1) {
                    break;
                  }
@@ -1361,7 +1452,6 @@

              // 将前后区间数据 与 异常区间数据 合并
              this.allExceptionTimeData = [...before, ...tempArr, ...after];
              console.log('组合数据：',this.allExceptionTimeData);
              // x轴日期时间
              let dateList = [];
              // y轴 超标油烟浓度
@@ -1377,9 +1467,6 @@

              dateList = timeAndValue['xAxis'];
              fumeExceeding = timeAndValue['yAxis'];
              
              console.log('dateList:',dateList);
              console.log('fumeExceeding:',fumeExceeding);

              // 提取异常起始时间点在整个区间内的数据索引
              let startIndex = dateList.findIndex(
@@ -1415,6 +1502,7 @@
                  endIndex
                );
              }
              this.chartLoading = false
            });
        });
    },
@@ -1437,7 +1525,6 @@
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
@@ -1491,8 +1578,6 @@
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
@@ -1516,18 +1601,52 @@
        .then((result) => {
          this.exception2 = result.data.data;
        });

        /* 异常数量 */
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception0Num = result.data.data;
        });
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception1Num = result.data.data;
        });
        axiosInstanceInstance
        .get('/fume/exceptionnum', {
          params: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception2Num = result.data.data;
        });
    },

    // 页面加载时默认展示7天异常表数据
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
      this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
      console.log(this.currentDateTime, this.oneWeekAgoDateTime);
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      axiosInstanceInstance
        .get('/fume/abnormalone', { params: params })
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          if (response.data.data.length == 0) {
            ElMessage('该时段无数据');
@@ -1547,13 +1666,7 @@
</script>

<style scoped>
/* .exception-root-container {
  margin: 20px;
  padding: 10px;
  border: 1px;
  height: 615px;

} */
.header-container {
  display: flex;
  margin-left: 20px;
@@ -1589,8 +1702,6 @@
/* 异常分析数据与按钮 */
.exception-container {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
  z-index: 9;
@@ -1612,7 +1723,6 @@
  font-size: 18px;
}
.collapse-header-text {
  /* margin-right: 150px; */
  margin-top: 5px;
  font-size: 14px;
  color: gray;
@@ -1621,11 +1731,17 @@
.box-card-label {
  font-size: 14px;
  white-space: nowrap;
  /* overflow-x: auto; */
}

.right-text {
  /* float :right; */
  /* text-align: right; */
  margin-left:80px;
}
:deep().el-card {
  border-radius: 9px;
}

/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
  height: 98%;
@@ -1636,15 +1752,14 @@
.table-page {
  margin-left: 20px;
}
:deep().table-page .el-card__body {
  /* padding: 0px; */
}

.table-text {
  font-size: 18px;
  margin: 5px 0px 10px 20px;
}
.text-blank {
  margin-right: 10px;
  color: #000000;
}
/* 店铺名选择文本 */
.describe-info {
@@ -1676,16 +1791,12 @@
.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;
}
@@ -1694,10 +1805,27 @@
  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;
}


/* 表格中的按钮宽度铺满 */
.table-button {
  width: 100%;
}

</style>