jn_sis_zhfx/src/views/economicsOperation/powerCurve/powerLinefitting/index.vue

<template>
  <div class="powerLinefitting">
    <div class="powerLinefitting_topAll">
      <div class="powerLinefitting_top">
        <el-select
          size="mini"
          v-model="companyVal"
          placeholder="请选择"
          @change="changeCompan"
        >
          <el-option
            v-for="item in companyOptions"
            :key="item.id"
            :label="item.aname"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div class="tabCut">
          <div
            @click="changeBtn(val.id)"
            :class="tabEvent === val.id ? 'active' : ''"
            v-for="val in tabOptions"
            :key="val.id"
          >
            <span>{{ val.name }}</span>
          </div>
        </div>
        <div class="station">
          场站：
          <el-select
            size="mini"
            v-model="stationVal"
            placeholder="请选择"
            clearable
            @change="changeStation"
          >
            <el-option
              v-for="item in stationOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="station">
          风机：
          <el-select
            size="mini"
            v-model="windVal"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in windsOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="but">
          <el-button round size="mini" class="buttons" @click="seachData"
            >拟合</el-button
          >
          <el-button round size="mini" class="buttons" @click="downXlsxFn"
            >导出</el-button
          >
        </div>
      </div>
      <div class="selections">
        <div
          class="selections_btn"
          @click="tabSelect(0)"
          :class="{ active: tabIndex == 0 }"
        >
          日
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(1)"
          :class="{ active: tabIndex == 1 }"
        >
          月
        </div>
        <div
          class="selections_btn"
          @click="tabSelect(2)"
          :class="{ active: tabIndex == 2 }"
        >
          年
        </div>
      </div>
    </div>
    <div
      style="
        background: rgba(0, 0, 0, 0.4);
        height: calc(100% - 400px - 39px);
        padding-bottom: 10px;
      "
    >
      <div class="powerLinefitting_title clearfix">
        <div class="leftContent floatLeft"><span>功率曲线拟合</span></div>
        <div class="rightContent floatRight"></div>
      </div>

      <div class="powerLinefitting_Table">
        <el-table
          :data="powerLinefittingData"
          stripe
          size="mini"
          height="100%"
          ref="fitting_table"
          style="width: 100%"
        >
          <el-table-column
            v-for="(item, index) in tableHeader"
            :key="index"
            sortable
            :prop="item.code"
            :label="item.title"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="powerLinefitting_Echarts">
      <div class="chart-name">
        <div class="point point-left bottom"></div>
        <div class="point point-right bottom"></div>
        <span>功率曲线</span>
      </div>
      <div id="fittingid" class="fittingEchartSty"></div>
    </div>
  </div>
</template>

