异常页面表格列的颜色

zmc

2023-08-15 9bfdf6ecef01397978c140aa4fbd8c4840d894fb

异常页面表格列的颜色

 .eslintrc-auto-import.json

@@ -59,6 +59,7 @@
    "watchEffect": true,
    "watchPostEffect": true,
    "watchSyncEffect": true,
    "ElMessage": true
    "ElMessage": true,
    "ElLoading": true
  }
}

 src/sfc/ExceptionText.vue

@@ -28,9 +28,11 @@
</script>

<template>
  <el-link @click="requestExceptionData"><slot/></el-link>
  <el-link @click="requestExceptionData" class="text"><slot/></el-link>
</template>

<style lang="scss" scoped>

.text {
  color: #000000;
}
</style>

 src/sfc/TimeSelect.vue

@@ -34,7 +34,7 @@
  methods:{
    initOneWeekAgoTime(){
      // 给时间选择器设置默认时间为一周前
    this.time[0] = dayjs().subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss');
    this.time[0] = dayjs().subtract(3, 'week').format('YYYY-MM-DD HH:mm:ss');
    this.time[1] = dayjs().format('YYYY-MM-DD HH:mm:ss');
    }
  }

 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>


 src/views/HistoryFume.vue

@@ -672,20 +672,12 @@
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
:deep().el-dialog {
  border-radius: 9px;
}
@media screen and (max-width: 768px) {
  /* 在小屏幕上应用的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在中等屏幕上应用的样式 */
}

@media screen and (min-width: 1025px) {
  /* 在大屏幕上应用的样式 */
.el-table {
  color: #000000;
}
</style>

 src/views/IndexView.vue

@@ -70,17 +70,9 @@
        checkedShops: []
      }

      // chartInstance: []
      // // 内部设备
      // devices: []
    };
  },
  watch: {
    // 'outside.checkedShops'(){
    //   this.saveOutsideData()
    //     console.log('111');
    // }
  },

  methods: {
    //获取所有店铺名字
    getDeviceInfo() {
@@ -461,7 +453,7 @@
        :key="device.mvStatCode"
      >
        <!-- 内部设备 -->
        <el-card v-if="index < inner.inFumeValue.length" height="1900px">
        <el-card v-if="index < inner.inFumeValue.length"  class="card-font-color" height="1900px">
          <template #header>
            <div class="card-header">{{ device.siteName }} 
              <img src="@/assets/inner_device.jpg" class="icon-inner"/>
@@ -470,8 +462,9 @@
          </template>
          <div class="report-time-text">数据发布时间：{{ device.time }}</div>
          <DashBoard :data="device.value"></DashBoard>

          <div >设备编号：{{ device.mnCode }}</div>
          <!-- <hr class="divider-margin" /> -->

          <div class="horizontal-line"></div>
          
          <div class="status" :class="{ exceed: device.value > 1 }">
@@ -482,7 +475,7 @@
          <br />
        </el-card>
        <!-- 外部设备 -->
        <el-card v-else>
        <el-card v-else class="card-font-color">
          <template #header>
            <div class="card-header">
              {{ device.diName }}
@@ -501,11 +494,11 @@
          </span>
         </div>
         <div class="horizontal-line"></div>
          <!-- <hr class="divider-margin" /> -->

          <div>设备编号：{{ device.mvStatCode }}</div>

          <div class="horizontal-line"></div>
          <!-- <hr class="divider-margin" /> -->

          <div>设备供应商：{{ device.diSupplier }}</div>
          <div
            class="status"
@@ -598,6 +591,11 @@
  color: #999999;
}

.card-font-color {
  color: #000000;
}





@@ -641,10 +639,7 @@
  width: calc(100% / 6);
  // margin-left: 70px;
}
// .input-search {
//   display: flex;
//   justify-content: left;
// }

.save-switch {
  margin-top: 20px;
  margin-left: 20px;

 src/views/analysis/graph/AllRate.vue

@@ -1,10 +1,6 @@
<template>
  <div>
    <el-container>
      <!-- <el-header style="text-align:right; font-size:15px ">
         <i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
        <span style="color:rgb(226,207,207);">百分比数据</span>
        </el-header> -->

    <el-main> 
      <el-form :inline="true"  class="demo-form-inline">
@@ -434,5 +430,8 @@
    color: #333;
    line-height: 60px;
  } 

:deep().el-form .el-form-item__label{
  color: #000000;
  font-weight: bold;
}
</style>