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

<template>
  <div>
    <el-form ref="modelTestForm" :rules="rules" :modelTest="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="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="读取的mongo表" prop="mongodb_read_table" v-if="modelTestType !== 3">
        <el-input v-model="form['mongodb_read_table']" size="mini"
                  :disabled="!modelTest.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="!modelTest.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="!modelTest.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="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="归一化表" prop="scaler_table" v-if="modelTestType === 0">
        <el-input v-model="form['scaler_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="模型名称" prop="model_name">
        <el-input v-model="form['model_name']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="存储的模型表" prop="modelTest_table" v-if="modelTestType ===0">
        <el-input v-model="form['modelTest_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>

      <el-form-item label="测试or生产" prop="algorithm_test" v-if="modelTestType ===0">
        <el-select v-model="form['algorithm_test']" clearable placeholder="请选择" size="small" style="width: 100%" @change="columnChange">
          <el-option
            v-for="item in algorithmTestType" :disabled="!modelTest.isEnable"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装机容量" prop="cap" v-if="modelTestType === 0">
        <el-input v-model="form['cap']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="mongodb_modelTest_table" prop="mongodb_modelTest_table" v-if="modelTestType ===1">
        <el-input v-model="form['mongodb_modelTest_table']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="是否配置生产" prop="forecast_file" v-if="modelTestType === 1" >
        <el-select v-model="form['forecast_file']" clearable placeholder="请选择" size="small" style="width: 100%" @change="columnChange">
          <el-option
            v-for="item in forecastFileType" :disabled="!modelTest.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="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="数据结束时间">
        <el-input v-model="form['timeEnd']" size="mini"
                  :disabled="!modelTest.isEnable" type="textarea"
                  :autosize="{ minRows: 1 }"></el-input>
      </el-form-item>
      <el-form-item label="测试第N天" >
        <el-input v-model="form['howLongAgo']" size="mini"
                  :disabled="!modelTest.isEnable || columnDisabled" 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="!modelTest.isEnable || columnDisabled  " 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.modelTestForm.clearValidate();
    });
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        this.$nextTick(() => {
          this.$refs.modelTestForm.clearValidate();
        });
        this.modelTest = newVal
        this.modelTestType = newVal.componentType.includes('LSTM')?0:1
        this.rules = {}
       if (this.modelTestType === 0) {
          this.rules = {...this.commonRules, ...this.LSTMRules}
        } else if (this.modelTestType === 1) {
          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'}
      ],
      algorithmTestType: [
        {label: '测试', value: '1'},
        {label: '生产', value: '0'},
        {label: '其他', value: 'ok'}
      ],
      modelTestType: 0,
      modelTest: {},
      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'}
        ],
      },
      LSTMRules: {
        scaler_table: [
          {required: true, message: '请填写归一化表', trigger: 'blur'}
        ],
        modelTest_table: [
          {required: true, message: '请填写模型保存表名', trigger: 'blur'}
        ],
        algorithm_test: [
          {required: true, message: '请选择测试or生产', trigger: 'change'}
        ],
        cap: [
          {required: true, message: '请填写预测上限', trigger: 'blur'}
        ],
      },
      machineRules: {
        forecast_file: [
          {required: true, message: '请选择测试or生产', trigger: 'change'}
        ],
        mongodb_modelTest_table: [
          {required: true, message: '请填写mongodb_modelTest_table', trigger: 'blur'}
        ],
        howLongAgo: [
          {required: true, message: '请填写预测第N天', trigger: 'blur'}
        ],
      },
      columnDisabled: false
    }
  },
  mounted() {
  },
  methods: {
    saveTask() {
      this.$refs.modelTestForm.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
    },
    columnChange() {
      if (this.form['forecast_file'] === '0' ||this.form['algorithm_test'] === '1') {
        this.columnDisabled = false
      } else {
        if(this.modelTestType === 1){
          this.$refs.modelTestForm.clearValidate('target')
          this.$refs.modelTestForm.clearValidate('model_name')
        }else{
          this.$refs.modelTestForm.clearValidate('target')
        }
        this.columnDisabled = true
      }
    }
  },

}
</script>

<style scoped lang="scss">

</style>