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

<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input size="small" v-model="queryParams.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" plain @click="getList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="success" plain @click="addTask()">创建任务</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column align="center" prop="tTaskId" label="任务id"></el-table-column>
        <el-table-column align="center" prop="tTaskName" label="名称"></el-table-column>
        <el-table-column align="center" prop="tTaskStatus" label="状态"></el-table-column>
        <el-table-column align="center" prop="tCreateTime" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="tCronExpression" label="定时任务"></el-table-column>
        <el-table-column align="center" prop="tAnalysisReport" label="报告分析" width="100">
          <template slot-scope="{row}">
            <el-button @click="viewReport(row)" type="text" size="small">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="tRunInfo" label="运行信息" width="100">
          <template slot-scope="{row}">
            <el-button @click="viewInfo(row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         fixed="right"
                         label="操作" width="200"
        >
          <template slot-scope="{row}">
            <el-button @click="handleClick(row)" type="primary" plain size="mini">编辑</el-button>
            <el-button @click="handleClick(row)" type="danger" plain size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :title="isEdit?'修改任务':'创建任务'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose" :close-on-click-modal="false">
      <div>
        <el-form ref="ruleForm" :rules="rules" :model="formData" class="demo-form-inline" label-width="130px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务名称" prop="tTaskName" label-width="100px">
                <el-input v-model="formData.tTaskName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="定时任务" prop="tCronExpression" label-width="100px">
                <el-input v-model="formData.tCronExpression"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
        <div class="mode-table">
          <div class="flex model-table-tr">
            <span class="pa-0 td td0"></span>
            <span class="pa-0 td td1 font-bold">是否开启</span>
            <span class="pa-0 td2 font-bold">参数</span>
          </div>
          <!--    数据获取        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">数据获取</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.dataAcquisition.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                   <el-form ref="ruleForm" :rules="dataAcquisitionRules" :model="formData.dataAcquisition.value"
                            class="demo-form-inline"
                            label-width="130px">
                      <el-form-item label="查询语句" prop="query_sql">
                        <el-input v-model="formData.dataAcquisition.value['query_sql']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                      <el-form-item label="mongo库" prop="mongodb_database">
                        <el-input v-model="formData.dataAcquisition.value['mongodb_database']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                     <el-form-item label="写入的mongo表" prop="mongodb_write_table">
                        <el-input v-model="formData.dataAcquisition.value['mongodb_write_table']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                     <el-form-item label="查询的mysql库" prop="mysql_database">
                        <el-input v-model="formData.dataAcquisition.value['mysql_database']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                   </el-form>
                </div>
              </span>
          </div>
          <!--    数据处理        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">数据处理</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.dataCleaning.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <data-clean-form ref="dataCleaning" :form-data="formData.dataCleaning"
                                   @child-event="getDataCleaning"></data-clean-form>
                </div>
              </span>
          </div>
          <!--    限电        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">
              <el-select v-model="formData.powerRationing.name" @change="powerRationingNameChange" placeholder="请选择"
                         size="small" style="width: 100%">
                <el-option
                  v-for="item in powerRationingName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.powerRationing.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <power-rationing-form ref="powerRationing" :form-data="formData.powerRationing"
                                        @child-event="getPowerRationing"></power-rationing-form>
                </div>
              </span>
          </div>
          <!--    模型        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">
              <el-select v-model="formData.model.name" @change="isDisableModeTest" placeholder="请选择" size="small"
                         style="width: 100%">
                <el-option
                  v-for="item in modelName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.model.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false" disabled>关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <model-form ref="model" :form-data="formData.model" @child-event="getModel"></model-form>
                </div>
              </span>
          </div>
          <!--    模型测试        -->
          <div class="flex model-table-tr" v-if="!modelTestDisable">
            <span class="pa-0 td td0">{{ formData.modelTest.name }}</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.modelTest.enable" size="mini">
                  <el-radio-button :label="true" :disabled="modelTestDisable">开启</el-radio-button>
                  <el-radio-button :label="false" disabled>关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <model-test-form ref="modelTest" :form-data="formData.modelTest"
                                   @child-event="getModelTest"></model-test-form>
                </div>
              </span>
          </div>
          <!--    后处理        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">后处理</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.processing.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <processing-form ref="processing" :form-data="formData.processing"
                                   @child-event="getProcessing"></processing-form>
                </div>
              </span>
          </div>
          <!--    分析报告        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">分析报告</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.report.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <report-form ref="report" :form-data="formData.report"
                               @child-event="getReport"></report-form>
                </div>
              </span>
          </div>


        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="saveTask">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="运行信息"
      :visible.sync="dialogInfoVisible"
      width="30%"
     >
      <div>
        {{ info }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogInfoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dataCleanForm from './dataCleanForm.vue'
import powerRationingForm from './powerRationingForm.vue'
import modelForm from './modelForm.vue'
import modelTestForm from './modelTestForm.vue'
import processingForm from './processingForm.vue'
import reportForm from './reportForm.vue'
import {addTask} from "@/api/xvji/training";

export default {
  components: {modelForm, modelTestForm, dataCleanForm, powerRationingForm, processingForm, reportForm},
  data() {
    return {
      loading: false,
      tableData: [],
      formData: {
        dataAcquisition: {name: '数据获取', enable: true, value: {}},
        dataCleaning: {name: '数据处理', enable: true, value: {}},
        powerRationing: {name: '限电清洗', enable: true, value: {
            mongodb_database:'',
            mongodb_read_table:'',
            mongodb_write_table:'',
            col_power:'',
            col_radiance:'',
            sigma:'1'
          }},
        model: {name: '模型', enable: true, value: {}},
        modelTest: {name: '模型测试', enable: true, value: {}},
        processing: {name: '后处理', enable: true, value: {}},
        report: {name: '分析报告', enable: true, value: {}},
      },
      modelTestDisable: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
      isEdit: false,
      dialogVisible: false,
      dialogInfoVisible: false,
      info: '',
      rules: {
        tTaskName: [
          {required: true, message: '请填写任务名称', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请填写任务名称', trigger: 'blur'}
        ],

      },
      dataAcquisitionRules: {
        query_sql: [
          {required: true, message: '请填写查询语句', trigger: 'blur'}
        ],
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: 'blur'}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: 'blur'}
        ],
        mysql_database: [
          {required: true, message: '请填写查询的mysql库', trigger: 'blur'}
        ],
      },
      powerRationingName: [
        {label: '限电清洗-光伏', value: '限电清洗-光伏'},
        {label: '限电清洗-风电', value: '限电清洗-风电'}
      ],
      modelName: [
        {label: '光伏物理模型', value: '光伏物理模型'},
        {label: '风电物理模型', value: '风电物理模型'},
        {label: 'Holtwinters模型', value: 'Holtwinters模型'},
        {label: 'LSTM', value: 'LSTM'},
        {label: '机器学习模型', value: '机器学习模型'}
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.tableData = [
        {
          tTaskId: '1',
          tTaskName: 'T00001',
          tTaskStatus: '0',
          tCreateTime: '',
          tCronExpression: '',
          tAnalysisReport: '',
          tRunInfo: '1111'
        },
        {
          tTaskId: '2',
          tTaskName: 'T00002',
          tTaskStatus: '1',
          tCreateTime: '',
          tCronExpression: '',
          tAnalysisReport: '',
          tRunInfo: '1111'
        }
      ]
      this.total = this.tableData.length
      this.loading = false
    },
    // 新增
    addTask() {

      this.isEdit = false
      this.dialogVisible = true
      this.formData = {
        tTaskName: '',
        tCronExpression: '',
        dataAcquisition: {name: '数据获取', enable: true, value: {}},
        dataCleaning: {name: '数据处理', enable: true, value: {}},
        powerRationing: {name: '限电清洗-光伏', enable: true, value: {}},
        model: {name: '光伏物理模型', enable: true, value: {}},
        modelTest: {name: '模型测试', enable: true, value: {}},
        processing: {name: '后处理', enable: true, value: {}},
        report: {name: '分析报告', enable: true, value: {}},
      }
      this.$nextTick(()=>{
        this.$refs.ruleForm.clearValidate()
      })
    },
    // 编辑
    handleClick() {
      this.isEdit = true
      this.dialogVisible = true
    },
    //保存
    saveTask() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          alert('submit!');
          await this.$refs.dataCleaning.saveTask()
          if (JSON.stringify(this.formData.dataCleaning.value) === '{}') {
            return false
          }
          await this.$refs.powerRationing.saveTask()
          if (JSON.stringify(this.formData.powerRationing.value) === '{}') {
            return false
          }
          await this.$refs.model.saveTask()
          if (JSON.stringify(this.formData.model.value) === '{}') {
            return false
          }
          if (this.formData.model.name.includes('LSTM') || this.formData.model.name.includes('机器')) {
            await this.$refs.modelTest.saveTask()
            if (JSON.stringify(this.formData.modelTest.value) === '{}') {
              return false
            }
          }else{
            this.formData.modelTest = {}
          }
          await this.$refs.processing.saveTask()
          if (JSON.stringify(this.formData.processing.value) === '{}') {
            return false
          }
          await this.$refs.report.saveTask()
          if (JSON.stringify(this.formData.report.value) === '{}') {
            return false
          }
        } else {
          console.log('校验不通过');
          return false;
        }
        if(!this.isEdit){
          addTask(this.formData).then(res=>{

          })
        }
      });
      // this.dialogVisible = false
    },

    // 数据处理数据
    getDataCleaning(val) {
      this.formData.dataCleaning.value = val
    },
    getPowerRationing(val) {
      this.formData.powerRationing.value = val
    },
    getModel(val) {
      this.formData.model.value = val
    },
    getModelTest(val) {
      this.formData.modelTest.value = val
    },
    getProcessing(val) {
      this.formData.processing.value = val
    },
    getReport(val) {
      this.formData.report.value = val
    },
    powerRationingNameChange() {
      // if (!this.isEdit) {
      //   if (this.formData.powerRationing.name.includes('光伏')) {
      //     this.formData.powerRationing.value = {
      //       mongodb_database:'',
      //       mongodb_read_table:'',
      //       mongodb_write_table:'',
      //       col_power:'',
      //       col_radiance:'',
      //       sigma: 1
      //     }
      //   } else {
      //     this.formData.powerRationing.value = {
      //       mongodb_database:'',
      //       mongodb_read_table:'',
      //       mongodb_write_table:'',
      //       col_power:'',
      //       col_ws:'',
      //       cap:'',
      //       eps: 0.1,
      //       min_samples: '20'
      //     }
      //   }
      // }
    },
    isDisableModeTest() {
      if (this.formData.model.name.includes('LSTM') || this.formData.model.name.includes('机器')) {
        this.modelTestDisable = false
        this.formData.modelTest.enable = true
        this.formData.modelTest.name = this.formData.model.name + '测试'
        return
      }
      this.modelTestDisable = true
      this.formData.modelTest.enable = false
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      // this.formData = {
      //   tTaskName: '',
      //   tCronExpression: '',
      //   dataAcquisition: {name: '数据获取', enable: true, value: {}},
      //   dataCleaning: {name: '数据处理', enable: true, value: {}},
      //   powerRationing: {name: '限电清洗-光伏', enable: true, value: {}},
      //   model: {name: '光伏物理模型', enable: true, value: {}},
      //   modelTest: {name: '模型测试', enable: true, value: {}},
      //   processing: {name: '后处理', enable: true, value: {}},
      //   report: {name: '分析报告', enable: true, value: {}},
      // }
      this.dialogVisible = false
    },
    // 预览报告文件
    viewReport() {

    },
    // 运行信息
    viewInfo(row) {
      this.info = row.tRunInfo
      this.dialogInfoVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.form-table-item {
  max-height: 30vh;
  overflow-y: auto;

  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
}

.td0 {
  width: 200px;
}

.td1 {
  width: 150px;
}

.td2 {
  width: calc(100% - 350px);
}

.mode-table .model-table-tr:last-child {
  border-bottom: 1px solid #ebeef5;
}

.model-table-tr {
  width: 100%;
  text-align: center;
  border: 1px solid #ebeef5;
  border-bottom: none;
  line-height: 30px;

  .td {
    border-right: 1px solid #ebeef5;
    display: grid;
    place-items: center;
  }

  .pa-0 {
    padding: 0 .5vw;

  }
}

</style>