油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/test/TestWa.vue

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

    <div style="display: flex">
      <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>
      <!-- 日期时间选择器 -->
      <!-- <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>

      <!-- 做成表单 -->
      <el-button
        type="primary"
        plain
        @click="showTable"
        style="margin-left: 20px"
        >查询</el-button
      >
      <el-button
        type="primary"
        plain
        @click="getAllData"
        style="margin-left: 20px"
        >查询全部</el-button
      >

      <el-tooltip
        class="box-item"
        effect="dark"
        content="点击可导出Excel文件"
        placement="top-start"
      >
        <!-- 做成函数js文件 -->
        <el-icon
          class="iconExcel clickable"
          title="导出Excel文件"
          @click="exportDom"
        >
          <i-ep-Download />
          <!-- 导出为Excel -->
        </el-icon>
      </el-tooltip>
    </div>
    <br />

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

          <el-tooltip
            class="box-item"
            effect="dark"
            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
                >
              </el-statistic>
              <hr />
              <div class="box-card-butcontainer">
                <el-scrollbar height="130px">
                  <!-- <button
                  v-for="item in this.exception0"
                  :key="item"
                  class="scrollbar-demo-item"
                >
                  {{ 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>
              </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
                >
                <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
                >
              </el-statistic>
              <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>
              </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
                >
                <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
                >
              </el-statistic>
              <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>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-collapse-item>
    </el-collapse>

    <br />
    <hr />
    <div class="table-page">
      <el-table
        v-loading="loading"
        :data="displayData"
        style="width: 100%"
        height="400"
      >
        <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
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
      />
    </div>

    <!-- 对话框 -->
    <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">
            店铺名：{{ 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>
        </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;
            height: 300px;
            margin-bottom: 20px;
            margin-left: 10px;
          "
        ></div>

        <!--  v-show="!isAbnormal" -->
        <!-- 表格 -->
        <div style="margin-top: 40px;margin-bottom: 5px; border: 1px solid #000000">
          <el-table
            :data="exceedingData"
            height="360"
            border
            style="width: 100%; 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
              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-dialog>
    </div>
  </div>
</template>

<!-- 数据爬取 -->
<script>
import ExceptionButton from '../sfc/ExceptionButton.vue';
import ExceptionType from '../sfc/ExceptionType.vue';
import TimeSelect from '../sfc/TimeSelect.vue';
// import ShopNameSelect from '../sfc/ShopNameSelect.vue'
import ShopNameCheckBox from '../sfc/ShopNameCheckBox.vue';
import TimeSelectCrawling from '../sfc/TimeSelectCrawling.vue';

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

const ShopNameAndID = defineAsyncComponent(() =>
  import('../sfc/../sfc/ShopNameAndID.vue')
);
export default {
  name: 'TablePage',
  components: {
    ExceptionButton,
    ExceptionType,
    TimeSelect,
    ShopNameAndID
    // ShopNameSelect,
    ShopNameCheckBox,
    TimeSelectCrawling
  },
  data() {
    return {
      // 弹出框中表格条数
      exceptionTotal:0,
      // 无数据时的时间数组，元素相差10分钟
      // abnormalTimeTenMinute: [],
      // 店铺总数
      shopsTotal: 0,

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

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

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

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

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

      // 默认选择的折叠面板编号
      activeNames: ['1'],
      // 异常时的表格
      abnormalTb: [],
      // 异常的起止时间
      abnormalBt: '',
      abnormalEt: '',
      // 是否展示时间轴  否
      isAbnormal: false,
      // 保存着异常类型0对应的店铺名称和设备编号
      exception0: [],
      // 保存着异常类型1对应的店铺名称和设备编号
      exception1: [],
      // 保存着异常类型2对应的店铺名称和设备编号
      exception2: [],
      // 加载动画
      loading: false,
      // 抽屉加载动画
      loadingDrawer: true,
      // 分页展示数据
      // 每页展示的数据
      displayData: [],
      // 存放后端返回的json数据
      jsonData: [],
      // 分页的起始索引
      startIndex: 0,
      // 当前页
      currentPage: 1,
      // 每页条数
      pageSize: 10,
      total: 0,
      // 选择店铺名
      deviceId: [],
      deviceInfo: [],
      // 时间选择器开始时间
      iframeSrc: '/api/sys_login.jsp?from=/sys/index.jsp',
      isShowIframe: false,
      // 已选中的店铺名
      form: {
        selectedShopNames: [],
        cookie: '',
      beginTime: '',
      // 时间选择器结束时间
      endTime: '',
      // 异常表数据
      abnormalData: [],
      // 该时段的详细超标数据
      exceedingData: [],
      drawerVisible: false,
      // 表格的一行数据
      drawerData: {},
      // 抽屉方向，从右向左打开
      drawerDirection: 'rtl',
      optionsTime: [
        // 时间颗粒度
        {
          value: '10',
          label: '10分钟数据',
          disabled: true
        }
      ],
      // 店铺名 级联选择器
      optionsShop: [],
      // 异常类型选择器
      exceptionValue: [],
      exceptionOptions: [
        {
          value: '0',
          label: '油烟浓度超标'
        endTime: ''
        },
        {
          value: '1',
          label: '疑似供电异常'
        },
        {
          value: '2',
          label: '掉线'
        }
      ]
      percentage: Number(60),
      countdownTime: Date.now() + 1000 * 60 * 60 * 24 * 2,
      // 爬取反馈的结果
      result: '',
      // 信息
      allData: [],
      // 重复的数据
      duplicateData: [],
      // 不重复的数据
      newData: [],
      // 重复数据展示的表格
      displayData:[],
      loading: false,
      loadingToMysql:null,
      // 但有重复的数据时，两个按钮只能选其中一个，反之再次重复入库
      buttonFlag:-1
    };
  },
  // 监听  判断按钮是否可点击
  watch: {
    selectedRowIndex(newVaue) {
      // 处于表格的第一条数据 设置‘上一条’按钮不可点
      if (newVaue === 0) {
        this.isPreCantouch = true;
        //用户先点了表格最后一条,next为true,然后点击第一条，pre为true。此时两个按钮都被封锁
        if (this.isNextCantouch == true) {
          this.isNextCantouch = false;
        }
      }
      // 处于表格最后一提哦啊数据 设置‘下一条’按钮不可点
      else if (newVaue === this.displayData.length - 1) {
        this.isNextCantouch = true;
        //用户先点了第一条，pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁
        if (this.isPreCantouch == true) {
          this.isPreCantouch = false;
        }
      }
      // 处于表格的中间行 将按钮设置为可点击状态
      else {
        this.isPreCantouch = false;
        this.isNextCantouch = false;
      }
    },

    // 当选择的时间发生变化时，异常分析部分的异常店铺数量同步变化
    beginTime() {
      this.getShopNames();
    },
    endTime() {
      this.getShopNames();
    }
  },
  methods: {
    // 从时间选择器组件拿到开始和结束时间
    openFullScreen () {
    this.loadingToMysql = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
},
    // 发送数据
    sendData() {
      this.result = '';
      this.allData = [];
      let form = {};
      form['selectedShopNames'] = this.form.selectedShopNames;
      form['cookie'] = this.form.cookie;
      if (this.form.beginTime) {
        form['beginTime'] = dayjs(this.form.beginTime).format('YYYY-MM-DD');
      }
      if (this.form.endTime) {
        form['endTime'] = dayjs(this.form.endTime).format('YYYY-MM-DD');
      }
      this.loading = true;
      // 得到反馈信息 所有数据
      axios.post('http://127.0.0.1:5000/hello', form).then((response) => {
        console.log(response.data);
        response.data.info.forEach((item) => {
          // 换行显示
          this.result = this.result + item + '\n';
        });
        
        //  response.data.allData.forEach(item=>{
        //   this.allData =this.allData+item+'\n'
        //   this.allData =this.allData+'\n'
        //  });
        this.allData = response.data.allData;
        this.duplicateData = response.data.duplicate;
        console.log('重复的数据为：', this.duplicateData);
        this.newData = response.data.newData;
        console.log('新数据条数为：',this.newData.length);
        this.loading = false;

        this.displayData = this.arrToObject(this.duplicateData);
        console.log('转换后的对象数组为：',this.displayData);

        this.result=this.result+'\n重复的数量为：'+this.duplicateData.length
      });
    },
    arrToObject(arr) {  
      let displayData = [];
      arr.forEach((item) => {
          let tempObject = {};
          tempObject['供应商'] = item[0];
          tempObject['餐饮店'] = item[1];
          tempObject['设备编号'] = item[2];
          tempObject['站点名称'] = item[3];
          tempObject['进烟浓度'] = item[4];
          tempObject['排烟浓度'] = item[5];
          tempObject['风机电'] = item[6];
          tempObject['净化器'] = item[7];
          tempObject['级别'] = item[8];
          tempObject['需报警'] = item[9];
          tempObject['已报警'] = item[10];
          tempObject['归属时间'] = item[11];
          tempObject['上报时间'] = item[12];
          tempObject['数据时间'] = item[13];
          tempObject['重复次数'] = item[14];
          displayData.push(tempObject)
      });
      return displayData
    },

    // 无重复数据时，结果入库
    storeAllToMySql() {
      if(this.allData.length==0){
        alert('请先获取数据')
        return 
      }
      this.openFullScreen()
      axios.post('http://127.0.0.1:5000/store', {'allData':this.allData}).then((response) => {
        console.log(response.data);
        ElMessage.success(response.data)
        this.loadingToMysql.close()
      })
    },

    // 入库新数据（只写入新数据）
    storeNewToMySql() {
      if(this.buttonFlag != -1){
        alert('已入库，不能再重复入库')
        return
      }
      this.buttonFlag = 1
      this.openFullScreen()
      axios
        .post('http://127.0.0.1:5000/store', { 'allData': this.newData })
        .then((response) => {
          console.log(response.data);
          ElMessage.success(response.data)
          this.loadingToMysql.close()
        });
    },


    // 全部数据入库，包括重复的（先写入重复的数据，重复的数据只写入历史数据表
    // 再把新的数据写入4张表中）
    storeDupAllMySql() {
      if(this.buttonFlag != -1){
        alert('已入库，不能再重复入库')
        return
      }
      this.buttonFlag = 1
      this.openFullScreen()
      // 重复数据写入分钟数据表
      axios
        .post('http://127.0.0.1:5000/minute', { 'allData': this.duplicateData })
        .then((response) => {
          console.log(response.data);
        });
      // 新数据写入4张表
      if(this.newData.length != 0){
        setTimeout(() => {
          axios
          .post('http://127.0.0.1:5000/store', { 'allData': this.newData })
          .then((response) => {
            console.log(response.data);
            ElMessage.success(response.data)
            this.loadingToMysql.close()
          });
        }, 2000);
    }
    else{
      this.loadingToMysql.close()
      ElMessage.success('写入完成！')
    }
    },
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
    },

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

      return time;
    },

    // 保存当前选择的行所有信息
    setinfo(index) {
      this.rowShopName = this.displayData[index].diName;
      this.rowExceptionType = this.displayData[index].exceptionType;
      this.rowBeginTime = this.displayData[index].beginTime;
      this.rowEndTime = this.displayData[index].endTime;
      this.rowMvStatCode = this.displayData[index].devId;
      console.log('行名字：', this.rowShopName);
      console.log('行名字：', this.rowExceptionType);
      console.log('行名字：', this.rowBeginTime);
      console.log('行名字：', this.rowEndTime);
    },
    // 供电异常和掉线时的表格数据
    setExceptionData() {
      // 清空，让历史数据条数隐藏，使无数据的标签条数显示出来
      // this.exceedingData=[]
      // 清空上次的数据，防止影响本次的展示数
      // this.abnormalTimeTenMinute = [];
      // 无数据时的时间数组 时间相差10分钟
      const abnormalTimeTenMinute = this.descTenTime(
        this.rowBeginTime,
        this.rowEndTime
      );
      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.exceedingData.push({
          mvStatCode: this.rowMvStatCode,
          diName: this.rowShopName,
          mvDataTime: abnormalTimeTenMinute[i],
          mvFumeConcentration2: '空数据'
        });
      }
      // 保存无数据时表格条数
      this.exceptionTotal = abnormalTimeTenMinute.length
    },
    // 点击表格的行时
    selectTableRow(row) {
      // 获取当前行的索引
      this.selectedRowIndex = this.displayData.indexOf(row);
      // 进入抽屉页面更新头部数据
      this.setinfo(this.selectedRowIndex);
      console.log('选择中行：', this.selectedRowIndex);
    },

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

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

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

        axiosInstance
          .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

        //得到上一行数据索引
        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;
        }
        axiosInstance
          .get('/fume/exceed', { params: params })
          .then((response) => {
            // 保存返回的超标数据
            this.exceedingData = response.data.data;
            console.log('返回的异常数据为：');
            console.log(this.exceedingData);
            this.chart = null;
            this.drawChart();
            this.exceptionTotal = this.exceedingData.length
          });
      }
      //表格的第一行，则上一条无数据
      else {
        console.log(null);
        // 警告
        // ElMessage.info('已是该页最后一条数据');

        // ’下一条‘的按钮不可点击
        // this.isNextCantouch = true
      }
    },

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

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

      this.centerDialogVisible = true;
      // this.drawerVisible = true;
      console.log(this.drawerData);
      // 根据行数据请求详细超标数据渲染折线图
      let params = {};
      if (this.drawerData.devId) {
        params['devId'] = this.drawerData.devId;
      }
      if (this.drawerData.beginTime) {
        params['beginTime'] = this.drawerData.beginTime;
      }
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }
      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
      });
    },

    // 用户根据输入的条件查询
    showTable() {
      if (this.beginTime > this.endTime) {
        alert('请输入正确的时间范围');
        return;
      }
      let params = {};
      // params['page'] = this.startIndex
      // params['pageSize'] = 10
      if (this.deviceId[1]) {
        params['devId'] = this.deviceId[1];
      }
      if (this.exceptionValue.length != 0) {
        params['exceptionValue'] = this.exceptionValue.join();
      }
      console.log('原', this.exceptionValue);
      console.log('处理', this.exceptionValue.join());
      if (this.beginTime) {
        params['beginTime'] = this.beginTime;
      }
      if (this.endTime) {
        params['endTime'] = this.endTime;
      }
      this.loading = true;
      axiosInstance
        .get('/fume/abnormalthree', { params: params })
        .then((response) => {
          this.abnormalData = response.data.data;
          this.total = this.abnormalData.length;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 改变每页显示数目时跳到第一页
      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);
    },

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

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

    // 供电异常和掉线的折线图
    linechart(xAxisData1, abnormalBeginTime, abnormalEndTime, fumeExceeding) {
      this.chart = echarts.init(this.$refs.chart, null, {
        width: 800,
        height: 300
      });
      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'
              }
            }
          }
        ]
      });
    },

    // 展示折线图
    drawChart() {
      // 当出现供电异常和掉线时，时段无数据 则拼接前后段数据
      if (
        this.exceedingData.length === 0 ||
        this.rowExceptionType === '1' ||
        this.rowExceptionType === '2'
      ) {
        // 重构表格 手动填充
        this.setExceptionData();

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

        let paramsBefore = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: before30MinBegin,
          endTime: this.displayData[this.selectedRowIndex].beginTime
        };
        let paramsAfter = {
          devId: this.displayData[this.selectedRowIndex].devId,
          beginTime: after10MinBegin,
          endTime: after40MinEnd
        };
        // 请求前半段
        axiosInstance
          .get('http://localhost:8080/fume/history', { params: paramsBefore })
          .then((result) => {
            this.beforeData = result.data.data;
          });

        // 请求后半段
        axiosInstance
          .get('http://localhost:8080/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
          );
        }, 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]);
        // 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: {}
            }
          },
          xAxis: {
            // type: 'time',
            // 在类目轴（type: 'category'）中有效。
            data: xAxisData1,
            name: '时间'
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto'
              // formatter:'{value} %'
            },
            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}'
                    }
                  }
                },
                data: [
                  {
                    name: '预警',
                    type: 'average',
                    yAxis: 1,
                    lineStyle: {
                      color: '#ff0000'
                    }
                  }
                ]
              }
            }
          ]
        });
      }
    },
    getDeviceInfo() {
      // 级联下拉框数据 从接口中动态获取
      axiosInstance.get('/fume/device').then((result) => {
        this.deviceInfo = result.data.data;
        // 获取到总的店铺数量
        this.shopsTotal = result.data.data.length;
        this.deviceInfo.forEach((item) => {
          this.optionsShop[this.optionsShop.length] = {
            value: item.diName,
            label: item.diName,
            children: [
              {
                value: item.diCode,
                label: item.diCode
              }
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
      // 导出为Excel文件
      const fields = [
        'devId',
        'exceptionType',
        'region',
        'beginTime',
        'endTime'
      ];
      const itemsFormatted = this.abnormalData.map((item) => {
        const newItem = {};
        fields.forEach((field) => {
          newItem[field] = item[field];
        });
        return newItem;
      });
      // 创建xlsx对象
      const xls = XLSX.utils.json_to_sheet(itemsFormatted);
      // 编辑表头行       修改表头
      xls['A1'].v = '设备编号';
      xls['B1'].v = '异常类型';
      xls['C1'].v = '地区';
      xls['D1'].v = '开始时间';
      xls['E1'].v = '结束时间';
      // 创建workbook，并把sheet添加进去
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, xls, 'Sheet1');
      // 将workbook转为二进制xlsx文件并下载
      XLSX.writeFile(wb, '分析数据.xlsx');
    },
    // 查询全部异常表数据
    getAllData() {
      this.loading = true;
      axiosInstance.get('/fume/abnormal').then((result) => {
        this.abnormalData = result.data.data;
        this.total = this.abnormalData.length;
        // 默认显示第一页
        this.handleCurrentChange(1);
        this.loading = false;
      });

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

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

    // 根据异常类型返回店铺名称和设备编号
    // 比如油烟超标对应的所有店铺名称和设备编号（已去除重复的店铺名）
    getShopNames() {
      axiosInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '0',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '1',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception1 = result.data.data;
        });
      axiosInstance
        .get('/fume/shopname', {
          params: {
            exceptionType: '2',
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
        .then((result) => {
          this.exception2 = result.data.data;
        });
    },
    // 页面加载时默认展示7天异常表数据
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
      this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
      // 给时间选择器设置默认时间
      // this.beginTime = dayjs()
      //   .subtract(3, 'week')
      //   .format('YYYY-MM-DD HH:mm:ss');
      // this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');

      // this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      // this.oneWeekAgoDateTime = dayjs().subtract(1,'week').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.currentDateTime, this.oneWeekAgoDateTime);
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
      axiosInstance
        .get('/fume/abnormalone', { params: params })
        .then((response) => {
          // 保存返回的
          this.abnormalData = response.data.data;
          // 分页
          this.total = this.abnormalData.length;
          // 默认显示第一页
          this.handleCurrentChange(1);
          this.loading = false;
        });
    }
  },
  mounted() {
    // 从接口获取店铺名称 给级联下拉框
    this.getDeviceInfo();

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

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

<style scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<template>
  <!-- <el-card >
    <span>使用说明：</span>
    <br/>
    <a href="http://xhhb.senzly.cn/main/sys_login.jsp?from=/sys/index.jsp" target="_blank">点击此网页</a> 
    <div>
      输入账号，密码，验证码之后点击'立即登录'
    </div>
    <div >
      进入页面后，按键盘的‘F12’
    </div>
    <div>
      点击弹出的页面的工具栏的‘网络’或者‘network’,选择下面以.jsp结尾的文件
    </div>
    <div> 
      往下找请求表头中的‘Cookie’，全部复制
    </div>
  </el-card> -->
  <div>
    <iframe
      :src="iframeSrc"
      frameborder="0" 
      width="100%" 
      height="500"
      v-if="isShowIframe"
      v-cloak
    ></iframe>

.iconExcel {
  font-size: 25px;
  margin-left: 20px;
  bottom: -6px;
}
    <div class="header-button">
      <el-button type="primary" @click="cardShow"> 打开网页 </el-button>
      <el-button type="primary" @click="autoLogin"> 模拟登录 </el-button>
    </div>

/* 可鼠标箭头变为可点击状态 */
.clickable {
  cursor: pointer;
}
.card-header {
  margin: 0;
}
    <el-card>
      <!-- <ShopNameSelect @submit-shops="(n)=>selectedShopNames=n"></ShopNameSelect> -->
      <ShopNameCheckBox
        @submit-shops="(n) => (form.selectedShopNames = n)"
      ></ShopNameCheckBox>
      <!-- {{ selectedShopNames }} -->
    </el-card>

/* .el-pagination {
  position: fixed;
  bottom: 0;
  left: 50;
  right: 50;
  height: 60px;
  line-height: 60px;
  background-color: #f2f2f2;
  text-align: right;
  padding-right: 20px;
} */
    <div class="input-cookie">
      <span class="input-cookie-label">cookie</span>
      <el-input
        v-model="form.cookie"
        rows="4"
        type="textarea"
        class="input-cookie-textarea"
      ></el-input>
    </div>

body {
  margin: 0;
    <div class="time-select">
      <TimeSelectCrawling @submit-time="giveTime"> </TimeSelectCrawling>
    </div>

    <div class="getdata-button">
      <el-button color="#626aef" :dark="isDark" plain @click="sendData"
        >获取数据</el-button
      >
    </div>
    <div class="result-textarea" element-loading-text="获取数据中..."  v-loading="loading"  >
      <el-input
        v-model="result"
        rows="6"
        type="textarea"
        class="result-textarea-textarea"
        placeholder="爬取结果"
      ></el-input>
    </div>

    <!-- <div class="progress-percentage">
<el-progress :text-inside="true" :percentage="percentage" stroke-width="15" status="warning"  striped striped-flow duration="5"></el-progress>
</div>


<div class="countdown-time">
  <el-countdown
        title="预计还需要爬取的时间"
        format="HH:mm:ss"
        :value="countdownTime"
      />
</div> -->

    <!-- <div class="result-textarea-data" v-loading="loading">
  <div>数据</div>
  <el-input v-model="allData" rows="6" type="textarea" class="result-textarea-textarea" placeholder="数据"></el-input>
  <div>获取的数据数为：{{ allData.length }}</div>
</div> -->

    <div class="result-textarea-duplication">
      <div>重复的数据</div>
      <!-- <el-input
        v-model="duplicateData"
        rows="6"
        type="textarea"
        class="result-textarea-textarea"
        placeholder="重复的数据"
      ></el-input> -->
      <el-table :data="displayData" height="250" style="width: 100%">
      <el-table-column prop="餐饮店" label="餐饮店" width="180"  fixed />
      <el-table-column prop="供应商" label="供应商" width="180" />
      <el-table-column prop="设备编号" label="设备编号" />
      <el-table-column prop="站点名称" label="设备编号" />
      <el-table-column prop="进烟浓度" label="进烟浓度(mg/m³)" />
      <el-table-column prop="排烟浓度" label="排烟浓度mg/m³)" />
      <el-table-column prop="风机店" label="风机店(A)" />
      <el-table-column prop="净化器" label="净化器(A)" />
      <el-table-column prop="级别" label="级别" />
      <el-table-column prop="需报警" label="需报警" />
      <el-table-column prop="已报警" label="已报警" />
      <el-table-column prop="归属时间" label="归属时间" />
      <el-table-column prop="上报时间" label="上报时间" />
      <el-table-column prop="数据时间" label="数据时间" />
      <el-table-column prop="重复次数" label="重复次数" />
    </el-table>
    </div>

    <!-- <div class="result-textarea">
      <span >重复数量为：{{ duplicateData.length }}</span>
    </div> -->

    <div class="store-button"  >
      <el-button
        type="warning"
        @click="storeAllToMySql"
        v-if="duplicateData.length == 0"
        >结果入库</el-button
      >
      <el-button type="warning" @click="storeNewToMySql" v-if="duplicateData.length != 0"
        >只入库新数据</el-button
      >
      <el-button type="warning" @click="storeDupAllMySql" v-if="duplicateData.length != 0"
        >全部数据入库(包括重复数据)</el-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-button {
  margin-top: 10px;
}
.exception-divider-rowline {
  margin: 10px 0px;
.el-card {
  width: 60%;
  border-radius: 9px;
}
/* 异常分析数据与按钮 */
.exception-container {
.input-cookie {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
  margin-top: 20px;
}
.example-showcase .el-loading-mask {
  z-index: 9;
.input-cookie-label {
  margin-right: 10px;
  margin-top: 10px;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
.input-cookie-textarea {
  width: 45%;
}
.collapse-header {
  font-size: 18px;
  color: burlywood;
.time-select {
  margin-top: 20px;
}
.collapse-header-text {
  margin-left: 60px;
  font-size: 16px;
  color: blue;
.getdata-button {
  margin-top: 20px;
}
/* .el-dialog {
  height: 70%;
} */

.box-card-label {
  font-size: 17px;
.result-textarea {
  margin-top: 20px;
}
/* ‘查看详情’ 的弹出框高度调整 */
:deep().el-dialog {
  height: 98%;
  /* 不出现滚动条 */
  overflow-y: hidden
.result-textarea-textarea {
  width: 50%;
}

/* 店铺名选择文本 */
.describe-info {
  margin-top: 5px;
  font-weight: bold;
.progress-percentage {
  width: 50%;
  margin-top: 20px;
}
/* 时间选择文本 */
.describe-time-text {
  margin-left: 30px;
  margin-top: 5px;
  font-weight: bold;
.countdown-time {
  margin-top: 20px;
}

/* 异常分析按钮容器 */
.box-card-butcontainer {
  /* display: flex;
  direction: column; */
  width: 68.5%;
.restore-button {
  margin-top: 20px;
}
.table-line-lable{
  /* color: black; */
.result-textarea-data {
  margin-top: 20px;
  width: 2100px;
}
/* 异常表格下标签中的数组 */
.table-line-num {
  font-weight: bold;
  color: black;
.result-textarea-duplication {
  margin-top: 20px;
  width: 90%;
}
.button_info.el-button_inner {
  text-align: left;
}
.box-card {
  height: 205px;
}
.mx-1 {
  margin-bottom: 0px;
* {
  margin-left: 10px;
}
</style>