xvji/xvji-ui/src/views/tasks/training/modelForm.vue

<template>
  <div>
    <el-form ref="modelForm" :rules="rules" :model="form" class="demo-form-inline"
             label-width="130px">
      <el-form-item label="mongo库" prop="mongodb_database">
        <el-input v-model="form['mongodb_database']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table" v-if="modelType !== 3">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="写入的mongo表" prop="mongodb_write_table">
        <el-input v-model="form['mongodb_write_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="时间列名" prop="col_time">
        <el-input v-model="form['col_time']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="站点编码" prop="farm_id">
        <el-input v-model="form['farm_id']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>


      <el-form-item label="辐照度列" prop="col_radiance" v-if="modelType === 0">
        <el-input v-model="form['col_radiance']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="风速列" prop="col_speed" v-if="modelType === 1">
        <el-input v-model="form['col_speed']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="辐照度最大值" prop="radiance_max" v-if="modelType === 0">
        <el-input v-model="form['radiance_max']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item :label="modelType ===3?'预测上限':'装机容量'" prop="cap" v-if="modelType !== 2">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="归一化表" prop="scaler_table" v-if="modelType === 3">
        <el-input v-model="form['scaler_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="是否配置生产" prop="forecast_file" v-if="modelType !== 3 && modelType !==4" @change="forecastFileChange">
        <el-select v-model="form['forecast_file']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in forecastFileType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据开始时间">
        <el-input v-model="form['timeBegin']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="数据结束时间">
        <el-input v-model="form['timeEnd']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="平滑参数" v-if="modelType ===1">
        <el-select v-model="form['sigmoid_param']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in sigmoidParamType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="测试第N天" v-if="modelType !== 3 && modelType !==4">
        <el-input v-model="form['howLongAgo']" size="mini"
                  :disabled="!model.isEnable || form['forecast_file'] !=='0'" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="目标列" prop="target" v-if="modelType !== 4">
        <el-input v-model="form['target']" size="mini"
                  :disabled="!model.isEnable || form['forecast_file'] !=='0'" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="预测长度" prop="pre_len" v-if="modelType === 2">
        <el-input v-model="form['pre_len']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="预测粒度" prop="freq" v-if="modelType ===2">
        <el-select v-model="form['freq']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in sigmoidParamType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模型名称" prop="model_name">
        <el-input v-model="form['model_name']" size="mini"
                  :disabled="!model.isEnable || form['forecast_file'] !=='0'" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="模型保存表名" prop="model_table" v-if="modelType ===3">
        <el-input v-model="form['model_table']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="模型类型" prop="model_type" v-if="modelType ===4">
        <el-select v-model="form['model_type']" clearable placeholder="请选择" size="small" style="width: 100%" @change="modelTypeChange">
          <el-option
            v-for="item in model_type" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="特征" prop="features" v-if="modelType ===3">
        <el-input v-model="form['features']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="预测类型" prop="station_type" v-if="modelType ===3">
        <el-select v-model="form['station_type']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in stationType" :disabled="!model.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="周期" prop="seasonal_periods" v-if="modelType === 2">
        <el-input v-model="form['seasonal_periods']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="日出时间" v-if="modelType === 2">
        <el-input v-model="form['sunrise']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="日落时间" v-if="modelType === 2">
        <el-input v-model="form['sunset']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="数值型列" prop="numerical_features" v-if="modelType === 4">
        <el-input v-model="form['numerical_features']" size="mini"
                  :disabled="!model.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

<el-form-item label="类别型列" prop="numerical_features" v-if="modelType === 4">
        <el-input v-model="form['numerical_features']" size="mini"
                  :disabled="(!model.isEnable) || categoricalFeaturesDisable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
<el-form-item label="模型参数" prop="model_params" v-if="modelType === 4">
        <el-input v-model="form['model_params']" size="mini"
                  :disabled="!model.isEnable " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
<el-form-item label="迭代次数" prop="num_boost_round" v-if="modelType === 4">
        <el-input v-model="form['num_boost_round']" size="mini"
                  :disabled="!model.isEnable " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
