hb_sis_zhfx/src/views/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.name" />
            </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 height="35vh" :data="tableData"></ComTable>
    </div>
    <Mlc height="300px" :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";
export default {
  // 名称
  name: "cutAnalyse",

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

  // 数据
  data () {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wtArray: [],
      wpId: "",
      wtId: "",
      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: "风速",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "实际拟合功率",
            field: "actualpower",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "最优拟合功率",
            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) {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success (res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.getWt(that.wpId, reGetWp);
        }
      });
    },

    // 获取风机
    getWt (wpid, reGetWp) {
      let that = this;
      if (that.wpId) {
        that.API.requestData({
          method: "GET",
          baseURL: "http://10.155.32.4:9001",
          subUrl: "benchmarking/wtList",
          data: {
            wpid
          },
          success (res) {
            that.wtArray = res.data;
            that.wtId = res.data[0].id;
            if (!reGetWp) {
              that.getTabData();
            }
          }
        });
      }
    },

    getTabData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "powersaturation/powersaturationmonthlist",
        data: {
          wtId: that.wtId,
          year: new Date(that.recorddate).getFullYear(),
          month: (new Date(that.recorddate).getMonth() + 1)
        },
        success (res) {
          that.tableData.data = res.data.list;
          that.getChartData();
        }
      });
    },

    // 获取图表数据
    getChartData () {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "powersaturation/powersaturationmonthchart",
        data: {
          wtId: that.wtId,
          year: new Date(that.recorddate).getFullYear(),
          month: (new Date(that.recorddate).getMonth() + 1)
        },
        success (res) {

          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]
              });
            });
          });

          that.chartData = chartData;
        }
      });
    },

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

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

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

    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;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    margin-top: 1.481vh;
    height: 30vh;

    &:before {
      content: '';
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>