shanxi_power/src/views/economicsOperation/windAnalyse/freeAnalysis/index.vue

<template>
  <div class="comprehensiveEvaluation">
    <div class="Evaluation_topall">
      <div class="Evaluation_top">
        <div class="station">
          场站：
          <el-select size="mini" v-model="wp" placeholder="请选择" clearable>
            <el-option
              v-for="item in wpArray"
              :key="item.id"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="station">
          频率：
          <el-select size="mini" v-model="pl" placeholder="请选择" clearable>
            <el-option
              v-for="item in plArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="station">
          部件指标：
          <el-select
            size="mini"
            v-model="wp"
            placeholder="请选择"
            multiple
            clearable
            collapse-tags
          >
            <el-option
              v-for="item in checkArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="station">
          日期：
          <el-date-picker
            style="width: 400px"
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="mini"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="but">
          <el-button round size="mini" class="buttons" @click="seachData">
            查 询
          </el-button>
          <el-button round size="mini" class="buttons" @click="exportExcel">
            导 出
          </el-button>
        </div>
      </div>
    </div>
    <div
      style="
        background: rgba(0, 0, 0, 0.4);
        height: calc(100% - 39px);
        padding-bottom: 15px;
      "
    >
      <div class="Evaluation_title clearfix">
        <div class="leftContent" :data-type="$store.state.moreSty">
          <span>自由报表分析</span>
        </div>
      </div>
      <el-table
        :data="tjsjfx"
        stripe
        size="mini"
        height="90vh"
        ref="exportExcelRef"
      >
        <el-table-column
          align="center"
          :prop="item.prop"
          :label="item.label"
          v-for="item in tHeader"
          :key="item.prop"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import AreaLineChart from "@com/chart/combination/area-line-chart.vue";

import utils from "@/utills/downXlsx";

