sis_zhfx/src/views/planPower/index.vue

<template>
  <div class="draught-fan-list" id="draughtFan">
    <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="getProject(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="projectId" clearable placeholder="请选择" popper-class="select">
              <el-option v-for="item in projectArray" :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="year" value-format="YYYY" placeholder="选择日期" popper-class="date-select">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search()">查询</button>
        <button class="btn green" @click="dialogShow = true">新增</button>
        <button class="btn green" @click="exportExcel()" v-if="tableData.data.length">导出</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="78vh" :data="tableData"></ComTable>
    </div>
    <el-dialog title="新增计划发电量" v-model="dialogShow" width="85%" top="10vh" custom-class="modal curDialog"
      :close-on-click-modal="false" @closed="resetForm">
      <el-form ref="form" :model="form" :rules="rules" inline label-width="80px">
        <el-form-item label="场站" prop="submitWpId">
          <el-select v-model="form.submitWpId" clearable placeholder="请选择" popper-class="select" @change="reGetProject()">
            <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目" prop="submitProjectId">
          <el-select v-model="form.submitProjectId" clearable placeholder="请选择" popper-class="select">
            <el-option v-for="item in projectArray2" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="submitData">
          <el-date-picker v-model="form.submitData" type="year" value-format="YYYY" placeholder="选择日期" popper-class="date-select">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="curFlex" label="1月份计划发电量(万kWh)：" prop="gc01">
          <el-input v-model="form.gc01"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="2月份计划发电量(万kWh)：" prop="gc02">
          <el-input v-model="form.gc02"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="3月份计划发电量(万kWh)：" prop="gc03">
          <el-input v-model="form.gc03"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="4月份计划发电量(万kWh)：" prop="gc04">
          <el-input v-model="form.gc04"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="5月份计划发电量(万kWh)：" prop="gc05">
          <el-input v-model="form.gc05"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="6月份计划发电量(万kWh)：" prop="gc06">
          <el-input v-model="form.gc06"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="7月份计划发电量(万kWh)：" prop="gc07">
          <el-input v-model="form.gc07"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="8月份计划发电量(万kWh)：" prop="gc08">
          <el-input v-model="form.gc08"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="9月份计划发电量(万kWh)：" prop="gc09">
          <el-input v-model="form.gc09"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="10月份计划发电量(万kWh)：" prop="gc10">
          <el-input v-model="form.gc10"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="11月份计划发电量(万kWh)：" prop="gc11">
          <el-input v-model="form.gc11"></el-input>
        </el-form-item>
        <el-form-item class="curFlex" label="12月份计划发电量(万kWh)：" prop="gc12">
          <el-input v-model="form.gc12"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <button class="btn green" @click="submit">提交</button>
          <button class="btn green" @click="dialogShow = false">取消</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
