xvji/xvji-ui/src/views/tasks/predict/dataCleanForm.vue

<template>
  <div>
    <el-form ref="dataCleaningForm" :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="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!dataCleaning.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="!dataCleaning.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="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="是否配置生产" prop="forecast_file">
        <el-select v-model="form['forecast_file']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in forecastFileType" :disabled="!dataCleaning.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场站类型" prop="plant_type">
        <el-select v-model="form['plant_type']" clearable placeholder="请选择" size="small" style="width: 100%">
          <el-option
            v-for="item in stationType" :disabled="!dataCleaning.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['clean_param']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="特征衍生">
        <el-input v-model="form['features_gen']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="装机容量" prop="cap">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="目标值" prop="target">
        <el-input v-model="form['target']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="nwp辐照列">
        <el-input v-model="form['col_radiation']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="nwp风速列">
        <el-input v-model="form['col_speed']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="容忍时间窗口">
        <el-input v-model="form['tol']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="清洗上限">
        <el-input v-model="form['upper_ratio']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="清洗下限">
        <el-input v-model="form['lower_ratio']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="风速列1">
        <el-input v-model="form['speed_1']" size="mini"
                  :disabled="!dataCleaning.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="风速列2">
        <el-input v-model="form['speed_2']" size="mini"
                  :disabled="!dataCleaning.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.dataCleaningForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.dataCleaning = newVal
        this.form = newVal.params
      },
      immediate: true
    }
  },
  data() {
    return {
      dataCleaning: {},
      form: {},
      rules: {
        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'}
        ],
        forecast_file: [
          {required: true, message: '请选择是否配置生产', trigger: 'change'}
        ],
        plant_type: [
          {required: true, message: '请选择场站类型(solar/wind)', trigger: 'change'}
        ],
        cap: [
          {required: true, message: '请填写装机容量', trigger: 'blur'}
        ],
        target: [
          {required: true, message: '请填写目标值', trigger: 'blur'}
        ],
      },
      stationType: [
        {label: 'solar', value: 'solar'},
        {label: 'wind', value: 'wind'}
      ],
      forecastFileType: [
        {label: '测试', value: '0'},
        {label: '生产', value: '1'}
      ],
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.dataCleaningForm.validate((valid) => {
        if (valid) {
          // console.log('child submit!');
          this.$emit('child-event', this.form)
          return true
        } else {
          this.$emit('child-event', {})
          this.$message.warning(this.dataCleaning.componentType+'模块校验未通过')
          return false;
        }
      });
      // this.dialogVisible = false
    },
  }
}
</script>

<style scoped lang="scss">

</style>