异常页面表格列的颜色

zmc

2023-08-15 9bfdf6ecef01397978c140aa4fbd8c4840d894fb

 src/views/ExceedingFume.vue

@@ -5,9 +5,7 @@
    <div ref="h1" class="header-container">
      <span class="describe-info">店铺名选择：</span>
      <!-- 店铺名  级联 -->
      <ShopNameAndID
        @submit-id="(n) => (deviceId[1] = n)"
      ></ShopNameAndID>
        <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID>

      <!-- 异常类型选择 -->
      <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)">
@@ -20,7 +18,6 @@
      ref="h2"
      style="display: flex; margin-top: 2px; justify-content: right"
    >
   
      <el-button
        type="primary"
        plain
@@ -259,11 +256,12 @@
        v-loading="loading"
        :data="displayData"
        style="width: 100%"
        stripe
        border
        :height="tableHeight"
      :cell-class-name="tableCellClassName"
 
      >
        <el-table-column fixed prop="diName" label="店铺名称" >
      <el-table-column prop="diName" label="店铺名称">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.diName">
              <div class="cell ellipsis">{{ row.diName }}</div>
@@ -317,7 +315,10 @@
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="{ row }">
            <el-button type="warning" @click="showDrawer(row)"
          <el-button
            type="primary"
            class="table-button"
            @click="showDrawer(row)"
              >查看详情</el-button
            >
          </template>
@@ -383,7 +384,10 @@
          "
        ></div> -->

        <ExceptionTypeLineChart :option="option" :is-open-dialog="centerDialogVisible"></ExceptionTypeLineChart>
      <ExceptionTypeLineChart
        :option="option"
        :is-open-dialog="centerDialogVisible"
      ></ExceptionTypeLineChart>

        <!--  -->
        <div style="margin-top: 40px; margin-bottom: 5px; border: 1px">
@@ -405,8 +409,12 @@
        </div>

        <el-tag type="success" class="mx-1" effect="dark" round
          ><span class="table-line-lable" v-show="rowExceptionType == '0'">异常记录： </span>
          <span v-show="rowExceptionType == '1' || rowExceptionType == '2'">缺失数据：</span>
        ><span class="table-line-lable" v-show="rowExceptionType == '0'"
          >异常记录：
        </span>
        <span v-show="rowExceptionType == '1' || rowExceptionType == '2'"
          >缺失数据：</span
        >
          <span class="table-line-num">{{ exceptionTotal }}条</span>
          <span v-show="rowExceptionType === '1' || rowExceptionType === '2'">
            (逻辑计算)</span
@@ -552,7 +560,7 @@
      // 店铺名 级联选择器
      optionsShop: [],
      // 异常类型选择器
      exceptionValue: [],
      exceptionValue: []
    };
  },
  // 监听  判断按钮是否可点击