export default {
  components: {
    AreaLineChart,
  },

  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      wp: "",
      wpArray: [],
      pl: "",
      plArray: [],
      date: [],
      checkArray: [
        { label: "风速(m/s)", value: "fs" },
        { label: "风向", value: "fx" },
        { label: "对风角度", value: "dfjd" },
        { label: "发电机转速", value: "fdjzs" },
        { label: "U1电压", value: "u1dy" },
        { label: "U2电压", value: "u2dy" },
        { label: "U3电压", value: "u3dy" },
        { label: "U1电流", value: "u3dl" },
        { label: "U2电流", value: "u3dl" },
        { label: "U3电流", value: "u3dl" },
        { label: "功率因数", value: "glyx" },
        { label: "电网频率", value: "dwpl" },
        { label: "机舱温度", value: "jcwd" },
        { label: "齿轮油温", value: "clxyw" },
        { label: "U2烧组温度", value: "u2szwd" },
        { label: "功率限定值", value: "glxdz" },
        { label: "转速限定值", value: "zsxdz" },
        { label: "环境温度", value: "hjwd" },
        { label: "机舱柜温度", value: "jcgwd" },
        { label: "齿轮箱入口自油温", value: "clxrkyw" },
        { label: "齿轮箱油温", value: "clxrkyw" },
      ],
      tHeader: [
        { prop: "fj", label: "风机" },
        { prop: "tjsj", label: "停机时间" },
        { prop: "hfsj", label: "恢复时间" },
        { prop: "hfsj", label: "恢复时间" },
        { prop: "tjxs", label: "停机小时" },
        { prop: "ssdl", label: "损失电量" },
        { prop: "tjlx", label: "停机类型" },
      ],
      tjsjfx: [
        {
          fj: "#01",
          tjsj: "2025-05-15 14:32:53",
          hfsj: "2025-05-15 14:32:53",
          tjxs: 10,
          ssdl: 100,
          tjlx: "维护停机",
        },
        {
          fj: "#01",
          tjsj: "2025-05-15 14:32:53",
          hfsj: "2025-05-15 14:32:53",
          tjxs: 10,
          ssdl: 100,
          tjlx: "维护停机",
        },
        {
          fj: "#01",
          tjsj: "2025-05-15 14:32:53",
          hfsj: "2025-05-15 14:32:53",
          tjxs: 10,
          ssdl: 100,
          tjlx: "维护停机",
        },
        {
          fj: "#01",
          tjsj: "2025-05-15 14:32:53",
          hfsj: "2025-05-15 14:32:53",
          tjxs: 10,
          ssdl: 100,
          tjlx: "维护停机",
        },
        {
          fj: "#01",
          tjsj: "2025-05-15 14:32:53",
          hfsj: "2025-05-15 14:32:53",
          tjxs: 10,
          ssdl: 100,
          tjlx: "维护停机",
        },
      ],
    };
  },

  created() {},

  methods: {
    exportExcel() {
      if (this.tjsjfx.length > 0) {
        let tH = [];
        this.tHeader.forEach((ele) => {
          tH.push(ele.label);
        });
        utils.exportExcel(this.$refs.exportExcelRef.$el, tH, `风机运行分析`);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.comprehensiveEvaluation {
  padding: 0 20px;
  height: 100%;

  .Evaluation_title {
    .leftContent[data-type~="greenSty"] {
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
    }
    .leftContent[data-type~="blueSty"] {
      background: url("~@/assets/imgs/title_left_bg.png") no-repeat;
    }
    .leftContent {
      width: 242px;
      height: 41px;
      line-height: 41px;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
  }
  .clearfix::after {
    content: "";
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
    display: block;
  }
  .clearfix {
    zoom: 1;
  }
  .Evaluation_topall {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;

    .selections {
      position: relative;
      right: 120px;
      display: flex;
      margin-top: 10px;
      .selections_btn {
        flex: 0 0 55px;
        text-align: center;
        height: 33px;
        line-height: 33px;
        margin-right: 8px;
        color: #b9b9b9;
        font-size: 1.296vh;
        background: fade(#606769, 20);
        border: 1px solid fade(#606769, 20);
        border-radius: 20px;
        &:hover,
        &.active {
          background: fade(#05bb4c, 80);
          border: 1px solid #05bb4c;
          color: #fff;
          cursor: pointer;
        }
      }
    }
    .Evaluation_top {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 5px;

      .station {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #b3b3b3;
        margin-right: 10px;
        margin-left: 10px;
      }

      .search-input {
        margin-left: 10px;
        .el-input__inner {
          width: 175px;
        }
        .el-input__suffix {
          right: -50px;
        }
      }
      .tabCut {
        display: inline-block;
        margin: 0 10px;

        div {
          display: inline-block;
          width: 60px;
          height: 27px;
          border: 1px solid #274934;
          text-align: center;
          line-height: 25px;
          cursor: pointer;
        }

        div:nth-child(1) {
          border-radius: 13px 0px 0px 13px;
          border-right-width: 0;
        }

        div:nth-child(2) {
          border-radius: 0px 13px 13px 0px;
        }

        .active {
          background-color: rgba(5, 187, 76, 0.9);
          color: #fff;
        }
      }

      .but {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin-left: 20px;
        .buttons {
          background-color: rgba(5, 187, 76, 0.2);
          border: 1px solid #3b6c53;
          color: #b3b3b3;
          font-size: 14px;

          &:hover,
          &.active {
            background-color: rgba(5, 187, 76, 0.5);
            color: #ffffff;
          }
        }
      }

      &:last-child {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}
</style>
<style lang="less">
.comprehensiveEvaluation {
  .detailInfoTabs {
    background: #081410;
    color: #fff;
    .el-tabs__header {
      background: #081410;
      color: #fff;

      .el-tabs__item {
        border: 0;

        &.is-active {
          background: transparent;
        }

        &::after {
          width: 90% !important;
          left: 5% !important;
        }
      }
    }
  }
}
</style>