<script>
import {
  getApicompanyslist,
  getApiwpByCplistlist,
  getApiequipmentList,
  getApiPerformancecurvefitting,
} from "@/api/monthlyPerformanceAnalysis";
import * as echarts from "echarts";
import partten from "@/helper/partten.js";
import util from "@/helper/util.js";
import utils from "@/utills/downXlsx";
export default {
  name: "powerLinefitting",
  data() {
    return {
      tabIndex: 0,
      companyVal: "",
      companyOptions: [],
      stationVal: "",
      stationOptions: [],
      windVal: "",
      windsOptions: [],
      powerLinefittingData: [],
      powerLinefitData: [],
      tableHeader: [
        { title: "名称", code: "nemCode" },
        { title: "风速(m/s)", code: "speed" },
        { title: "保证功率(KW)", code: "ensurepower" },
        { title: "拟合功率(KW)", code: "theorypower" },
      ],
      tabEvent: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
    };
  },
  created() {
    this.getCompanyData();
  },
  watch: {
    tabEvent(val) {
      this.tableHeader = this.tableHeader.map((item) => {
        if (item.code == "speed") {
          if (val == -2) {
            item.title = "光照(W/m²)";
          } else {
            item.title = "风速(m/s)";
          }
        }
        return { ...item };
      });
    },
  },
  methods: {
    // 切换tab
    tabSelect(index) {
      this.tabIndex = index;
      this.getTableData();
    },
    changeBtn(id) {
      this.tabEvent = id;
      this.stationVal = "";
      this.stationOptions = [];
      this.windVal = "";
      this.windsOptions = [];
      this.getStationData();
      //   this.getTableData();
    },
    // 获取公司列表
    async getCompanyData() {
      this.companyOptions = [];
      this.pickerTimer = this.getchangeTime(new Date());
      const { data: datas } = await getApicompanyslist();
      this.companyOptions = datas.data;
      this.companyVal = datas.data[0]?.id;
      this.getStationData(this.companyVal);
    },
    changeCompan(val) {
      this.companyVal = val;
      this.stationOptions = [];
      this.windsOptions = [];
      this.stationVal = "";
      this.windVal = "";
      this.getStationData();
    },
    // 获取场站列表
    async getStationData() {
      this.stationOptions = [];
      let params = {
        type: this.tabEvent,
        companyid: this.companyVal,
      };
      const { data: datas } = await getApiwpByCplistlist(params);
      this.stationOptions = datas.data;
      this.stationVal = datas.data[0].id;
      this.getWindData();
    },
    changeStation(val) {
      this.stationVal = val;
      this.getWindData();
    },
    // 获取风机
    async getWindData() {
      this.windsOptions = [];
      let params = {
        companyId: this.companyVal,
        wpIds: this.stationVal,
        projectIds: "",
        lineIds: "",
        type: 0,
      };
      const { data: datas } = await getApiequipmentList(params);
      if (datas.data.length) {
        this.windsOptions = datas.data;
        this.windVal = datas.data[0].id;
      } else {
        this.windsOptions = datas.data;
        this.windVal = "";
      }
      this.seachData();
    },
    seachData() {
      this.getTableData();
    },
    async getTableData() {
      let params = {
        dateType: this.tabIndex * 1 + 1,
        wtId: this.windVal,
        type: this.tabEvent,
      };
      const { data: datas } = await getApiPerformancecurvefitting(params);

      this.changeEchartsData(datas.data.chanrt);
      datas.data.list.forEach((item) => {
        item.speed = item.speed.toFixed(2);
      });
      this.powerLinefittingData = datas.data.list;
    },
    // 整合echarts数据
    changeEchartsData(datas) {
      let xAxis = [];
      let lenged = [];
      let seriesOne = [];
      let seriesTwo = [];
      let series = [];
      let showYx = false;
      if (datas && datas.length > 0) {
        showYx = true;
        lenged = ["保证功率", "拟合功率"];
        datas.forEach((it, index) => {
          xAxis.push(it.speed);
          seriesOne.push(it.ensurepower);
          seriesTwo.push(it.theorypower);
        });
        let obj = {
          name: "保证功率",
          type: "line",
          smooth: true,
          lineStyle: {
            width: 1,
          },
          data: seriesOne,
        };
        // series.push(obj)
        let objs = {
          name: "拟合功率",
          type: "line",
          smooth: true,
          lineStyle: {
            width: 1,
          },
          data: seriesTwo,
        };
        // series.push(objs)
        series = [obj, objs];
      }
      this.getChartes(xAxis, lenged, series, showYx);
    },
    getChartes(xAxis, lenged, series, showY) {
      let option = {
        color: [
          "#1C99FF",
          "#FF8700",
          "#3D54BE",
          "#fa8c16",
          "#1DA0D7",
          "#DD5044",
        ],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.4)",
          borderColor: partten.getColor("gray"),
          textStyle: {
            color: "#fff",
            fontSize: util.vh(16),
          },
        },
        legend: {
          show: true,
          data: lenged,
          padding: [10, 10],
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: partten.getColor("gray"),
          textStyle: {
            color: partten.getColor("grayl"),
            fontSize: 12,
          },
        },
        grid: {
          top: 56,
          left: 40,
          right: 15,
          bottom: 24,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: partten.getColor("gray"),
                fontSize: util.vh(10),
              },
            },
            data: xAxis,
          },
        ],
        yAxis: {
          // show: showY,
          type: "value",
          name: "kWh",
          axisLabel: {
            formatter: "{value}",
            fontSize: "14px",
          },
          boundaryGap: false,
          //分格线
          splitLine: {
            show: false,
          },
        },
        series: series,
      };
      let dom = document.getElementById("fittingid");
      dom.removeAttribute("_echarts_instance_");
      let myChart = echarts.init(dom);
      myChart.clear();
      myChart.setOption(option);

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //转换时间
    getchangeTime(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
    downXlsxFn() {
      let header = [];
      this.tableHeader.forEach((it) => {
        header.push(it.title);
      });
      utils.exportExcel(
        this.$refs["fitting_table"].$el,
        header,
        "功率曲线拟合"
      );
    },
  },
};
</script>

