hb-neic-project/src/components/search/record.vue

<template>
  <el-dialog width="70%" @open="opened" @closed="closed" :fullscreen="true" :show-close="true" class="dialogs">
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">推荐记录查询</div>
      </div>
    </template>
    <div class="body">
      <div class="searchTitle">
        <div class="search">
          <div class="date">风场:</div>
          <el-select @change="listedChange(selectValue)" class="inputs" v-model="selectValue" placeholder="请选择">
            <el-option v-for="item in stationList" :key="item.id" :label="item.name"  :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="search">
          <div class="date">风机名称:</div>
          <el-select class="inputs" v-model="selectWind" @change="handleChange" placeholder="请选择" clearable>
            <el-option v-for="item in windturbinelist" :key="item.id" :label="item.id" :value="item.id">
            </el-option>
          </el-select>
        </div>

        <div class="buttons" @click="getData()">查询</div>
      </div>
      <div class="tables">
        <el-table
          :data="recordList"
          class="table"
          style="width: 100%"
          height="80vh"
          :header-cell-style="{
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '4px',
            fontSize: '14px',
            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
          }"
          :cell-style="{
            height: '40px',
            background: 'rgb(30,30,30)',
            color: 'rgb(220,220,220)',
            padding: '3px',
            fontSize: '12px',
            'border-bottom': '1px solid #000000',
          }"
        >
          <el-table-column
            prop="recommendedDate"
            label="推荐时间"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="stationId" label="场站" align="center">
          </el-table-column>
          <el-table-column prop="windturbineId" label="风机" align="center">
          </el-table-column>
          <el-table-column prop="windSpeed" label="推荐时风速" align="center">
          </el-table-column>
          <el-table-column prop="averageWindSpeed5" label="推荐时五分钟平均风速" align="center">
          </el-table-column>
          <el-table-column label="推荐操作" align="center">
            <template #default="scope">
                  <span>
                    {{ controlType[scope.row?.controlType] }}
                  </span>
                </template>
          </el-table-column>
          <el-table-column prop="rollSpeed" label="推荐时发电机转速" align="center">
          </el-table-column>
          <el-table-column prop="power" label="推荐时功率" align="center">
          </el-table-column>
          <el-table-column prop="theoreticalPower" label="推荐时理论功率" align="center">
          </el-table-column>
          <el-table-column prop="healthIndex" label="推荐时健康指数" align="center">
          </el-table-column>
          <el-table-column prop="cause" label="推荐原因" align="center">
          </el-table-column>

        </el-table>
      </div>
      <div class="paginations">
        <el-pagination :hide-on-single-page="true" :page-size="1" background layout="prev, pager, next"
          :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import api from "api/index";
import dayjs from "dayjs";
export default {
  components: {
  },
  data() {
    return {
      selectValue: "",
      stationList: [],
      selectWind: "",
      windturbinelist: [],
      pagesize: 20,
      pagenum: 1,
      total: "",
      recordList: [],
      controlType:{
        Nothing: '不推荐 ',
        Start: '推荐启动 ',
        Stop: '推荐停机',
        Maintain: '推荐维护',
        UnMaintain: '取消维护',
        Lock: '挂牌',
        UnLock: '取消挂牌 ',
      }
    };
  },
  created() {

  },
  mounted() { },
  methods: {
    opened() {
    //   let stationList = this.$store.state.stationList;
    let stationArr = [
        {
            name: '全部',
            id: ''
        }
      ]
        this.$store.state.stationList.forEach(item =>{
            if (item.name.indexOf('全部') === -1) {
                stationArr.push(item)
            }
        })
      let stationList = stationArr;
      this.selectValue = stationList[0].id;
      this.stationList = stationList;
      this.listedChange(this.selectValue);
      this.getData()
    },
    closed() {
      this.pagenum = 1;
    },
    listedChange(value) {
      this.windturbinelist = [];
      let windturbinelist = this.$store.state.windturbinelist;
      let arr = Object.keys(windturbinelist).sort();
      let windturbine = [];
      for (const key of arr) {
        let wind = windturbinelist[key];
        if (wind.stationId === value) {
          windturbine.push(wind);
        }
      }
      this.selectWind = windturbine[0]?.id || "";
      this.windturbineId = windturbine[0]?.windturbineId
      this.windturbinelist = windturbine;
    },
    getData() {
      api.recommended({
        pagesize: this.pagesize,
        pagenum: this.pagenum,
        stationid: this.selectValue === 'WIND_ALL' ? '' : this.selectValue,
        windturbineid: this.selectWind,
      }).then(res => {
        if (res.data) {
          this.total = Number(res.data.totalPages)
          res.data.content.forEach(item => {
            item.recommendedDate = dayjs(item.recommendedDate ).format("YYYY-MM-DD HH:mm:ss")
            item.power = item.power.toFixed(2)
            item.rollSpeed = item.rollSpeed.toFixed(2)
            item.theoreticalPower = item.theoreticalPower.toFixed(2)
            item.windSpeed = item.windSpeed.toFixed(2)
            item.averageWindSpeed5 = item.averageWindSpeed5.toFixed(2)
          }); 
          this.recordList = res.data.content
        }
      })
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
  overflow-y: auto;
}

.body::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.searchTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 3vw;
  padding-top: 10px;
  color: #ffffff;
}

.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 50px;
}

.date {
  margin-right: 10px;
  font-size: 16px;
}

.tables {
  margin-left: 3vw;
  padding-top: 10px;
}

.lable {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin-left: 75px;
  padding-top: 10px;
}

.lable-item {
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 16%;
  color: #ffffff;
  margin-bottom: 10px;
}

.el-table {
  position: static;
  background-color: #141414;
}

.inputs {
  border: none;
  width: 174px !important;
  background-color: #292929;
  height: 40px;
  color: #ffffff;
}

.paginations {
  display: flex;
  flex-direction: row-reverse;
}
</style>