hb_sis_zhfx/src/views/planPower/index.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="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="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>
        <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" :close-on-click-modal="false">
      <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="getProject(true)">
            <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 projectArray" :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="date" value-format="YYYY-MM-DD" placeholder="选择日期"
            popper-class="date-select">
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="活动名称" prop="desc">
          <el-input v-model="form.name"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <button class="btn green" @click="dialogShow = false">取消</button>
        <button class="btn green">提交</button>
      </span>
    </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: "",
      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
      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
          }
        ],
        data: [],
      },
      form: {
        submitWpId: "",
        submitProjectId: "",
        submitData: "",
        gc1:"",
        gc2:"",
        gc3:"",
        gc4:"",
        gc5:"",
        gc6:"",
        gc7:"",
        gc8:"",
        gc9:"",
        gc10:"",
        gc11:"",
        gc12:"",
      },
      rules: {
        submitWpId: [
          { required: true, message: '请选择场站', trigger: 'change' },
        ],
        submitProjectId: [
          { required: true, message: '请选择项目', trigger: 'change' },
        ],
        submitData: [
          { required: true, message: '请选择时间', trigger: 'change' },
        ],
        gc1: [
          { required: true, message: '该行数据不可为空', trigger: 'change' },
        ]
      }
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success (res) {
          that.wpArray = res.data;
          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.projectId = res.data[0].id;
          if (!skipRequest) {
            that.getTableData();
          }
        }
      });
    },

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

    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>