添加衍生列

business-css/frontend/src/views/business/algorithmManagement/modelTrainTask/index.vue

@@ -140,7 +140,7 @@ function addClick() {
   info.value = {
     version: ""
   };
-
+  columnsData.value = [] // 数据集列
   input_cols.value = [] // 特征列
   target_col.value = "" // 目标列
   fileFlow.value = null // 数据集
@@ -172,6 +172,24 @@ function confirmClick(formEl: any) {
           message: "目标列不能为空",
         });
       }
+
+      let isDerivedRules = false
+      for(let i = 0;i<derivedRulesData.value.length;i++){
+        let element = derivedRulesData.value[i]
+        if(element.expr == null || element.expr == "" || element.name == "" || element.expr == null){
+          isDerivedRules = true
+          break
+        }
+      }
+      if(isDerivedRules == true){
+        ElMessage({
+          type: "warning",
+          message: "衍生列表达式不规范，请检查！",
+        });
+        return
+      }
+
+
       if(isSwitch.value == true){
         return
       }
@@ -186,12 +204,28 @@ function confirmClick(formEl: any) {
       }
       
       let infoTemp = JSON.parse(JSON.stringify(info.value))
+
+      let derive = false
+       let tempDerivedRules = ""
+      if(derivedRulesData.value.length != 0){
+        infoTemp.derive = true
+        tempDerivedRules = JSON.stringify(derivedRulesData.value.map((element:any) => ({
+          name: element.name,
+          expr: element.expr,
+        })))
+
+      }
       let feature_map_config = {
         input_cols: input_cols.value,
         target_col: target_col.value,
+        derive: derive,
+        derived_rules: tempDerivedRules,
       }
       infoTemp.dataset_path = dataset_path.value
       infoTemp.feature_map_config = JSON.stringify(feature_map_config)
