fd_dwgz_zhyw/src/views/HealthControl/healthManagement/wtSaturability/tab2.vue

<template>
  <div class="draught-fan-list">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="wpId"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                (wpId) => {
                  getWt(wpId, true);
                }
              "
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="wtId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wtArray"
                :key="item.id"
                :value="item.id"
                :label="item.nemCode"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="recorddate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search">搜 索</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable :data="tableData"></ComTable>
      <div class="paginationBox">
        <el-pagination
          @current-change="currentChange"
          :current-page="currentPage"
          :total="total"
          :layout="'total, prev, pager, next, jumper'"
          hide-on-single-page
        />
      </div>
    </div>
    <Mlc
      height="350px"
      :list="chartData"
      :units="chartUnit"
      :showLegend="true"
    />
    <el-dialog
      title="月风电功率编辑"
      v-model="dialogShow"
      width="85%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="true"
    >
      <el-form class="mg-b-16" label-width="100px" inline>
        <el-form-item class="mg-b-8" label="风机编号：">
          <el-input v-model="wtId" readonly placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="mg-b-8" label="年份：">
          <el-input v-model="editItem._year" readonly placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="mg-b-8" label="月份：">
          <el-input
            v-model="editItem._month"
            readonly
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item class="mg-b-8" label="风速：">
          <el-input v-model="editItem.speed" readonly placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="mg-b-8" label="实际拟合：">
          <el-input
            v-model="editItem.actualpower"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item class="mg-b-8" label="最优拟合：">
          <el-input
            v-model="editItem.optimalpower"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <button style="width: 100%" class="btn" @click="editWtInfo">修改</button>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import Mlc from "@com/chart/line/multiple-line-chart.vue";
import api1 from "@api/economic/index.js";
import api from "@api/wisdomOverhaul/energy/index.js";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
    ComTable,
    Mlc,
  },

  // 数据
  data() {
    return {
      isAsc: "asc",
      wpArray: [],
      wtArray: [],
      wpId: "",
      wtId: "",
      currentPage: 1,
      pageSize: 11,
      total: 0,
      editItem: {},
      dialogShow: false,
      recorddate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
        "yyyy-MM-dd"
      ),
      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风速(m/s)",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "实际拟合功率(kW)",
            field: "actualPower",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "最优拟合功率(kW)",
            field: "optimalPower",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          // {
          //   name: "操作",
          //   field: "",
          //   is_num: false,
          //   is_light: false,
          //   template() {
          // 			return "<el-button type='text' style='cursor: pointer;'>修改</el-button>";
          // 	},
          //   click(e, row){
          //     that.editItem = row;
          //     that.editItem._year = new Date(that.recorddate).getFullYear();
          //     that.editItem._month = (new Date(that.recorddate).getMonth() + 1);
          //     that.dialogShow = true;
          //   }
          // }
        ],
        data: [],
      },
      chartData: [
        {
          title: "",
          yAxisIndex: 0,
          value: [],
        },
      ],
      // chartUnit: ["功率(MW)", "(m/s)"]
      chartUnit: ["功率(MW)"],
    };
  },

  // 函数
  methods: {
    // 获取风场
    getWp(reGetWp) {
      api1
        .getWpList({
          type: "-1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.wpArray = res.data.data;
            this.wpId = res.data.data[0].id;
            this.getWt(this.wpId, reGetWp);
          }
        });
    },

    // 获取风机
    getWt(wpid, reGetWp) {
      if (wpid) {
        api1
          .getWtList({
            wpId: wpid,
          })
          .then((res) => {
            if (res.code === 200) {
              this.wtArray = res.data;
              this.wtId = res.data[0].id;
              if (!reGetWp) {
                this.getTabData();
                this.getChartData();
              }
            }
          });
      }
    },

    getTabData() {
      api
        .powersaturationPowersaturationmonthlist({
          wtId: this.wtId,
          year: new Date(this.recorddate).getFullYear(),
          month: new Date(this.recorddate).getMonth() + 1,
          pageNum: this.currentPage,
          pageSize: 11,
        })
        .then((res) => {
          if (res.data) this.tableData.data = res.data.records;
          this.total = res.data.total;
          this.getChartData();
        });
    },

    // 获取图表数据
    getChartData() {
      api
        .powersaturationPowersaturationmonthchart({
          wtId: this.wtId,
          year: new Date(this.recorddate).getFullYear(),
          month: new Date(this.recorddate).getMonth() + 1,
        })
        .then((res) => {
          if (res.data) {
            const keyArray = [
              //   {
              //   key: "value1",
              //   title: "风速"
              // },
              {
                key: "value2",
                title: "实际拟合功率",
              },
              {
                key: "value3",
                title: "最优拟合功率",
              },
              {
                key: "value4",
                title: "保证功率",
              },
            ];

            let chartData = [
              //   {
              //   title: "风速",
              //   // yAxisIndex: 1,
              //    yAxisIndex: 0,
              //   value: []
              // },
              {
                title: "实际拟合功率",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "最优拟合功率",
                yAxisIndex: 0,
                value: [],
              },
              {
                title: "保证功率",
                yAxisIndex: 0,
                value: [],
              },
            ];

            keyArray.forEach((keyEle, keyIndex) => {
              res.data.forEach((ele) => {
                chartData[keyIndex].value.push({
                  text: "",
                  value: ele[keyEle.key],
                });
              });
            });

            this.chartData = chartData;
          }
        });
    },

    // 编辑
    editWtInfo() {
      let that = this;

      that.editItem.actualpower += "";
      that.editItem.optimalpower += "";

      if (!that.editItem.actualpower || !that.editItem.optimalpower) {
        that.BASE.showMsg({
          msg: "实际拟合与最优拟合不可为空",
        });
      } else {
      }
    },

    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.getTabData();
    },

    search() {
      if (!this.wpId || !this.wtId) {
        this.BASE.showMsg({
          msg: "场站与风机为必选项",
        });
      } else {
        this.getTabData();
      }
    },
  },

  created() {
    this.getWp();
  },

  mounted() {},

  unmounted() {},
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .df-table {
    border: 1px solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    height: calc(100% - 51px - 350px);
    padding-bottom: 10px;
    margin-bottom: 10px;

    &:before {
      content: "";
      width: 3px;
      height: 3px;
      background: @write;
      position: absolute;
      left: 3px;
      top: 3px;
    }

    .com-table {
      height: calc(100% - 44px);
      .el-scrollbar {
        height: calc(100% - 33px);
      }
    }
    .paginationBox {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>