zmc
2023-08-15 d58be9584f409e7d198fd34982155331d6710f1f
src/views/ExceedingFume.vue
@@ -12,7 +12,6 @@
        </ExceptionType>
        <TimeSelect @submit-time="giveTime"></TimeSelect>
        <!-- </div> -->
      </div>
      <div
        ref="h2"
@@ -23,6 +22,7 @@
          plain
          @click="showTable"
          style="margin-left: 20px"
          :loading="button.queryButton"
          >查询</el-button
        >
@@ -244,10 +244,9 @@
          </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">
@@ -354,13 +353,15 @@
        <div class="dialog-button-position">
          <el-button
            type="danger"
            :disabled="isPreCantouch"
            :loading="button.preButton"
            :disabled="isPreCantouch || banTouch"
            @click="getPreviousRowData"
            >上条异常</el-button
          >
          <el-button
            type="danger"
            :disabled="isNextCantouch"
            :loading="button.afterButton"
            :disabled="isNextCantouch || banTouch"
            @click="getNextRowData"
            >下条异常</el-button
          >
@@ -387,6 +388,7 @@
      <ExceptionTypeLineChart
        :option="option"
        :is-open-dialog="centerDialogVisible"
        v-loading="chartLoading"
      ></ExceptionTypeLineChart>
      <!--  -->
@@ -451,6 +453,18 @@
  },
  data() {
    return {
      // 折线图加载中
      chartLoading:false,
      button:{
        // 查询按钮
        queryButton:false,
        // 上一条按钮
        preButton:false,
        // 下一条按钮
        afterButton:false,
        //
        banTouch:0
      },
      // 异常折线图的配置
      option: {},
      // 折线图展示
@@ -659,7 +673,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');
@@ -688,7 +701,6 @@
      const year2 = date2.getFullYear();
      const month2 = date2.getMonth();
      const day2 = date2.getDate();
      console.log(month1, month2);
      // 判断两个日期是否相差一个月
      if (year1 === year2) {
@@ -798,6 +810,9 @@
    getNextRowData() {
      // 不是表格的第一行
      if (this.selectedRowIndex !== 0) {
        // 点击过程中 锁住上下条按钮  在设置完图形配置项后解锁
        this.banTouch = 1
        //得到上一行数据索引
        this.selectedRowIndex = this.selectedRowIndex - 1;
        //请求数据 改变exceedingData
@@ -813,32 +828,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);
@@ -853,19 +865,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);
      }
    },
@@ -892,6 +901,7 @@
      if (this.drawerData.endTime) {
        params['endTime'] = this.drawerData.endTime;
      }
      axiosInstanceInstance
        .get('/fume/exceed', { params: params })
        .then((response) => {
@@ -916,8 +926,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;
      }
@@ -925,12 +934,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;
@@ -939,8 +951,7 @@
          // 移除空数据状态
          this.isNoData = false;
          this.handleCurrentChange(1);
          console.log('返回的数据', this.abnormalData);
          console.log('长度', response.data.data.total);
        });
    },
    handleSizeChange(val) {
@@ -964,7 +975,6 @@
      // 计算结束时间减去开始时间中间相差多少个十分钟
      const diffInMinutes = end.diff(start, 'minute');
      const diffInTenMinutes = Math.floor(diffInMinutes / 10);
      console.log('几个10分钟', diffInTenMinutes);
      return diffInTenMinutes;
    },
@@ -1279,6 +1289,7 @@
          ]
        };
      }
      this.banTouch = 0
    },
    // 功能:点击 ‘查看详情’, ‘下一条’按钮时会 先逻辑计算。最后展示图形
@@ -1312,18 +1323,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 = [];
              // 保存异常区间前后的值
@@ -1351,7 +1362,6 @@
                after = this.shallowCopyList(this.afterData);
                // after = this.afterData
                console.log('after:', after);
              }
              // 超标
              else {
@@ -1381,7 +1391,6 @@
              // 将前后区间数据 与 异常区间数据 合并
              this.allExceptionTimeData = [...before, ...tempArr, ...after];
              console.log('组合数据:', this.allExceptionTimeData);
              // x轴日期时间
              let dateList = [];
              // y轴 超标油烟浓度
@@ -1397,9 +1406,6 @@
              dateList = timeAndValue['xAxis'];
              fumeExceeding = timeAndValue['yAxis'];
              console.log('dateList:', dateList);
              console.log('fumeExceeding:', fumeExceeding);
              // 提取异常起始时间点在整个区间内的数据索引
              let startIndex = dateList.findIndex(
@@ -1435,6 +1441,7 @@
                  endIndex
                );
              }
              this.chartLoading = false
            });
        });
    },
@@ -1457,7 +1464,6 @@
            ]
          };
        });
        console.log(this.optionsShop);
      });
    },
    exportDom() {
@@ -1511,8 +1517,6 @@
        })
        .then((result) => {
          this.exception0 = result.data.data;
          console.log('异常0', this.exception0);
          console.log('异常0数量', this.exception0.length);
        });
      axiosInstanceInstance
        .get('/fume/shopname', {
@@ -1542,7 +1546,6 @@
    getRecentSevenDays() {
      // 给级联选择器设置默认的选择项
      this.devId = ['付小姐在成都', 'qinshi_31010320210010'];
      console.log(this.currentDateTime, this.oneWeekAgoDateTime);
      let params = {};
      params['beginTime'] = this.beginTime;
      params['endTime'] = this.endTime;
@@ -1567,13 +1570,7 @@
</script>
<style scoped>
/* .exception-root-container {
  margin: 20px;
  padding: 10px;
  border: 1px;
  height: 615px;
} */
.header-container {
  display: flex;
  margin-left: 20px;
@@ -1609,8 +1606,6 @@
/* 异常分析数据与按钮 */
.exception-container {
  display: flex;
  /* direction: column; */
  /* flex-grow: 2,1; */
}
.example-showcase .el-loading-mask {
  z-index: 9;
@@ -1632,7 +1627,6 @@
  font-size: 18px;
}
.collapse-header-text {
  /* margin-right: 150px; */
  margin-top: 5px;
  font-size: 14px;
  color: gray;
@@ -1641,7 +1635,6 @@
.box-card-label {
  font-size: 14px;
  white-space: nowrap;
  /* overflow-x: auto; */
}
:deep().el-card {
  border-radius: 9px;
@@ -1656,9 +1649,7 @@
.table-page {
  margin-left: 20px;
}
:deep().table-page .el-card__body {
  /* padding: 0px; */
}
.table-text {
  font-size: 18px;
  margin: 5px 0px 10px 20px;
@@ -1697,16 +1688,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;
}
@@ -1715,16 +1702,6 @@
  justify-content: right;
  margin-bottom: 10px;
}
/* :global(.el-table .exceeding-row) {
  --el-table-expanded-cell-bg-color: #f53f3f;
}
:global(.el-table .abnormal-power-supply) {
  --el-table-expanded-cell-bg-color: #ffcf8b;
}
:global(.el-table .disconnect) {
  --el-table-expanded-cell-bg-color: #ff7d00;
} */
:deep().el-table__row .exceeding-row{
  background-color:  #F53F3F;