<style lang="less">
.powerLinefitting {
  padding: 0 30px;
  height: 100%;
  .powerLinefitting_topAll {
    display: flex;
    justify-content: space-between;
    .powerLinefitting_top {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
      .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;
        }

        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:nth-child(1) {
          background: rgba(5, 187, 76, 0.6);
          border: 1px solid #3b6c53;
          border-radius: 13px;
          color: #fff;
          &:hover {
            background: rgba(5, 187, 76, 0.9);
            border-radius: 13px;
            color: #fff;
          }
        }
        .buttons:nth-child(2) {
          background: rgba(67, 81, 107, 0.3);
          border: 1px solid #3b6c53;
          border-radius: 13px;
          font-size: 14px;
          color: #b3b3b3;
        }
      }
    }
    .selections {
      display: flex;
      margin-top: 10px;
      position: relative;
      right: 120px;
      .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(#3b6c53, 20);
        border: 1px solid fade(#3b6c53, 20);
        border-radius: 20px;
        &:hover,
        &.active {
          background: fade(#05bb4c, 80);
          border: 1px solid #05bb4c;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .powerLinefitting_title {
    padding-left: 10px;
    .leftContent {
      width: 242px;
      height: 41px;
      line-height: 41px;
      background: url("../../../../assets/imgs/title_left_bg.png");
      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        margin-left: 25px;
      }
    }
    .floatLeft {
      float: left;
    }
    .floatRight {
      float: right;
    }
    .rightContent {
      width: 212px;
      height: 28px;
      margin-top: 13px;
      background: url("../../../../assets/imgs/title_right_bg.png");
    }
  }
  .clearfix::after {
    content: "";
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
    display: block;
  }
  .clearfix {
    zoom: 1;
  }

  .powerLinefitting_Table {
    height: calc(100% - 32px);
    .el-table--mini {
      .el-table__header-wrapper {
        tr {
          background: rgba(83, 89, 104, 0.3) !important;
          th {
            vertical-align: top !important;
          }
          .cell {
            color: #b3b3b3;
            font-family: MicrosoftYaHei;
            font-size: 14px;
          }
        }
      }
      .el-table__body-wrapper {
        tr {
          &:nth-child(2n) {
            background: rgba(83, 89, 104, 0.05) !important;
          }
          .cell {
            color: #d8d8d9;
            font-family: ArialMT;
            font-size: 13px;
            height: 25px !important;
          }
        }
      }
    }
    .historyBtn {
      background: #43516b;
      border-radius: 15px;
      margin-top: 5px;
      border: 1px solid #43516b;
      span {
        color: #fff;
      }
    }
  }
  .powerLinefitting_Echarts {
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    position: relative;
    height: 400px;
    padding-bottom: 15px;
    // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    .chart-name {
      display: flex;
      align-items: center;
      padding-left: 20px;
      position: relative;
      height: 39px;
      width: 98%;
      margin-left: 1%;
      border-bottom: 1px solid rgba(153, 153, 153, 0.5);
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      .point {
        width: 6px;
        height: 1px;
        background-color: #ffffff;
        position: absolute;

        &.point-left {
          left: 0;
        }

        &.point-right {
          right: 0;
        }

        &.top {
          top: -1px;
        }

        &.bottom {
          bottom: -1px;
        }
      }
    }
    .fittingEchartSty {
      width: 100%;
      height: calc(100% - 39px);
      background: rgba(0, 0, 0, 0.45);
    }
  }
  .el-overlay {
    .el-overlay-dialog {
      overflow-y: hidden !important;
      .powerLinefittinghistoryModel {
        margin-top: 0 !important;
        .el-dialog__body {
          padding-top: 10px;
        }
      }
      .contrastModal {
        .el-dialog__body {
          padding-top: 10px;
        }
      }
    }
  }

  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
    color: #fff;
  }
  .el-picker__popper .el-date-table .in-range div {
    background: #43516b;
  }
}
</style>