<el-form-item label="目标列" prop="label" v-if="modelType === 4">
        <el-input v-model="form['label']" size="mini"
                  :disabled="!model.isEnable " type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>


    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  destroyed() {
    this.$nextTick(() => {
      this.$refs.modelForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        this.$nextTick(() => {
          this.$refs.modelForm.clearValidate()
        });
        this.model = newVal
        this.modelType = this.modelName.find(w => w.label === newVal.componentType).value
        this.rules = {}
        if(this.modelType === 0){
          this.rules = { ...this.commonRules, ...this.solarRules }
        }else if(this.modelType === 1){
          this.rules = { ...this.commonRules, ...this.windRules }
        }else if(this.modelType === 2){
          this.rules = { ...this.commonRules, ...this.HoltwintersRules }
        }else if(this.modelType === 3){
          this.rules = { ...this.commonRules, ...this.LSTMRules }
        }else if(this.modelType === 4){
          this.rules = { ...this.commonRules, ...this.machineRules }
        }
        this.form = JSON.parse(JSON.stringify(newVal.params))

      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      forecastFileType: [
        {label: '测试', value: '0'},
        {label: '生产', value: '1'}
      ],
      sigmoidParamType: [
        {label: 'L', value: '1'},
        {label: 'x0', value: '7'},
        {label: 'k', value: '0.9'}
      ],
      freqType: [
        {label: '1Min', value: '1Min'},
        {label: '15Min', value: '15Min'},
        {label: '1Hour', value: '1Hour'}
      ],
      modelName: [
        {label: '光伏物理模型', value: 0},
        {label: '风电物理模型', value: 1},
        {label: 'Holtwinters模型', value: 2},
        {label: 'LSTM', value: 3},
        {label: '机器学习模型', value: 4}
      ],
      stationType: [
        {label: '光', value: '1'},
        {label: '风', value: '2'},
        {label: '其他', value: '3'}
      ],
      model_type: [
        {label: 'svr', value: 'svr'},
        {label: 'lightgbm', value: 'lightgbm'}
      ],
      modelType: 0,
      model: {},
      form: {},
      rules: {},
      commonRules: {
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: 'blur'}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: 'blur'}
        ],
        mongodb_read_table: [
          {required: true, message: '请填写读取的mongo表', trigger: 'blur'}
        ],
        col_time: [
          {required: true, message: '请填写时间列名', trigger: 'blur'}
        ],
        farm_id: [
          {required: true, message: '请填写站点编码', trigger: 'blur'}
        ],
        target: [
          {required: true, message: '请填写目标列', trigger: 'blur'}
        ],
        model_name: [
          {required: true, message: '请填写模型名称', trigger: 'blur'}
        ],


      },
      solarRules: {
        radiance_max: [
          {required: true, message: '请填写辐照度最大值', trigger: 'blur'}
        ],
        col_radiance: [
          {required: true, message: '请填写辐照度列名', trigger: 'blur'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
      },
      windRules: {
        sigmoid_param: [
          {required: true, message: '请选择平滑参数', trigger: 'change'}
        ],
        col_speed: [
          {required: true, message: '请填写实测风速列', trigger: 'blur'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
      },
      HoltwintersRules: {
        freq: [
          {required: true, message: '请选择预测粒度', trigger: 'change'}
        ],
        pre_len: [
          {required: true, message: '请填写预测长度', trigger: 'blur'}
        ],
        seasonal_periods: [
          {required: true, message: '请填写周期', trigger: 'blur'}
        ],
      },
      LSTMRules: {
        scaler_table: [
          {required: true, message: '请填写归一化表', trigger: 'blur'}
        ],
        model_table: [
          {required: true, message: '请填写模型保存表名', trigger: 'blur'}
        ],
        features: [
          {required: true, message: '请填写特征', trigger: 'blur'}
        ],
        station_type: [
          {required: true, message: '请选择预测类型', trigger: 'change'}
        ],
        cap: [
          {required: true, message: '请填写预测上限', trigger: 'blur'}
        ],
      },
      machineRules: {
        model_type: [
          {required: true, message: '请选择模型类型', trigger: 'change'}
        ],
        numerical_features: [
          {required: true, message: '请填写数值型列', trigger: 'blur'}
        ],
        categorical_features: [
          {required: true, message: '请填写类别型列', trigger: 'blur'}
        ],
        model_params: [
          {required: true, message: '请选择模型参数', trigger: 'change'}
        ],
        cap: [
          {required: true, message: '请填写预测上限', trigger: 'blur'}
        ],
        num_boost_round: [
          {required: true, message: '请填写迭代次数', trigger: 'blur'}
        ],
        label: [
          {required: true, message: '请填写目标列', trigger: 'blur'}
        ],
      },
      categoricalFeaturesDisable:false
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      if(this.form['forecast_file'] === '0'){
        this.$refs.modelForm.clearValidate('target')
        this.$refs.modelForm.clearValidate('model_name')
      }
      this.$refs.modelForm.validate((valid) => {
        if (valid) {
          // console.log('child submit!');
          this.$emit('child-event', this.form)
          return true
        } else {
          this.$emit('child-event', {})
          console.log('error submit!!');
          return false;
        }
      });

      // this.dialogVisible = false
    },
    modelTypeChange(){
      if(this.form['model_type'] === 'svr'){
        this.categoricalFeaturesDisable = true
        this.form['categorical_features'] = ''
      }else{
        this.categoricalFeaturesDisable = false
      }
    },
    forecastFileChange(){
      if(this.form['forecast_file'] === '0'){
        this.form['howLongAgo'] = '1'
        this.$refs.modelForm.clearValidate('target')
        this.$refs.modelForm.clearValidate('model_name')
      }else{
        this.form['howLongAgo'] = ''
      }
    }
  },

}
</script>

<style scoped lang="scss">

</style>