export default {
  // 名称
  name: "cutAnalyse",

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

  // 数据
  data () {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wpId: "",
      projectArray: [],
      projectId: "",
      projectArray2: [],
      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy"),
      dialogShow: false,
      tableData: {
        column: [
          {
            name: "名称",
            field: "projectName",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年",
            field: "year",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "1月",
            field: "gc01",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "2月",
            field: "gc02",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "3月",
            field: "gc03",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "4月",
            field: "gc04",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "5月",
            field: "gc05",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "6月",
            field: "gc06",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "7月",
            field: "gc07",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "8月",
            field: "gc08",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "9月",
            field: "gc09",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "10月",
            field: "gc10",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "11月",
            field: "gc11",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "12月",
            field: "gc12",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "合计",
            field: "generatingcapacity",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "操作",
            field: "generatingcapacity",
            is_num: false,
            is_light: false,
            sortable: true,
            template () {
              return "<el-button type='text' style='cursor: pointer;'>编辑</el-button>";
            },
            click (e, row) {
              that.editData(row)
            }
          }
        ],
        data: [],
      },
      form: {
        outagehours: 0.0,
        submitWpId: "",
        submitProjectId: "",
        submitData: "",
        gc01: "",
        gc02: "",
        gc03: "",
        gc04: "",
        gc05: "",
        gc06: "",
        gc07: "",
        gc08: "",
        gc09: "",
        gc10: "",
        gc11: "",
        gc12: "",
      },
      rules: {
        submitWpId: [
          { required: true, message: '请选择场站', trigger: 'change' },
        ],
        submitProjectId: [
          { required: true, message: '请选择项目', trigger: 'change' },
        ],
        submitData: [
          { required: true, message: '请选择时间', trigger: 'change' },
        ],
        gc01: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc02: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc03: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc04: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc05: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc06: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc07: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc08: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc09: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc10: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc11: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
        gc12: [
          { required: true, validator: this.BASE.elCkeck.isNumber, trigger: 'change' },
        ],
      }
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success (res) {
          that.wpArray = res.data;
          that.wpId = that.wpId || res.data[0].id;
          that.getProject();
        }
      });
    },

    // 获取期数
    getProject (skipRequest) {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/projectAjax",
        data: {
          wpIds: that.wpId
        },
        success (res) {
          that.projectArray = res.data;
          that.projectArray2 = res.data;
          that.projectId = res.data[0].id;
          if (!skipRequest) {
            that.getTableData();
          }
        }
      });
    },

    // 弹窗获取期数
    reGetProject (wpIds = this.form.submitWpId) {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/projectAjax",
        data: {
          wpIds
        },
        success (res) {
          that.projectArray2 = res.data;
          that.form.submitProjectId = res.data[0].id
          that.dialogShow = true;
        }
      });
    },

    getTableData () {
      let that = this;
      if (!that.recorddate) {
        that.BASE.showMsg({
          msg: "时间不可为空"
        });
      } else {
        that.API.requestData({
          method: "POST",
          subUrl: "projectplan/getProjectPlanVo",
          data: {
            isAsc: that.isAsc,
            wpId: that.wpId || "",
            pjId: that.projectId || "",
            year: new Date(that.recorddate).getFullYear()
          },
          success (res) {
            that.tableData.data = res.data;
          }
        });
      }
    },

    // 导出excel
    exportExcel () {
      this.BASE.exportExcel(this.tableData);
    },

    submit () {
      let that = this;
      that.$refs.form.validate((valid) => {
        if (valid) {
          let data = that.BASE.deepCopy(that.form);
          data.windpower = that.form.submitWpId;
          data.projectid = that.form.submitProjectId;
          data.year = new Date(that.form.submitData).getFullYear();
          data.generatingcapacity = (parseFloat(data.gc01) + parseFloat(data.gc02) + parseFloat(data.gc03) + parseFloat(data.gc04) + parseFloat(data.gc05) + parseFloat(data.gc06) + parseFloat(data.gc07) + parseFloat(data.gc08) + parseFloat(data.gc09) + parseFloat(data.gc10) + parseFloat(data.gc11) + parseFloat(data.gc12));
          that.API.requestData({
            method: "POST",
            subUrl: "projectplan/saveData",
            data,
            success (res) {
              that.getTableData();
              that.BASE.showMsg({
                type: "success",
                msg: "保存成功"
              });
              that.dialogShow = false;
            }
          });
        } else {
          return false;
        }
      });
    },

    editData (item) {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "projectplan/getSingleProjectPlan",
        data: {
          pjId: item.projectid,
          year: item.year
        },
        success (res) {
          that.reGetProject(res.data.windpower || "");
          that.form = res.data;
          that.form.submitWpId = res.data.windpower;
          that.form.submitProjectId = res.data.projectid;
          that.form.submitData = res.data.year;
          that.form.outagehours = 0.0;
          that.dialogShow = true;
        }
      });
    },

    resetForm () {
      for (let key in this.form) {
        if(key === "outagehours"){
          this.form[key] = 0.0;
        }
        this.form[key] = "";
      }
      this.$refs.form.resetFields();
    },

    search () {
      this.getTableData();
    }
  },

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

  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;

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

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>
<style lang="less">
.el-form {
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-form-item.curFlex {
    width: 100%;
    .el-form-item__label {
      width: 210px !important;
    }
    .el-form-item__content {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
    }
  }
}

.curDialog {
  #draughtFan .el-dialog__body {
    max-height: 600px;
    overflow-y: scroll;
  }

  .dialog-footer {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>