+
+
+
       data.append('task', JSON.stringify(infoTemp))
       dialogVisibles.value = false
       addAlgorithms(data).then((res: any) => {
@@ -562,7 +596,44 @@ function previewData(){
 
 const tableVisible = ref(false)
 
+const derivedRulesData:any = ref([]) // 自定义规则数据
+const expressionInfo:any = ref({}) // 表达式数据
+const isShowExpressionInfo = ref(false) // 是否显示表达式详情
+const expressionIndex = ref(0) // 表达式索引
+function addDerivedRules(){
+  derivedRulesData.value.push({
+    name: '',
+    expr: '',
+    exprData:[]
+  })
+}
+function dellDerivedRules(index:any){
+  derivedRulesData.value.splice(index,1)
+}
+function selectExpression(index:any){
+ expressionIndex.value = index
+ expressionInfo.value = JSON.parse(JSON.stringify(derivedRulesData.value[index]))
+ isShowExpressionInfo.value = true
 
+}
+function handleExpressionClose(){
+  isShowExpressionInfo.value = false
+}
+function  confirmExpression(){
+  derivedRulesData.value[expressionIndex.value] = expressionInfo.value 
+  isShowExpressionInfo.value = false
+}
+function selectColumn(item:any){
+  expressionInfo.value.exprData.push(item)
+  expressionInfo.value.expr = expressionInfo.value.exprData.join('')
+}
+function revokeExpression(){
+  if(expressionInfo.value.exprData.length == 0){
+    return
+  }
+  expressionInfo.value.exprData.pop()
+  expressionInfo.value.expr = expressionInfo.value.exprData.join('')
+}
 </script>
 
 <template>
@@ -718,9 +789,24 @@ const tableVisible = ref(false)
           </div>
           </div> -->
         </el-form-item> 
-        <!-- <el-form-item label="特征映射快照"  style="width: 100%;" >
+        <el-form-item label="衍生列"  style="width: 100%;" v-if="columnsData.length > 0">
-           <el-input type="textarea" v-model="info.featureMapSnapshot" style="width: 100%" placeholder="输入特征映射快照"></el-input>
+          <div>
-        </el-form-item> -->
+            <div style="display: flex;align-items: center;margin-bottom: 10px;">
+              <img src="@/assets/add.png" alt="" style="width: 35px;height: 35px;cursor: pointer;"  title="新增衍生列" @click="addDerivedRules">
+              <span style="font-weight: bold;padding-left: 20px; color: red;">示例：volume : diameter*height</span>
+            </div>
+            <div style="display: flex;align-items: center; width: 100%;margin-bottom: 10px;" v-for="(item,index) in derivedRulesData" :key="index">
+                <el-input  v-model="item.name" style="width: 200px" placeholder="衍生列名称"></el-input>
+                <span style="padding: 0px 10px;">:</span>
+                <div class="derivedRulesData-expr" @click="selectExpression(index)" v-if="item.expr"> {{item.expr}} </div>
+                <div class="derivedRulesData-expr" @click="selectExpression(index)" style="cursor: pointer;color: #c2c2c2;" v-else="item.expr">表达式</div>
+                <img src="@/assets/del.png" alt="" style="width: 35px;height: 35px;cursor: pointer;margin-left: 10px;" @click="dellDerivedRules(index)">
+                
+            </div>
+          </div>
+          
+         
+        </el-form-item>
       </div>
     
         <span class="dialog-footer"
@@ -731,6 +817,40 @@ const tableVisible = ref(false)
       </el-form>
     </el-dialog>
 
+
+   <el-dialog v-model="isShowExpressionInfo" :close-on-click-modal="false"
+      :modal="false" draggable :before-close="handleExpressionClose" :title="'编辑表达式'"
+      append-to-body width="1145px" class="modelTrainTask-dialog">
+
+      <div style="display: flex;">
+        <div class="columnsData-title" style="line-height: 40px;">特征参数：</div>
+        <div v-for="(item,index) in columnsData" :key="index" class="columnsData-item" @click="selectColumn(item)">
+          {{item}}
+        </div>
+      </div>
+      <div style="display: flex;">
+        <div class="columnsData-title">运算符号：</div>
+        <div class="columnsData-operation" @click="selectColumn('+')">+</div>
+        <div class="columnsData-operation" @click="selectColumn('-')">-</div>
+        <div class="columnsData-operation" @click="selectColumn('*')">*</div>
+        <div class="columnsData-operation" @click="selectColumn('/')">/</div>
+      </div>
+      <div style="display: flex;margin-top: 20px;">
+         <div class="columnsData-title" style="line-height: 40px;">表 达 式：</div> 
+         <div class="columnsData-result">
+          {{ expressionInfo.expr }}
+         </div>
+         <el-button  @click="revokeExpression" style="margin-left: 20px;margin-top: 20px;">撤回</el-button>
+      </div>
+       <span class="dialog-footer"
+          style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
+          <el-button @click="handleExpressionClose">取 消</el-button>
+          <el-button type="primary" @click="confirmExpression">确 定</el-button>
+        </span>
+
+
+    </el-dialog>
+
     <el-dialog v-model="dialogViewVisible" :close-on-click-modal="false"
       :modal="false" draggable :before-close="handleClose" :title="'查看详情'"
       append-to-body width="1145px" height="600px" class="modelTrainTask-dialog">
@@ -896,6 +1016,25 @@ const tableVisible = ref(false)
 .Algorithms_dialog_tabbox_active span{
   color: #fff !important;
 }
+.derivedRulesData-expr{
+  width: 500px;
+  height: 40px;
+  line-height: 40px;
+  box-sizing: border-box;
+  padding: 10px;
+  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
+  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+  cursor: text;
+  transition: var(--el-transition-box-shadow);
+  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
+  background-image: none;
+  flex-grow: 1;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1px 11px;
+  display: inline-flex;
+  transform: translate(0, 0);
+}
 </style>
 <style>
 .el-dialog {
@@ -981,4 +1120,61 @@ const tableVisible = ref(false)
   background-image: url('@/assets/x6/navright_active.png');
   color: #fff !important;
 }
+
+
+.columnsData-item{
+  margin-right: 20px;
+  margin-bottom: 20px;
+  font-family: 'Arial Normal', 'Arial';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #363636;
+  border: 1px solid #ccc;
+   border-radius: 5px;
+  padding: 5px 15px;
+  cursor: pointer;
+}
+.columnsData-result{
+  width: 800px;
+  height: 80px;
+  line-height: 40px;
+  font-family: 'Arial Normal', 'Arial';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20px;
+  color: #363636;
+  border: 1px solid #ccc;
+   border-radius: 5px;
+  padding: 5px 15px;
+  cursor: pointer;
+}
+.columnsData-item:hover{
+  background-color: #f5f8ff;
+}
+.columnsData-title{
+  font-size: 16px;
+  color: #363636;
+  line-height: 60px;
+  padding-right: 20px;
+}
+.columnsData-operation{
+  margin-right: 20px;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Arial Normal', 'Arial';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 30px;
+  color: #363636;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.columnsData-operation:hover{
+  background-color: #f5f8ff;
+}
 </style>