油烟监测 vue代码

zmc

2023-08-08 bab83405c39ae9ab8b6569ca29b1e9a6a3b04327

 src/views/ExceedingFume.vue

@@ -1,54 +1,28 @@
<!-- app -->
<!--  -->
<template>
  <!-- solid #000000 -->
  <div class="exception-root-container">
    <!-- <div style="margin-bottom: 20px; display: flex; white-space: nowrap">
      静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总
    </div> -->
    <!-- 菜单读标题 -->

    <div style="display: flex">
    <div ref="h1" class="header-container">
      <span class="describe-info">店铺名选择：</span>

      <!-- 店铺名  级联 -->
      <ShopNameAndID
        @submit-id="(n) => (deviceId[1] = n)"
        :devId="全部"
      ></ShopNameAndID>
      <!-- {{ deviceId }} -->
      <!-- 写出组件 -->
      <!-- 进来就加载 -->
      <!-- <span style="margin-right: 15px">
        <el-cascader
          v-model="deviceId"
          :options="optionsShop"
          :props="{ expandTrigger: 'hover' }"
          placeholder="全部"
        />
      </span> -->
      <!-- @visible-change="getDeviceInfo" -->

      <!-- 异常类型选择 -->
      <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
      </ExceptionType>

      <span class="describe-time-text">起止时间：</span>
      <!-- <div style="display: flex"> -->
      <!-- <span class="describe-time-text">起止时间：</span> -->
      <!-- 日期时间选择器 -->
      <!-- <el-date-picker
        v-model="beginTime"
        type="datetime"
        placeholder="开始时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
      <span>~ </span>
      <el-date-picker
        v-model="endTime"
        type="datetime"
        placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      /> -->
      <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"
@@ -58,7 +32,7 @@
        >查询</el-button
      >
      <el-button
        type="primary"
        type="warning"
        plain
        @click="getAllData"
        style="margin-left: 20px"
@@ -82,9 +56,14 @@
        </el-icon>
      </el-tooltip>
    </div>
    <div style="display: flex; justify-content: right">
      <span class="collapse-header-text">
              静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
            >
    </div>
    <br />

    <el-collapse v-model="activeNames">
    <el-collapse ref="h3" v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
          <el-tooltip
@@ -93,7 +72,7 @@
            content="点击可折叠"
            placement="right-start"
          >
            <span class="collapse-header"> 异常的店铺数量分析</span>
            <h4 class="collapse-header"> 异常分析</h4>
            <el-icon class="header-icon">
              <i-ep-info-filled />
            </el-icon>
