OperationMonitoring/OperationMonitoringView/src/views/LWZXFrontUnit/LWZXFrontUnitDataBacklog.vue

<template>
  <div id="app">
    <el-row>
      <h2 class="countdown-title">数据更新倒计时:</h2>
      <div class="countdown-container">
        <div class="countdown-digit">{{ countdownTimeFormatted[0].value }}</div>
        <div v-if="countdownTimeFormatted.length > 1 && countdownTimeFormatted[1]" class="colon">:</div>
        <div class="countdown-digit">{{ countdownTimeFormatted[1].value }}</div>
      </div>
    </el-row>
    <h1>联网中心前置机-数据积压</h1>
    <HighRoadCenter/>
    <div class="table-container" >
      <el-table :data="jsonData" v-loading="tableLoading" border
                height="96%"
      >
        <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop" :label="column.label"
            align="center"
        >
          <template v-slot="scope">
        <span :style="getCellStyle(scope.row, column.prop)">
          {{ scope.row[column.prop] && scope.row[column.prop].value !== undefined ? scope.row[column.prop].value : scope.row[column.prop] }}
        </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {queryMonitoring, getLWZXFrontUnitDataBacklog} from "../../util/api/api";
import {ElMessage} from "element-plus";
import pro from "../../util/tool";

export default {
  name: "LWZXFrontUnitDataBacklog",
  data() {
    return {
      today: new Date().toISOString().slice(0, 10), // 格式化今天的日期
      jsonData: [],
      baseName:'',
      columns:[],
      monitoringAndTableNames: [],
      tableName: "",
      monitoring: "",
      tableLoading:false,
      countdownTime: 1800, // 设置初始倒计时时间为1800秒（半小时）
      countdownTimer: null // 存储倒计时定时器
    };
  },
  computed: {
    // 格式化倒计时时间以便于显示
    countdownTimeFormatted() {
      const minutes = Math.floor((this.countdownTime % 3600) / 60);
      const seconds = Math.floor(this.countdownTime % 60);
      return [
        {index: 0, value: minutes.toString().padStart(2, '0')},
        {index: 1, value: seconds.toString().padStart(2, '0')}
      ]
    },
  },
  mounted() {
    this.setNetControl();
    this.startCountdown();
    this.fetchTableName().then(() => {
      this.fetchColumnConfig();
    })
  },
  methods: {
    getCellStyle(row, prop) {
      let style = {};
      // 检查updateDate字段是否不是当天
      if (prop === 'updateDate' && this.isNotToday(row[prop])) {
        style.color = 'red';
      }
      // 检查数据是否大于1000
      if (prop !== 'updateDate' && this.isValueGreaterThan1000(row[prop])) {
        style.color = 'red';
      }
      return style;
    },
    isNotToday(dateStr) {
      const date = new Date(dateStr);
      const today = new Date(this.today);
      // 比较日期部分是否相同
      return date.toISOString().slice(0, 10) !== today.toISOString().slice(0, 10);
    },
    isValueGreaterThan1000(value) {
      // 检查值是否大于1000
      return value > 1000;
    },
    async setNetControl() {
      this.tableLoading = true;
      try {
        getLWZXFrontUnitDataBacklog().then(res => {
          console.log(res)
          if (res && res.length > 0) {
            //过滤空的dataJson字段
            let filteredRecords = res.filter(item => item.dataJson && item.dataJson !== '{}');
            this.jsonData = filteredRecords.map(item => {
              const data = JSON.parse(item.dataJson);
              data.baseName = item.baseName;
              data.updateDate = item.updateDate;
              this.markNonTodayTimes(data);
              return data;
            });
          } else {
            this.jsonData = [];
            ElMessage.info('没有查询到数据');
          }
          this.fetchColumnConfig();
        })
      } catch (error) {
        console.error(error);
        ElMessage.error('获取数据失败，请稍后重试！')
      }
      this.tableLoading = false;
    },
    async fetchTableName() {
      try {
        const res = await queryMonitoring();
        if (res.data) {
          this.tableData = res.data;
          this.monitoringAndTableNames = res.data.map(record => ({
            monitoring: record.monitoring,
            tableName: record.tableName
          }));
        }
      } catch (error) {
        console.error('获取监控字段失败:', error);
        ElMessage.error('获取监控字段失败，请稍后重试！');
        // 设置默认值
        this.tableName = '未知';
      }
    },
    async fetchColumnConfig() {
      if (this.jsonData.length > 0 && this.monitoringAndTableNames.length > 0) {
        const columnConfig = this.jsonData[0];
        const keys = Object.keys(columnConfig);
        // 定义前缀到排序优先级的映射
        const prefixOrder = {
          'out_': 1,
          'in_': 2,
          'gantry_': 3
        };
        // 将baseName单独处理，确保它作为第一列
        const baseNameKey = 'baseName';
        const otherKeys = keys.filter(key => key !== baseNameKey);

        // 自定义排序函数
        const sortedOtherKeys = otherKeys.sort((a, b) => {
          // 获取两个键名的前缀
          const prefixA = Object.keys(prefixOrder).find(p => a.startsWith(p));
          const prefixB = Object.keys(prefixOrder).find(p => b.startsWith(p));

          // 如果两个键名有相同的前缀，按照原始顺序排序
          if (prefixA === prefixB) {
            return 0;
          }

          // 如果一个键名有前缀而另一个没有，将有前缀的键名排在前面
          if (!prefixA || !prefixB) {
            return prefixA ? -1 : 1;
          }

          // 根据前缀的排序优先级进行排序
          return prefixOrder[prefixA] - prefixOrder[prefixB];
        });

        // 合并baseName和排序后的其他键
        const sortedKeys = [baseNameKey, ...sortedOtherKeys];
        this.columns = sortedKeys.map(key => {
          let label = key;
          if (label.indexOf("baseName") !== -1){
            label = '联网中心前置机';
          }else  if (label.indexOf("updateDate") !== -1){
            label = '更新时间';
          }
          const matchedRecord = this.monitoringAndTableNames.find(record =>
              key.indexOf(record.monitoring) !== -1
          );
          if (matchedRecord) {
            if (key.endsWith('recs')) {
              label = `${matchedRecord.tableName}`;
            } else if (key.endsWith('mintime')) {
              label = `${matchedRecord.tableName}`;
            }
          }
          return {
            prop: key,
            label: label
          };
        });
      } else {
        this.columns = [];
      }
    },
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        if (this.countdownTime > 0) {
          this.countdownTime -= 1;
        } else {
          clearInterval(this.countdownTimer);
          this.countdownTime = 1800; // 重置倒计时时间
          // 倒计时结束后自动查询
          this.setNetControl();
          // 再次启动倒计时
          this.startCountdown();
        }
      }, 1000);
    },
    refreshData() {
      // 刷新页面数据
      this.setNetControl();
      //重新启动倒计时
      this.startCountdown();
    },
    beforeDestroy() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }
    },
    markNonTodayTimes(rowData) {
      const today = pro.dateFormatDay(new Date()); // 获取当前日期的格式化字符串

      Object.keys(rowData).forEach((key) => {
        // 检查是否是mintime字段
        if (key.endsWith('mintime')) {
          const dateValue = new Date(rowData[key]);
          const formattedDate = pro.dateFormatDay(dateValue); // 获取日期的 "YYYY-MM-DD" 格式
          const isToday = formattedDate === today;

          // 为mintime字段创建包含value和isToday的对象
          rowData[key] = {
            value: rowData[key],
            isToday: isToday
          };
          // 检查并设置对应recs字段的isToday属性
          const recsKey = key.replace('mintime', 'recs');
          if (recsKey in rowData) {
            rowData[recsKey] = {
              value: rowData[recsKey],
              isToday: isToday // 将recs字段的isToday设置为与mintime字段相同
            };
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.table-container {
  height: 70vh;
  overflow-y: auto;
  margin-top: 10px; /* 调整边距 */
}
:deep(.my-label) {
  background: #a0cfff !important;
}
:deep(.my-content) {
  background: #dedfe0;
}
.countdown-container {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.countdown-digit {
  display: inline-block;
  margin: 0 5px;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  background-color: rgba(128, 128, 128, 0.8);
  color: #333333;
  padding: 3px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}

/*添加动画效果，数字翻转*/
@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.colon {
  display: inline-block;
  font-size: 48px;
  margin: 0 5px;
  color: #6b778c;
}
.red-text {
  color: red;
}
/*h2 {*/
/*  color: white;*/
/*}*/
</style>