project-neic/src/components/warning/warningRecords.vue

<template>
  <el-dialog
    width="60%"
    @open="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <div class="showTitles">
        <div class="titles">报警记录</div>
      </div>
    </template>
    <div class="recordBody">
      <div class="operate">
        <el-date-picker
          class="picker"
          @change="changes"
          v-model="timeValue"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <div class="showTitle">场站：</div>
        <el-select
          class="selects"
          clearable
          v-model="selectValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in stationList"
            :key="item.id"
            :label="item.stationName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div class="showTitle">搜索:</div>
        <el-input class="inputs" placeholder="请输入" v-model="filterText"></el-input>
        <div class="buttons" @click="search()">查询</div>
      </div>
      <div class="warningList">
        <el-table
          :data="recordData"
          class="table"
          height="55vh"
          :header-cell-style="{
            background: '#000000',
            color: 'rgb(220,220,220)',
            padding: '4px',
            fontSize: '14px',
            'border-bottom': 'solid 1px black',
          }"
          :cell-style="{
            height: '45px',
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '3px',
            fontSize: '12px',
            'border-bottom': '1px solid #000000',
          }"
          @row-dblclick="itemDblclick"
        >
          <el-table-column
            prop="faultTime"
            align="center"
            label="故障时间"
            width="280"
          >
          </el-table-column>
          
          <el-table-column
            prop="categoryName"
            align="center"
            label="故障类型"
            width="120"
          >
          </el-table-column>

          <el-table-column
            prop="showName"
            align="center"
            label="名称"
            width="150"
          >
          </el-table-column>
          
          <el-table-column width="80"  align="end">
            <template #default="scope">
              <span>
                <img
                  class="titleImg"
                  v-if="scope.row.category1 === 'SYZ'"
                  src="../../assets/img/controlcenter/warning.png"
                  alt=""
                />
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="alertText"
            align="center"
            label="描述"
          >
          </el-table-column>
        </el-table>
        
      </div>
      <div class="paginations">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :hide-on-single-page="true"
            :page-size="currentPage"
            >
          </el-pagination>
        </div>
    </div>
  </el-dialog>
</template>
<script>
import dayjs from "dayjs";
import api from "api/index";
export default {
  data() {
    return {
      timeValue: [],
      chooseTime: [],
      recordData: [],
      pageIndex: 1,
      currentPage: 10,
      total: 10,
      selectValue: "",
      filterText: "",
      stationList: [],
    };
  },
  updated() {},
  methods: {
    faultHistory() {
      api
        .getFaultHistory({
          startTime: dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss"),
          endTime: dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss"),
          stationid: this.selectValue,
          keyword: this.filterText,
          pageSize: this.currentPage,
          pageIndex: this.pageIndex,
        })
        .then((res) => {
          res.data.records.forEach(item =>{
            if(item.category1 === "FJ"){
              item.showName = item.windturbineName
            }else{
              item.showName = item.stationName
            }
          })
          this.recordData = res.data.records;
          this.total = res.data.total
        });
    },
    changes() {
      let timeValue = [];
      this.timeValue?.forEach((item) => {
        timeValue.push(dayjs(item).valueOf());
      });
      this.chooseTime = timeValue;
    },
    search() {
      this.faultHistory();
    },
    opened() {
      if (this.timeValue.length === 0) {
        let date = new Date();
        this.timeValue[0] = date.getTime() - 86400000;
        this.timeValue[1] = date.getTime();
      }
      this.chooseTime = this.timeValue;
      this.faultHistory();
      this.stationList = this.$store.state.stationList
      console.log(this.stationList);
    },
    closed() {
      this.chooseTime = [];
      this.pageIndex = 1;
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.faultHistory();
    },
  },
};
</script>
<style scoped>
.recordBody {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  background-color: black;
  width: 100%;
  margin-top: -30px;
  padding-top: 10px;
}
.warningList {
  width: 100%;
  height: 60vh;
}
.paginations {
  display: flex;
  flex-direction: row-reverse;
  background-color: #000000;
  margin-top: -60px;
  z-index: 2;
  width: 100%;
  padding-bottom: 30px;
}
.selects {
  border: none;
  width: 174px !important;
}
.inputs {
  border: none;
  width: 174px !important;
  margin-right: 20px;
}
.showTitle{
  margin-left: 20px;
  margin-right: 10px;
  color: #ffffff;
  font-size: 16px;
}
.titleImg {
  width: 20px;
  height: 20px;
  margin-left: 22px;
  display: flex;
}
.table {
  background-color: #000000 !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #000000 !important;
}

.el-table__header {
  width: 100% !important;
}

.el-table__body-wrapper {
  background-color: #000000 !important;
}

.el-table::before {
  width: 0;
}

</style>