neim/neim-ui/src/views/manualEntry/projectAndStationInfoEntry/index.vue

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>项目(场站)统计信息录入</span>
    </div>
    <div>
      <el-tabs tab-position="left" style="height: 300px;">
        <el-tab-pane label="项目统计信息">
          <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="width: 50%">
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="已发起项目数目：" prop="initiatedNum">
                  <el-input v-model="form.initiatedNum" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="已完成核准项目数目：" prop="approvalNum">
                  <el-input v-model="form.approvalNum" :maxlength="11" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="正在实施项目数目：" prop="buildNum">
                  <el-input v-model="form.buildNum" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投产发电项目数目：" prop="electricNum">
                  <el-input v-model="form.electricNum" :maxlength="11" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="text-align: center; margin-top: 1%;">
              <el-button type="primary" @click="projectSave">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="场站统计信息">
          <el-form ref="form" :model="fInfo" :rules="fInfoRules" label-width="120px" style="width: 50%">
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="风电场总数：" prop="num">
                  <el-input v-model="fInfo.num" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="装机容量：" prop="capacity">
                  <el-input v-model="fInfo.capacity" :maxlength="11" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="风机台数：" prop="fjNum">
                  <el-input v-model="fInfo.fjNum" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <el-form ref="form" :model="gInfo" :rules="gInfoRules" label-width="120px" style="width: 50%">
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="光伏场站总数：" prop="num">
                  <el-input v-model="gInfo.num" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="装机容量：" prop="capacity">
                  <el-input v-model="gInfo.capacity" :maxlength="11" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="逆变器台数：" prop="nbqNum">
                  <el-input v-model="gInfo.nbqNum" :maxlength="16" placeholder="必填项" style="width: 100%"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item style="text-align: center; margin-top: 1%;">
              <el-button type="primary" @click="stationSave">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
import {getTotalityInfo,updateProjectTotalityInfoList,updateStationTotalityInfoList} from "@/api/biz/manualEntry/projectAndStationInfoEntry";

export default {
  //项目或场站信息录入
  name: "index",
  data() {
    const reg = /^\d+(\.\d{1,6})?$/
    const checkFnum = (rule, value, callback) => {
      if (!value) {
        callback(new Error('不能为空'))
      }
      if (reg.test(value) == false) {
        callback(new Error('只能输入正数数字或带小数点6位以内的数字'));
      }
      callback()

    }
    return {
      id: '',
      form: {
        initiatedNum: '3',//已发起项目数目
        approvalNum: '5',//已完成核准项目数目
        buildNum: '4',//正在实施项目数目
        electricNum: '1',//投产发电项目数目
      },
      rules: {
        initiatedNum: [{required: true, validator: checkFnum, trigger: 'change'}],
        approvalNum: [{required: true, validator: checkFnum, trigger: 'change'}],
        buildNum: [{required: true, validator: checkFnum, trigger: 'change'}],
        electricNum: [{required: true, validator: checkFnum, trigger: 'change'}],
      },
      fInfoRules: {
        num: [{required: true, validator: checkFnum, trigger: 'change'}],
        capacity: [{required: true, validator: checkFnum, trigger: 'change'}],
        fjNum: [{required: true, validator: checkFnum, trigger: 'change'}],
      },
      gInfoRules: {
        num: [{required: true, validator: checkFnum, trigger: 'change'}],
        capacity: [{required: true, validator: checkFnum, trigger: 'change'}],
        nbqNum: [{required: true, validator: checkFnum, trigger: 'change'}],
      },
      fInfo: {
        num: "10",
        capacity: "724.6",
        fjNum: "407"
      },
      gInfo: {
        num: "4",
        capacity: "110",
        nbqNum: "204"
      },
    }
  },
  mounted() {
    this.initInfo()
  },
  methods: {
    initInfo() {
      getTotalityInfo().then(res => {
        let data = res.data[0]
        this.id = data.id
        console.log()
        this.form = {
          initiatedNum: data.pinfo.initiatedNum,//已发起项目数目
          approvalNum: data.pinfo.approvalNum,//已完成核准项目数目
          buildNum: data.pinfo.buildNum,//正在实施项目数目
          electricNum: data.pinfo.electricNum,//投产发电项目数目
        }
        this.fInfo = {
          num: data.finfo.num,
          capacity: data.finfo.capacity,
          fjNum: data.finfo.fjNum
        }
        this.gInfo = {
          num: data.ginfo.num,
          capacity: data.ginfo.capacity,
          nbqNum: data.ginfo.nbqNum
        }
      }).catch(err => {
        console.log('获取项目（场站）总体信息异常：' + err)
      })
    },
    projectSave() {
      let saveData = {
        id: this.id,
        pInfo: this.form,
        // fInfo: null,
        // gInfo: null
      }
      // let id = this.id
      // let pInfo= this.form
      console.log(saveData)
      updateProjectTotalityInfoList(saveData).then(res=>{
        this.$message.success('保存项目总体信息成功')
      }).catch(err=>{
        this.$message.warning('保存项目总体信息异常')
        console.log('保存项目总体信息异常：'+err)
      })
    },
    stationSave() {
      let saveData = {
        id: this.id,
        fInfo: this.fInfo,
        gInfo: this.gInfo
      }
      updateStationTotalityInfoList(saveData).then(res=>{
        this.$message.success('保存场站总体信息成功')
      }).catch(err=>{
        this.$message.success('保存场站总体信息异常')
        console.log('保存场站总体信息异常：'+err)
      })
    }
  }
}
</script>

<style scoped>

</style>