@@ -105,151 +84,139 @@
            content="点击可折叠"
            placement="right-start"
          >
            <span class="collapse-header-text">
              静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span
            >
   
          </el-tooltip>
        </template>
        <el-card class="box-card">
          <el-row :gutter="25">
            <el-col :span="8">
              <el-statistic :value="exception0.length">
                <template #title
                  ><span style="color: red; font-size: 15px">油烟浓度超标</span>
                </template>
                <template #prefix>
                  <span class="box-card-label">店铺数量：</span>
                </template>
                <template #suffix
                  >/{{ shopsTotal }}
                  <span style="margin-left: 150px">
                    占比：{{
                      ((exception0.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  ></template
              <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
                >
              </el-statistic>
                <span style="margin-left: 150px; font-size: 14px">
                  占比：{{
                    ((exception0.length / shopsTotal) * 100).toFixed(1)
                  }}%</span
                >
              </div>

              <hr />
              <div class="box-card-butcontainer">
                <el-scrollbar height="130px">

                  <!-- <button
                  v-for="item in this.exception0"
                <el-card class="sub-box-card"> 
                <ExceptionText
                  v-for="(item,index) in exception0"
                  :key="item"
                  class="scrollbar-demo-item"
                  :devId="item.devId"
                  exception-value="0"
                  :begin-time="beginTime"
                  :end-time="endTime"
                  @submit-exception-data="getAbnormalDataByClick"
                >
                  {{ item.diName }}

                  <br />
                </button> -->
                  <div v-for="item in exception0" :key="item">
                    <ExceptionButton
                      :devId="item.devId"
                      exception-value="0"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                      >{{ item.diName }}</ExceptionButton
                    >
                  </div>
                </el-scrollbar>
                  <span v-if="index<exception0.length-1" class="text-blank"> , </span>
                </ExceptionText>
                </el-card>
              </div>
            </el-col>

            <el-col :span="8">
              <el-statistic :value="exception1.length">
                <template #title
                  ><span style="color: rgb(181, 14, 247); font-size: 15px"
                    >供电异常</span
                  ></template
              <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
                >
                <template #prefix>
                  <span class="box-card-label">店铺数量：</span>
                </template>
                <template #suffix
                  >/{{ shopsTotal }}
                  <span style="margin-left: 150px">
                    占比：{{
                      ((exception1.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  ></template
                <span style="margin-left: 150px; font-size: 14px">
                  占比：{{
                    ((exception1.length / shopsTotal) * 100).toFixed(1)
                  }}%</span
                >
              </el-statistic>
              </div>

              <hr />

              <div>
                <el-scrollbar height="130px">
                  <div v-for="item in exception1" :key="item">
                    <ExceptionButton
                      :devId="item.devId"
                      exceptionValue="1"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                      >{{ item.diName }}</ExceptionButton
                    >
                  </div>
                </el-scrollbar>
               
                <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">
              <el-statistic :value="exception2.length">
                <template #title
                  ><span style="color: rgb(185, 96, 11); font-size: 15px"
                    >掉线</span
                  ></template
              <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
                >
                <template #prefix>
                  <span class="box-card-label">店铺数量：</span>
                </template>
                <template #suffix
                  >/{{ shopsTotal }}
                  <span style="margin-left: 150px">
                    占比：{{
                      ((exception2.length / shopsTotal) * 100).toFixed(1)
                    }}%</span
                  ></template
                <span style="margin-left: 150px; font-size: 14px">
                  占比：{{
                    ((exception2.length / shopsTotal) * 100).toFixed(1)
                  }}%</span
                >
              </el-statistic>
              </div>
              <hr />
              <div>
                <el-scrollbar height="130px">
                  <!-- <span
                    v-for="item in this.exception2"
                    :key="item"
                    class="scrollbar-demo-item"
                  >
                    {{ item.diName }}
                    <br />
                  </span> -->

                  <div v-for="item in exception2" :key="item">
                    <ExceptionButton
                      :devId="item.devId"
                      exceptionValue="2"
                      :begin-time="beginTime"
                      :end-time="endTime"
                      @submit-exception-data="getAbnormalDataByClick"
                      >{{ item.diName }}</ExceptionButton
                    >
                  </div>
                </el-scrollbar>
                <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>

    <br />
    <hr />
    <div class="table-page">
 <!-- <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%"
        height="400"
        :row-class-name="tableRowClassName"
        stripe
        border 
        :height=tableHeight
      >
        <el-table-column fixed prop="diName" label="店铺名称" width="340">
          <template #default="{ row }">
@@ -313,6 +280,7 @@
      </el-table>

      <el-pagination
        ref="h4"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
@@ -320,15 +288,15 @@
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
      />
    </div>

    </el-card>
    <el-empty v-show="isNoData" :image-size="200" />
    <!-- 对话框 -->
    <div style="width: 600px;">
      <el-dialog v-model="centerDialogVisible" title="Warning" align-center>
        <template #header="{ titleId, titleClass }">
          <div :id="titleId" :class="titleClass" style="font-size: 17px">
    <div>
      <el-dialog v-model="centerDialogVisible" draggable align-center>
        <template #header>
          <div style="font-size: 17px">
            店铺名：{{ rowShopName }}
            <span style="margin-left: 40px">异常类型：</span>
            <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>
@@ -337,96 +305,106 @@
              {{ rowEndTime }}
            </div>
          </div>
          <div class="dialog-button-position">
            <el-button
              type="danger"
              :disabled="isPreCantouch"
              @click="getPreviousRowData"
              >上条异常</el-button
            >
            <el-button
              type="danger"
              :disabled="isNextCantouch"
              @click="getNextRowData"
              >下条异常</el-button
            >
          </div>
        </template>

        <el-button
          type="danger"
          :disabled="isPreCantouch"
          @click="getPreviousRowData"
          >上一条</el-button
        >
        <el-button
          type="danger"
          :disabled="isNextCantouch"
          @click="getNextRowData"
          >下一条</el-button
        >
        <!-- 超标数据时 -->
        <!-- 折线图 -->
        <div
          ref="chart"
          style="
            width: 800px;
            width: 100%;
            height: 300px;
            /* min-width: 100px; */
            margin-bottom: 20px;
            margin-left: 10px;
            min-width: 350px;
          "
        ></div>

        <!--  v-show="!isAbnormal" -->
        <!-- 表格 -->
        <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">

        <!--  -->
        <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
          <el-table
            :data="exceedingData"
            height="360"
            border
            style="width: 100%; margin-top: 25px"
            style="margin-top: 25px"
          >
          <el-table-column  fixed prop="diName" label="店铺名称" />
            <el-table-column
             
              prop="mvStatCode"
              label="设备编号"
              width="240"
            />
           
            <el-table-column prop="mvDataTime" label="报警时间" width="220" />
            <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³)"
              width="150"
            />
          </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></el-tag
        >
        <el-tag type="success" class="mx-1" effect="dark" round
          ><span class="table-line-lable">异常记录： </span>
          <span class="table-line-num">{{ exceptionTotal }}条</span>
          <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
            (逻辑计算)</span
          >
        </el-tag>
        <!-- <el-tag type="success" class="mx-1" effect="dark" round v-show="rowExceptionType === '1'"
          ><span class="table-line-lable">表格行数： </span>
          <span class="table-line-num">{{ exceptionTotal }}</span></el-tag> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ExceptionButton from '../sfc/ExceptionButton.vue';

import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';

// import axios from 'axios';
import ExceptionText from '../sfc/ExceptionText.vue';
import * as echarts from 'echarts';
import * as XLSX from 'xlsx/xlsx.mjs';
import dayjs from 'dayjs';
import axiosInstance from '../utils/request.js';
import axiosInstanceInstance from '../utils/request.js';

const ShopNameAndID = defineAsyncComponent(() =>
  import('../sfc/../sfc/ShopNameAndID.vue')
);
export default {
  
  name: 'TablePage',
  components: {
    ExceptionButton,
    ExceptionType,
    TimeSelect,
    ShopNameAndID
    ShopNameAndID,
    ExceptionText
  },
  data() {
    return {
      
      // table元素
      tableRef:null,
      // 异常表格数据
      tableHeight:300,
      // 空数据状态
      isNoData: false,
      // 弹出框中表格条数
      exceptionTotal:0,
      exceptionTotal: 0,
      // 无数据时的时间数组，元素相差10分钟
      // abnormalTimeTenMinute: [],
      // 店铺总数
@@ -576,7 +554,43 @@
      this.getShopNames();
    }
  },

  mounted() {

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

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

    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
    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('点击了');
    },
    // 刚打开卡片时第一个图形不会自动伸缩 当点击上/下一条时会自动伸缩
    // 图形响应式变化
    updateChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
    // 从时间选择器组件拿到开始和结束时间
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
@@ -628,11 +642,11 @@
          mvStatCode: this.rowMvStatCode,
          diName: this.rowShopName,
          mvDataTime: abnormalTimeTenMinute[i],
          mvFumeConcentration2: '空数据'
          mvFumeConcentration2: ''
        });
      }
      // 保存无数据时表格条数
      this.exceptionTotal = abnormalTimeTenMinute.length
      this.exceptionTotal = abnormalTimeTenMinute.length;
    },
    // 点击表格的行时
    selectTableRow(row) {
@@ -669,14 +683,14 @@
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }

        axiosInstance
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            this.chart = null;
            this.drawChart();
            this.exceptionTotal = this.exceedingData.length
            this.exceptionTotal = this.exceedingData.length;
          });
      }
      //表格的第一行，则上一条无数据
@@ -716,7 +730,7 @@
        if (this.drawerData.endTime) {
          params['endTime'] = this.displayData[this.selectedRowIndex].endTime;
        }
        axiosInstance
        axiosInstanceInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
@@ -725,7 +739,7 @@
            console.log(this.exceedingData);
            this.chart = null;
            this.drawChart();
            this.exceptionTotal = this.exceedingData.length
            this.exceptionTotal = this.exceedingData.length;
          });
      }
      //表格的第一行，则上一条无数据