@@ -600,19 +608,32 @@
    this.getRecentSevenDays();
    // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名
    this.getShopNames();
    this.calcTableHeight()
    this.calcTableHeight();
    window.addEventListener('resize', this.updateChart);
 
  },
  methods: {
     // 动态计算表格高度
    // 功能：改变表格某个单元格的颜色
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
     if(columnIndex == 3){
        if (row.exceptionType == '0') {
          return 'exceeding-row';
        } else if (row.exceptionType == '1') {
          return 'abnormal-power-supply';
        } else if (row.exceptionType == '2') {
          return 'disconnect';
        }
     }
      
    },

    //功能： 动态计算表格高度
     calcTableHeight(){
      const h1 = this.$refs.h1.$el.offsetHeight;
      const h2 = this.$refs.h4.$el.offsetHeight;
      this.tableHeight =  `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`;
    },
    
    // 时间是否超过10分钟
    //功能： 时间是否超过10分钟
    isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) {
      const date1 = new Date(dateString1);
      const date2 = new Date(dateString2);
@@ -707,6 +728,7 @@
    //     }
    //   });
    // },

    // 从时间选择器组件拿到开始和结束时间
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
@@ -719,8 +741,8 @@
    descTenTime(begin, end) {
      let time = [];
      if(begin == end){
        time.push(begin)
        return time
        time.push(begin);
        return time;
      }
      // 保留结果 00 10 20 30
      let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss');
@@ -748,9 +770,9 @@
        const abnormalTimeTenMinute = this.descTenTime(
        this.rowBeginTime,
        this.rowEndTime
      )
      );
      // 去除供电异常和掉线区间的第一个有元素的值
      this.exceedingData = []
      this.exceedingData = [];

      for (let i = 0; i < abnormalTimeTenMinute.length; i++) {
        this.exceedingData.push({
@@ -1022,7 +1044,7 @@
    findTimeInExceptionData(data, time) {
      for (let i = 0; i < data.length; i++) {
        if(data[i]==null){
            continue
          continue;
        }
        if (data[i]['mvDataTime'] == time) {
          return data[i]['mvFumeConcentration2'];
@@ -1059,7 +1081,6 @@
        current = dayjs(current)
          .add(10, 'minute')
          .format('YYYY-MM-DD HH:mm:ss');
      
      }
      obj['xAxis'] = xAxis;
      obj['yAxis'] = yAxis;
@@ -1071,16 +1092,14 @@
    removeLastItemOfBeforeData(beforeDataOfExceeding){
      let tempList = [];
      if(beforeDataOfExceeding.length ==1){
        return tempList
        return tempList;
      }else{
        for(let i=0;i<beforeDataOfExceeding.length-1;i++){
        tempList.push({ ...beforeDataOfExceeding[i]})
          tempList.push({ ...beforeDataOfExceeding[i] });
      }
      return tempList;
      }
    },



    // 设置option
    // 参数：x轴时间， y轴油烟浓度， 异常类别(0代表超标，1代表供电异常和掉线), 异常开始时间，异常结束时间，异常开始时间在整个区间的索引下标，异常结束时间在整个区间的索引下标
@@ -1093,7 +1112,7 @@
      beginIndex,
      endIndex
    ) {
      this.option = {}
      this.option = {};
      // 超标
      if (exceptionCategory == 0) {
        this.option = {
@@ -1120,7 +1139,7 @@
          },
          yAxis: {
            type: 'value',
            name: 'mg/m³',
            name: 'mg/m³'
          },
          series: [
            {
@@ -1146,10 +1165,10 @@
                  [
                    {
                      name: '超标时间段',
                      xAxis: exceptionBeginTime,
                      xAxis: exceptionBeginTime
                    },
                    {
                      xAxis: exceptionEndTime,
                      xAxis: exceptionEndTime
                    }
                  ]
                ]
@@ -1262,15 +1281,14 @@
      }
    },


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

      // beforeAndAfterTime[0]:前30分钟的时间点
      // beforeAndAfterTime[1]:后10分钟的时间点
@@ -1337,7 +1355,9 @@
              } 
              // 超标
              else {
                let beforeTemp = this.removeLastItemOfBeforeData(this.beforeData)
                let beforeTemp = this.removeLastItemOfBeforeData(
                  this.beforeData
                );
                // 前后区间只显示距离超标区间时间最近的浓度小于1的时间点
                for (let i = beforeTemp.length - 1; i >= 0; i--) {
                  if (beforeTemp[i].mvFumeConcentration2 >= 1) {
@@ -1645,6 +1665,7 @@
}
.text-blank {
  margin-right: 10px;
  color: #000000;
}
/* 店铺名选择文本 */
.describe-info {
@@ -1694,10 +1715,41 @@
  justify-content: right;
  margin-bottom: 10px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
/* :global(.el-table .exceeding-row) {
  --el-table-expanded-cell-bg-color: #f53f3f;
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
: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;
}
:deep().el-table__row .abnormal-power-supply{
  background-color:  #FDF4BF;
}
:deep().el-table__row .disconnect{
  background-color:  #F7BA1E;
}


.el-table {
  color: #000000;
}
/* 表格的内边距 */
:deep().el-table .el-table__cell {
  padding: 2px;
}


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

</style>