cac-fronted/src/views/homePage/warnMessage/index.vue

<template>
  <div class="warnmessageBox">
    <h3>
      <span class="arrows1">&gt;</span><span class="arrows2">&gt;</span>
      <span class="arrows3">&gt;</span> {{ pageCardTitle }}
      <span class="arrows3">&lt;</span><span class="arrows2">&lt;</span>
      <span class="arrows1">&lt;</span>
      <el-button
        type="text"
        icon="el-icon-document"
        class="lookMore"
        @click="lookMore"
        >查看全部</el-button
      >
    </h3>
    <div class="cardContent">
      <!-- <el-table
        ref="restauranttable"
        :data="tableData"
        class="tableHi"
        height="154px"
      >
        <el-table-column align="center" prop="warnTime" label="报警时间">
        </el-table-column>
        <el-table-column align="center" prop="zsbName" label="主设备名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="warnDesc"
          label="告警信息"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.warnDesc"
              placement="top"
            >
              <span> {{ scope.row.warnDesc }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="warnValue" label="当前值">
        </el-table-column>
        <el-table-column align="center" prop="triggerDesc" label="触发条件">
        </el-table-column>

        <el-table-column align="center" prop="threshold" label="告警阈值">
        </el-table-column>
        <el-table-column align="center" prop="warnLevel" label="告警等级">
          <template slot-scope="scope">
            <span v-if="scope.row.warnLevel == 2">高 </span>
            <span v-else-if="scope.row.warnLevel == 1"> 中 </span>
            <span v-else-if="scope.row.warnLevel == 0"> 低 </span>
          </template>
        </el-table-column>
      </el-table> -->
      <ul class="warntitle">
        <li>报警时间</li>
        <li>主设备名称</li>
        <li>告警信息</li>

        <li>当前值</li>
        <li>触发条件</li>
        <li>告警阈值</li>
        <!-- <li>告警等级</li> -->
      </ul>
      <div class="marquee">
        <ul class="scrollUl" v-if="tableData.length !== 0">
          <li v-for="(item, index) in tableData" :key="index">
            <span>{{ item.warnTime }}</span>
            <span>{{ item.zsbName }}</span>
            <span :title="item.warnDesc">{{ item.warnDesc }}</span>
            <span>
              <span v-if="item.unit">
                {{ item.warnValue }}{{ item.unit }}
              </span>
              <span v-else>
                {{ item.warnValue }}
              </span></span
            >
            <span :title="item.triggerDesc">{{ item.triggerDesc }}</span>
            <span>{{ item.threshold }}</span>
            <!-- <span>
              <span v-if="item.warnLevel == 2">高 </span>
              <span v-else-if="item.warnLevel == 1"> 中 </span>
              <span v-else-if="item.warnLevel == 0"> 低 </span></span
            > -->
          </li>
        </ul>
        <div v-else class="empty">暂无告警</div>
      </div>
    </div>
    <warnDialog ref="warnRef"></warnDialog>
  </div>
</template>

<script>
import { warningListApi } from "@/utils/api/index";
import warnDialog from "./components/warnDialog.vue";

export default {
  name: "warnmessage",
  components: {
    warnDialog,
  },
  data() {
    return {
      pageCardTitle: "告警/故障信息",
      tableData: [],
      starttime: "",
      endtime: "",
      params: {},
      isMoving: true,
      isDuplicated: true, // 用于判断是否添加复制的项
      intervalId: null, // 用于保存 setInterval 的 ID
    };
  },
  created() {
    const startDate = new Date(); // 获取当前时间
    startDate.setHours(0); // 设置小时为23
    startDate.setMinutes(0); // 设置分钟为59
    startDate.setSeconds(0); // 设置秒数为59
    this.starttime = startDate;

    const currentDate = new Date(); // 获取当前时间
    currentDate.setHours(23); // 设置小时为23
    currentDate.setMinutes(59); // 设置分钟为59
    currentDate.setSeconds(59); // 设置秒数为59
    this.endtime = currentDate;
  },
  mounted() {
    this.getwarnList();
    // 启动定时器（如果尚未启动）
    this.startIntervalIfNeeded();
  },

  methods: {
    lookMore() {
      this.params.startTime = this.starttime;
      this.params.endTime = this.endtime;
      this.params.pageSize = 20;
      this.params.pageNum = 1;
      console.log(this.params);
      this.$refs.warnRef.display(this.params);
    },
    getwarnList() {
      this.starttime = this.$moment(this.starttime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.endtime = this.$moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");

      this.params.startTime = this.starttime;
      this.params.endTime = this.endtime;
      this.params.pageSize = 20;
      this.params.pageNum = 1;
      this.params.state = 1;
      warningListApi(this.params)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.content;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    startIntervalIfNeeded() {
      // 如果定时器尚未启动，则启动它
      if (this.intervalId === null) {
        this.intervalId = setInterval(this.getwarnList, 60000);
      }
    },
    stopInterval() {
      // 停止定时器
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
  },
  beforeDestroy() {
    // 在组件销毁前停止定时请求
    this.stopInterval();
  },
};
</script>

<style lang="less">
.warnmessageBox {
  padding: 0px 10px;
  height: 100%;
  h3 {
    height: 38px;
    line-height: 38px;
    box-sizing: border-box;
    color: #fff;
    font-weight: normal;
    text-align: left;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #fff;

    /* 警告标题箭头 */
    .arrows3 {
      color: #fff;
    }
    .arrows2 {
      color: rgba(256, 256, 256, 0.5);
    }
    .arrows1 {
      color: rgba(256, 256, 256, 0.15);
    }
    .lookMore {
      margin-left: auto;
      color: #fff;
      margin-right: 4px;
      font-size: 14px;
      &:hover {
        color: #03bcff;
        text-decoration: underline;
      }
    }
  }
  .cardContent {
    margin-top: 10px;
    height: calc(100% - 54px);

    .warntitle {
      width: 100%;
      display: flex;
      line-height: 24px;
      height: 24px;
      border-bottom: 1px solid #eee;
      align-items: center;
      justify-content: space-around;
      li {
        list-style: none;
        font-size: 12px;
        text-align: center;
        &:first-child {
          width: 13%;
        }
        &:nth-child(2) {
          width: 15%;
        }
        &:nth-child(3) {
          width: 24%;
        }
        &:nth-child(4) {
          width: 10%;
        }
        &:nth-child(5) {
          width: 12%;
        }
        &:nth-child(6) {
          width: 8%;
        }
        &:nth-child(7) {
          width: 8%;
        }
      }
    }
    .marquee {
      height: calc(100% - 26px);
      display: flex;
      overflow: hidden;
      margin-top: 2px;
      width: 100%;

      .scrollUl {
        animation: 10s scrollTop linear infinite; /* 根据需要调整动画时间和速度 */
        width: 100%;

        li {
          list-style: none;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
          height: 24px;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-around;
          width: 100%;
          span {
            &:first-child {
              width: 13%;
            }
            &:nth-child(2) {
              width: 15%;
            }
            &:nth-child(3) {
              width: 24%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(4) {
              width: 10%;
            }
            &:nth-child(5) {
              width: 12%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(6) {
              width: 8%;
            }
          }
        }
      }
      .empty {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    }

    @keyframes scrollTop {
      0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
      }
    }

    .el-table th.el-table__cell {
      background-color: transparent;
    }
    .el-table thead {
      color: #fff;
    }
    .el-table {
      background-color: transparent;
      color: #fff;
      tr {
        background: transparent;
      }
    }
    .el-table--small .el-table__cell {
      padding: 2px 0;
    }
    .el-table__empty-text {
      color: #fff;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background-color: rgba(255, 27, 27, 0.2);
    }
    .el-table::before {
      height: 0;
    }
  }
}
.el-notification__content {
  text-align: left;
  word-break: break-all;
}
</style>