@@ -765,17 +779,19 @@
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }
      axiosInstance.get('/fume/exceed', { params: params }).then((response) => {
        // 保存返回的超标数据
        this.exceedingData = response.data.data;
        this.loadingDrawer = !this.loadingDrawer;
        // this.total = this.exceedingData.length;
        // this.handleCurrentChange(1); // 默认显示第一页
        console.log('返回的异常数据为：');
        console.log(this.exceedingData);
        this.drawChart();
        this.exceptionTotal = this.exceedingData.length
      });
      axiosInstanceInstance
        .get('/fume/exceed', { params: params })
        .then((response) => {
          // 保存返回的超标数据
          this.exceedingData = response.data.data;
          this.loadingDrawer = !this.loadingDrawer;
          // this.total = this.exceedingData.length;
          // this.handleCurrentChange(1); // 默认显示第一页
          console.log('返回的异常数据为：');
          console.log(this.exceedingData);
          this.drawChart();
          this.exceptionTotal = this.exceedingData.length;
        });
    },

    // 用户根据输入的条件查询
@@ -802,15 +818,22 @@
        params['endTime'] = this.endTime;
      }
      this.loading = true;
      axiosInstance
      axiosInstanceInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          this.abnormalData = response.data.data;
          this.total = this.abnormalData.length;
          this.loading = false;
          if (response.data.data.length == 0) {
            alert('该时段无数据');
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);
          this.loading = false;
        });
    },
    handleSizeChange(val) {
@@ -849,10 +872,10 @@

    // 供电异常和掉线的折线图
    linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
      this.chart = echarts.init(this.$refs.chart, null, {
        width: 800,
        height: 300
      });
      this.chart = echarts.init(this.$refs.chart);
      // $('#ModalGrade').on('shown.bs.modal', function(){
      //   this.chart.resize()
      // })
      this.chart.setOption({
        title: {
          // text: '油烟超标数据',
@@ -875,7 +898,7 @@
              // 区域缩放
              yAxisIndex: 'none'
            },
           

            // 保存为图片
            saveAsImage: {}
          }
@@ -976,15 +999,15 @@
          endTime: after40MinEnd
        };
        // 请求前半段
        axiosInstance
          .get('http://localhost:8080/fume/history', { params: paramsBefore })
        axiosInstanceInstance
          .get('/fume/history', { params: paramsBefore })
          .then((result) => {
            this.beforeData = result.data.data;
          });

        // 请求后半段
        axiosInstance
          .get('http://localhost:8080/fume/history', { params: paramsAfter })
        axiosInstanceInstance
          .get('/fume/history', { params: paramsAfter })
          .then((result) => {
            this.afterData = result.data.data;
          });
@@ -1051,7 +1074,7 @@
        // ----------------------------------------
      }
      // 油烟浓度超标时的折线图
       else {
      else {
        // // 清空，让无数据条数隐藏，使历史数据的标签条数显示出来
        // this.abnormalTimeTenMinute = []
        this.isAbnormal = false;
@@ -1065,119 +1088,209 @@
          // 超标油烟浓度
          fumeExceeding.push(item.mvFumeConcentration2);
        });
        // 存放该时间段每隔十分钟一次的时间点
        const xAxisData = [];
        const xAxisData1 = [];
        // // 存放该时间段每隔十分钟一次的时间点
        // const xAxisData = [];
        // const xAxisData1 = [];
        let beginTime = new Date(dateList[0]);
        const endTime = new Date(dateList[dateList.length - 1]);
        // console.log(beginTime,endTime);
        while (beginTime <= endTime) {
          xAxisData.push(beginTime);
          // 增加10分钟
          beginTime = new Date(beginTime.getTime() + 10 * 60 * 1000);
        }
        //   console.log(xAxisData);
        // 将中国标准时间转为指定格式的字符串
        xAxisData.forEach((item, index) => {
          // 获取分钟数
          let M = item.getMinutes();
          // 如果分钟小于10,则在前面加0补充为两位数字
          M = M > 9 ? M : '0' + M;
          xAxisData1[index] =
            item.getFullYear() +
            '-' +
            (item.getMonth() + 1) +
            '-' +
            item.getDate() +
            ' ' +
            item.getHours() +
            ':' +
            M +
            ':0' +
            item.getSeconds();
        });
        console.log(xAxisData1);
        this.chart = echarts.init(this.$refs.chart);
        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: {}

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

        // 往后40分钟
        const after30MinEnd = dayjs(endTime)
          .add(30, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        const after10MinEnd = dayjs(endTime)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
        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;
          });

        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
              );
            }
          },
          xAxis: {
            // type: 'time',
            // 在类目轴（type: 'category'）中有效。
            data: xAxisData1,
            name: '时间'
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto'
              // formatter:'{value} %'
          }

          // 提取时间区间内的数据索引
          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
            },
            name: 'mg/m³'
          },
          series: [
            {
              name: '油烟超标数据',
              type: 'line',
              data: fumeExceeding,
              markLine: {
                itemStyle: {
                  // 基线公共样式
                  normal: {
                    lineStyle: {
                      // 'solid'实线；'dashed'虚线；'dotted'点线
                      type: 'dashed'
                    },
                    label: {
                      show: true,
                      position: 'end',
                      formatter: '{b}{c}'
                    }
                  }
            tooltip: {},
            // legend: {
            //   data: ['油烟超标数据']
            // },
            toolbox: {
              // 工具栏
              feature: {
                dataZoom: {
                  // 区域缩放
                  yAxisIndex: 'none'
                },
                data: [
                  {
                    name: '预警',
                    type: 'average',
                    yAxis: 1,
                    lineStyle: {
                      color: '#ff0000'
                    }
                  }
                ]
                // 保存为图片
                saveAsImage: {}
              }
            }
          ]
        });
            },
            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}'
                      }
                    }
                  },
                  data: [
                    {
                      name: '预警',
                      type: 'average',
                      yAxis: 1,
                      lineStyle: {
                        // color: '#ff0000'
                        color: 'red'
                      }
                    }
                  ]
                }
              }
            ]
          });
        }, 500);
      }
    },
    getDeviceInfo() {
      // 级联下拉框数据 从接口中动态获取
      axiosInstance.get('/fume/device').then((result) => {
      axiosInstanceInstance.get('/fume/device').then((result) => {
        this.deviceInfo = result.data.data;
        // 获取到总的店铺数量
        this.shopsTotal = result.data.data.length;
@@ -1226,20 +1339,28 @@
      // 将workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, '分析数据.xlsx');
    },

    // 查询全部异常表数据
    getAllData() {
      this.isNoData = false;
      this.loading = true;
      axiosInstance.get('/fume/abnormal').then((result) => {
      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);
        this.loading = false;
      });

      // 得到异常表的最早和最晚时间
      setTimeout(() => {
        axiosInstance.get('/fume/time').then((result) => {
        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);
@@ -1257,7 +1378,7 @@
    // 根据异常类型返回店铺名称和设备编号
    // 比如油烟超标对应的所有店铺名称和设备编号（已去除重复的店铺名）
    getShopNames() {
      axiosInstance
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '0',
@@ -1270,7 +1391,7 @@
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstance
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '1',
@@ -1281,7 +1402,7 @@
        .then((result) => {
          this.exception1 = result.data.data;
        });
      axiosInstance
      axiosInstanceInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '2',
@@ -1293,6 +1414,7 @@
          this.exception2 = result.data.data;
        });
    },
    
    // 页面加载时默认展示7天异常表数据
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
@@ -1309,9 +1431,13 @@
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      axiosInstance
      axiosInstanceInstance
        .get('/fume/abnormalone', { params: params })
        .then((response) => {
          if (response.data.data.length == 0) {
            alert('该时段无数据');
            return;
          }
          // 保存返回的
          this.abnormalData = response.data.data;
          // 分页
@@ -1322,31 +1448,24 @@
        });
    }
  },
  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();

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

    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
  }
 
};
</script>

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

.exception-root-container {
  margin: 20px; 
  padding: 10px; 
  margin: 20px;
  padding: 10px;
  border: 1px; 
  height: 815px;
  height: 615px;
  /* min-height: 80vh;
  min-width: 100vh; */
}
.header-container {
  display: flex;
  /* flex-wrap: wrap;
    align-items: center; */
}
.ellipsis {
  white-space: nowrap;
@@ -1367,18 +1486,6 @@
.card-header {
  margin: 0;
}

/* .el-pagination {
  position: fixed;
  bottom: 0;
  left: 50;
  right: 50;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  text-align: right;
  padding-right: 20px;
} */

body {
  margin: 0;
@@ -1409,31 +1516,45 @@
}
.collapse-header {
  font-size: 18px;
  color: burlywood;
}
.collapse-header-text {
  margin-left: 60px;
  font-size: 16px;
  color: blue;
  /* margin-right: 150px; */
  margin-top: 5px;
  font-size: 14px;
  color: gray;
}
/* .el-dialog {
  height: 70%;
} */

.box-card-label {
  font-size: 17px;
  font-size: 14px;
  white-space: nowrap;
  overflow-x: auto;
}
:deep().el-card {
  border-radius: 9px;
  
}
/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
  height: 98%;
  /* 不出现滚动条 */
  overflow-y: hidden
  overflow-y: hidden;
  border-radius: 9px;
}

:deep().table-page .el-card__body {
  padding: 0px;
}
.table-text {
  font-size: 18px;
  margin-bottom: 10px;
}
.text-blank {
  margin-left: 10px;
}
/* 店铺名选择文本 */
.describe-info {
  margin-top: 5px;
  font-weight: bold;
  white-space: nowrap;
}
/* 时间选择文本 */
.describe-time-text {
@@ -1442,15 +1563,7 @@
  font-weight: bold;
}

/* 异常分析按钮容器 */
/* .box-card-butcontainer {
  display: flex;
  direction: column;
  width: 68.5%;
} */
.table-line-lable{
  /* color: black; */
}

/* 异常表格下标签中的数组 */
.table-line-num {
  font-weight: bold;
@@ -1459,11 +1572,35 @@
.button_info.el-button_inner {
  text-align: left;
}
:deep().el-collapse .el-collapse-item__content{
  padding-bottom: 0px;
}
.box-card {
  height: 205px;
  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;
}

.dialog-button-position {
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>