fd_dwgz_zhyw_nx/src/views/economicsOperation/weatherMachine/weatherMachine.vue

<template>
  <div class="stationPowerContro" :class="!theme ? 'themeDark' : ''">
    <div class="main_top">
      <!-- <div class="search-item" style="margin-left: 16px">
        <span class="label">场站：</span>
        <div class="search-content">
          <el-select
            v-model="stationId"
            style="width: 120px"
            clearable
            size="mini"
            placeholder="全部"
            popper-class="select"
            @change="getWindturbineList"
          >
            <el-option
              v-for="item in stationList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </div>
      </div> -->
      <div class="search-item" style="margin-left: 16px">
        <span class="label">时间：</span>
        <div class="search-content">
         <el-date-picker
            size="mini"
            v-model="year"
            type="year"
            value-format="YYYY"
            placeholder="请选择"
            popper-class="date-select"
          >
          </el-date-picker>
        </div>
      </div>
      <el-button class="buttons" round size="mini" @click="getStationData"
        >查询</el-button
      >
    </div>
    <div class="stationPowerControTable">
      <h2 class="tableTitle">{{ stationName }}气象单机偏差分析</h2>
      <span class="tableUnit">单位:风速m/s,风向°</span>
      <div :style="tableHeight">
        <div class="tablestyle" style="margin-top: 5px">
          <el-table
            :data="tableData"
            v-loading="loading"
            :row-class-name="fixedFirstTwoRows"
            stripe
            border
            style="width: 100%"
            :height="isFullScreen ? '75vh' : '84vh'"
            ref="stationPowerTable"
            element-loading-background="rgba(0,0,0,.5)"
            :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
            :cell-style="{
              'font-size': '12px',
            }"
            :row-style="{ height: '23px' }"
          >
            <el-table-column
              :prop="item.value"
              :label="item.name"
              align="center"
              v-for="(item, index) in tableColumn"
              :key="index"
            >
              <template #default="scope">
                <span>{{ scope.row[item.value] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWpList, apiGetweatherMachine } from "@/api/zhbj";
import dataJson from "./dataJson.json";
import dayjs from "dayjs";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import * as XLSXD from "xlsx-js-style";
import { forIn } from "@antv/x6/lib/util/object/object";
export default {
  data() {
    return {
        isFullScreen: false,
      year: "",
      stationId: "NX_FGS_HA_FDC_STA",
      stationName: "",
      stationList: [],
      loading: false,
      tableData: [],
      tableColumn: [
        {
          value: "name",
          name: "名称",
        },
        {
          value: "january",
          name: "一月",
        },
        {
          value: "february",
          name: "二月",
        },
        {
          value: "march",
          name: "三月",
        },
        {
          value: "april",
          name: "四月",
        },
        {
          value: "may",
          name: "五月",
        },
        {
          value: "june",
          name: "六月",
        },
        {
          value: "july",
          name: "七月",
        },
        {
          value: "august",
          name: "八月",
        },
        {
          value: "september",
          name: "九月",
        },
        {
          value: "october",
          name: "十月",
        },
        {
          value: "november",
          name: "十一月",
        },
        {
          value: "december",
          name: "十二月",
        },
      ],
    };
  },
  created() {
    const clientHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
    if (clientHeight === 1080) {
    this.isFullScreen = true;
    } else {
    this.isFullScreen = false;
    }
    window.onresize = () => {
    const clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
    this.isFullScreen = window.screen.height == clientHeight;
    };
    // this.changeData(dataJson)
    this.funGetStation();
    this.year = dayjs().format("YYYY");
  },
  computed: {
    tableHeight() {
      let height = (document.documentElement.clientHeight - 190) / 2 + "px";
      return {
        width: "100%",
        height: height,
      };
    },
    tableMainHeight() {
      let height = document.documentElement.clientHeight - 180 + "px";
      return height;
    },
  },
  methods: {
    fixedFirstTwoRows({ rowIndex }) {
      if (rowIndex < 2) {
        return 'fixed-top-row';
      }
      return '';
    },
    /**场站 */
    funGetStation() {
      let that = this;
      that.stationList = [];
      that.windStation = "";
      getWpList().then((res) => {
        if (res) {
          that.stationList = res.data;
          if (that.stationList.length) {
            that.stationId = that.stationList[0].id;
            that.stationName = that.stationList[0].name;
            that.getStationData();
          }
        }
      });
    },
    getStationData() {
      let that = this;
      let params = {
        wpid: that.stationId,
        year: that.year,
      };
      apiGetweatherMachine(params)
        .then((res) => {
          that.changeData(res);
        })
        .catch((e) => {
          // this.changeData(dataJson)
        });
    },
    changeData(res) {
      this.tableData = []
      if (res && res.data) {
        for (const key in res.data) {
          const element = res.data[key];
          let obj = {
            name: key,
            january: element[0],
            february: element[1],
            march: element[2],
            april: element[3],
            may: element[4],
            june: element[5],
            july: element[6],
            august: element[7],
            september: element[8],
            october: element[9],
            november: element[10],
            december: element[11],
          };
          this.tableData.push(obj);
        }
      }
    },
    seachData() {
      this.funGetStation();
    },
  },
};
</script>

<style lang="less">
.stationPowerContro {
  padding: 0 20px 0 20px;

  .main_top {
    height: 40px;
    display: flex;
    align-items: center;

    .search-item {
      display: flex;
      margin-right: 10px;
      max-width: 450px;
      align-items: center;

      .label {
        margin-right: 10px;
        text-align: right;
        white-space: nowrap;
        // width: 60px;
      }

      .search-content {
        flex: 1;
      }
    }
  }

  .stationPowerControSeach {
    margin-top: 20px;

    .seach_top {
      display: flex;

      .exceed {
        .exceedName {
          margin-top: 7px;
          font-size: 14px;
          margin-left: 10px;
        }

        display: flex;
        margin-right: 20px;

        .el-select,
        .el-select__wrapper {
          height: 32px;
        }

        .el-date-editor {
          height: 32px;

          .el-input__icon,
          .el-range-separator {
            line-height: 30px;
          }
        }

        .select-trigger {
          .el-input {
            .el-input__wrapper {
              height: 30px;
            }
          }

          .el-input__suffix {
            .el-input__icon {
              line-height: 30px;
            }
          }
        }
      }

      .el-button {
        height: 30px;
        padding: 0 20px;
        line-height: 5px;
      }
    }
  }

  .stationPowerControTable {
    .tableTitle {
      display: flex;
      justify-content: center;
      // font-size: 18px;
      font-weight: 600;
    }

    .tableUnit {
      font-size: 14px;
    }

    /* 关键样式：使用sticky定位固定行 */
    .fixed-top-row {
      position: sticky;
      top: 0; /* 第一行 */
      z-index: 3;
      background-color: #f5f7fa; /* 设置背景色，避免滚动时透出下方内容 */
    }
    /* 第二行需要设置top值为第一行的高度 */
    .fixed-top-row + .fixed-top-row {
      top: 36px; /* 这里的值需根据你表格的实际行高调整，通常为行高 */
    }
  }
}

.themeDark {
  background-image: none;

  .stationPowerControSeach {
    .exceedName {
      color: #fff;
    }
  }

  .stationPowerControTable {
    .tableTitle,
    .tableUnit {
      color: #fff;
    }
  }
}

.themeLight {
  .stationPowerControSeach {
    .exceedName {
      color: #000;
    }
  }

  .stationPowerControTable {
    .tableTitle,
    .tableUnit {
      color: #000;
    }
  }
}
</style>