修改数据统计配置和AI模型配置部分UI实现

src/views/analysis/Analysis.vue

@@ -37,12 +37,9 @@
     </div>
 
     <el-dialog title="新建统计分析配置" v-model="analysisVisible" width="50%">
-      <el-form label-width="150px">
-        <el-form-item label="配置拥有字段数：" >
-          {{selectConfigLen}}
-        </el-form-item>
-        <el-form-item label="分析方法" required>
-          <el-select v-model="analysisType" placeholder="分析方法" class="handle-select mr10" @change="changeMethodMsg">
+      <el-form label-width="150px" label-position="left">
+        <el-form-item label="分析方法：" required>
+          <el-select v-model="analysisType" placeholder="请选择" class="handle-select mr10" @change="changeMethodMsg">
             <el-option key="1" label="数据分布" value="DATA_DISTRIBUTION"></el-option>
             <el-option key="2" label="散点图" value="SCATTER_PLOT"></el-option>
             <el-option key="3" label="数据统计" value="STATISTICS"></el-option>
@@ -50,22 +47,22 @@
             <el-option key="5" label="皮尔森相关系数" value="PEARSON"></el-option>
           </el-select>
         </el-form-item>
-          <el-alert type="info" show-icon style="height: 40px;">{{methodMsg}}</el-alert>
-        <el-form-item label="方法和字段要求" required>
-          <text>皮尔森相关系数需要两个int/double字段，散点图可以传入2-3个字段，其他的方法只需一个字段。除了数据分布可以传入string字段，其他方法请传入int/double字段</text>
+        <el-alert type="info" show-icon style="margin-bottom: 20px">{{methodMsg}}</el-alert>
+        <el-form-item label="配置拥有字段数：" >
+          {{selectConfigLen}}
+        </el-form-item>
+        <el-form-item label="配置拥有字段：">
+          <el-table :data="selectConfigCol" border class="table"  header-cell-class-name="table-header" size="small">
+            <el-table-column label="字段名">
+              <template #default="scope"><span>{{scope.row}}</span></template>
+            </el-table-column>
+          </el-table>
         </el-form-item>
-                  <el-form-item label="配置拥有字段" required>
-                    <el-table :data="selectConfigCol" border class="table"  header-cell-class-name="table-header" >
-                      <el-table-column label="字段名">
-                        <template #default="scope"><span>{{scope.row}}</span></template>
-                      </el-table-column>
-                    </el-table>
-                  </el-form-item>
       </el-form>
       <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="analysisVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="analysis">确 定</el-button>
+                    <el-button @click="analysisVisible = false" size="medium">再想想</el-button>
+                    <el-button type="primary" @click="analysis" size="medium">确定</el-button>
                 </span>
       </template>
     </el-dialog>
@@ -73,15 +70,14 @@
     <el-dialog
         v-model="pipelineVisible"
         title="新建流水线"
-        width="30%"
         :before-close="handleClose"
     >
-      <el-form width="300px">
-        <el-form-item label="流水线名称" required>
+      <el-form label-position="left" label-width="120px">
+        <el-form-item label="流水线名称：" required>
           <el-input v-model="pplForm.pipelineName"></el-input>
         </el-form-item>
-        <el-form-item label="分析方法" required>
-          <el-select v-model="pplForm.func" placeholder="分析方法" class="handle-select mr10">
+        <el-form-item label="分析方法：" required>
+          <el-select v-model="pplForm.func" placeholder="请选择" class="handle-select mr10" @change="changeMethodMsg2">
             <el-option key="1" label="数据分布" value="DATA_DISTRIBUTION"></el-option>
             <el-option key="2" label="散点图" value="SCATTER_PLOT"></el-option>
             <el-option key="3" label="数据统计" value="STATISTICS"></el-option>
@@ -89,14 +85,15 @@
             <el-option key="5" label="皮尔森相关系数" value="PEARSON"></el-option>
           </el-select>
         </el-form-item>
+        <el-alert type="info" show-icon style="margin-bottom: 20px">{{methodMsg2}}</el-alert>
         <el-form-item label="选中列：" >
           {{pplForm.chosenColumns}}
         </el-form-item>
       </el-form>
       <template #footer>
           <span class="dialog-footer">
-            <el-button @click="pipelineVisible = false">取消</el-button>
-            <el-button type="primary" @click="pipeline()" style="margin-left: 10px"> 新建流水线 </el-button>
+            <el-button @click="pipelineVisible = false" size="medium">再想想</el-button>
+            <el-button type="primary" @click="pipeline()" style="margin-left: 10px" size="medium">确定</el-button>
           </span>
       </template>
     </el-dialog>
@@ -131,20 +128,36 @@ export default {
     let analysisType = ref();
     let selectConfigCol = ref([]);
     let methodMsg=ref("不同方法仅适用于特定特征字段");
+    let methodMsg2=ref("不同方法仅适用于特定特征字段");
     const router = useRouter();
 
     const changeMethodMsg=()=>{
       let value = analysisType.value;
       if(value==='DATA_DISTRIBUTION'){
-        methodMsg.value="数据分布请传入1个字段，类型不限"
+        methodMsg.value="请传入 1 个字段，类型不限（int/double/string）"
+      }else if(value==='SCATTER_PLOT'){
+        methodMsg.value="请传入 2-3 个 int/double 字段"
+      }else if(value==='STATISTICS'){
+        methodMsg.value="请传入 1 个 int/double 字段"
+      }else if(value==='SKEWNESS_KURTOSIS'){
+        methodMsg.value="请传入 1 个 int/double 字段"
+      }else if(value==='PEARSON'){
+        methodMsg.value="请传入2个 int/double 字段"
+      }
+    };
+    const changeMethodMsg2=()=>{
+      let value = pplForm.func;
+      if(value==='DATA_DISTRIBUTION'){
+        console.log(1)
+        methodMsg2.value="请传入 1 个字段，类型不限（int/double/string）"
       }else if(value==='SCATTER_PLOT'){
-        methodMsg.value="散点图可以传入2个int/double字段"
+        methodMsg2.value="请传入 2-3 个 int/double 字段"
       }else if(value==='STATISTICS'){
-        methodMsg.value="请传入1个int/double字段"
+        methodMsg2.value="请传入 1 个 int/double 字段"
       }else if(value==='SKEWNESS_KURTOSIS'){
-        methodMsg.value="请传入1个int/double字段"
+        methodMsg2.value="请传入 1 个 int/double 字段"
       }else if(value==='PEARSON'){
-        methodMsg.value="请传入2个int/double字段"
+        methodMsg2.value="请传入2个 int/double 字段"
       }
     }
 
@@ -177,13 +190,23 @@ export default {
         if (res.msg === '成功'){
           pipelineVisible.value = false
           ElMessageBox({
-            title: '模型训练',
-            message: `加入流水线成功`,
-            confirmButtonText: '确定',
+            title: '模型训练结果',
+            message: `加入流水线成功！`,
+            showCancelButton: true,
+            confirmButtonText: '查看流水线',
+            cancelButtonText: '留在本页面',
+            beforeClose: (action, instance, done) => {
+              if (action === 'confirm') {
+                router.push("/analysisPipeline");
+                done()
+              } else {
+                done()
+              }
+            },
           })
         }
         else{
-          ElMessage.error("预测失败!:"+res.msg);
+          ElMessage.error("流水线生成失败!:"+res.msg);
         }
       })
     }
@@ -244,38 +267,19 @@ export default {
       console.log(payload)
       if (payload.func !== undefined){
         analysisVisible.value = false;
-        ElMessageBox( {
-          title: "确定要分析吗？",
-          showCancelButton: true,
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true
-              instance.confirmButtonText = '分析中...'
-              visualize(payload).then(res => {
-                instance.confirmButtonLoading = false
-                if (res.msg === '成功'){
-                  ElMessageBox({
-                    title: '数据分析',
-                    message: `数据分析成功`,
-                    confirmButtonText: '确定',
-                  })
-                  getPage();
-                  done()
-                }
-                else{
-                  ElMessage.error("数据分析失败!:"+res.msg);
-                  done()
-                }
-              }).catch(err=>{
-                console.log(err)
-              });
-            } else {
-              done()
-            }
-          },
-        })
+        ElMessage.info("开始数据分析");
+        visualize(payload).then(res => {
+          instance.confirmButtonLoading = false
+          if (res.msg === '成功'){
+            ElMessage.success("数据分析成功！");
+            getPage();
+          }
+          else{
+            ElMessage.error("数据分析失败！:"+res.msg);
+          }
+        }).catch(err=>{
+          console.log(err)
+        });
       }
       else {
         alert("请选择数据分析方法！");
@@ -292,6 +296,7 @@ export default {
       analysisType,
       selectConfigCol,
       methodMsg,
+      methodMsg2,
       selectConfigId,
       router,
       pplForm,
@@ -302,6 +307,7 @@ export default {
       startAnalysis,
       analysis,
       changeMethodMsg,
+      changeMethodMsg2,
       handlePipeline,
       pipeline,
     };
@@ -344,4 +350,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/analysis/AnalysisConfig.vue

@@ -63,7 +63,7 @@ export default {
     getPage();
 
     const handleDelete = (configId) => {
-      ElMessageBox.confirm("确定要删除吗？", "提示", {
+      ElMessageBox.confirm("确定要删除该数据统计配置吗？", "确认删除", {
         type: "warning",
       })
           .then(() => {
@@ -123,4 +123,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/analysis/AnalysisConfigDetail.vue

@@ -3,15 +3,18 @@
 
     <div class="crumbs">
       <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/analysisConfig' }">
+          <i class="el-icon-lx-cascades"></i> 数据统计配置列表
+        </el-breadcrumb-item>
         <el-breadcrumb-item>
-          <i class="el-icon-lx-cascades"></i> 数据统计配置详情
+          <i class="el-icon-lx-cascades"></i> 配置详情
         </el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
     <div class="container">
       <div class="form-box" >
-        <el-form ref="formRef" label-width="120px">
+        <el-form ref="formRef" label-width="120px" label-position="left">
           <el-form-item label="统计配置名：" >
             {{config.configName}}
           </el-form-item>
@@ -19,7 +22,7 @@
               {{config.chosenColumns}}
           </el-form-item>
           <el-form-item>
-            <el-button type="primary"  @click="startAnalysis()">进行分析</el-button>
+            <el-button type="primary" @click="startAnalysis()">进行分析</el-button>
           </el-form-item>
         </el-form>
 
@@ -27,12 +30,9 @@
     </div>
 
     <el-dialog title="新建统计分析配置" v-model="analysisVisible" width="50%">
-      <el-form label-width="150px">
-        <el-form-item label="配置拥有字段数：" >
-          {{selectConfigLen}}
-        </el-form-item>
-        <el-form-item label="分析方法" required>
-          <el-select v-model="analysisType" placeholder="分析方法" class="handle-select mr10" @change="changeMethodMsg">
+      <el-form label-width="150px" label-position="left">
+        <el-form-item label="分析方法：" required>
+          <el-select v-model="analysisType" placeholder="请选择" class="handle-select mr10" @change="changeMethodMsg">
             <el-option key="1" label="数据分布" value="DATA_DISTRIBUTION"></el-option>
             <el-option key="2" label="散点图" value="SCATTER_PLOT"></el-option>
             <el-option key="3" label="数据统计" value="STATISTICS"></el-option>
@@ -40,12 +40,12 @@
             <el-option key="5" label="皮尔森相关系数" value="PEARSON"></el-option>
           </el-select>
         </el-form-item>
-        <el-alert type="info" show-icon style="height: 40px;">{{methodMsg}}</el-alert>
-        <el-form-item label="方法和字段要求" required>
-          <text>皮尔森相关系数需要两个int/double字段，散点图可以传入2-3个字段，其他的方法只需一个字段。除了数据分布可以传入string字段，其他方法请传入int/double字段</text>
+        <el-alert type="info" show-icon style="margin-bottom: 20px">{{methodMsg}}</el-alert>
+        <el-form-item label="配置拥有字段数：" >
+          {{selectConfigLen}}
         </el-form-item>
-        <el-form-item label="配置拥有字段" required>
-          <el-table :data="selectConfigCol" border class="table"  header-cell-class-name="table-header" >
+        <el-form-item label="配置拥有字段：">
+          <el-table :data="selectConfigCol" border class="table"  header-cell-class-name="table-header" size="small">
             <el-table-column label="字段名">
               <template #default="scope"><span>{{scope.row}}</span></template>
             </el-table-column>
@@ -54,8 +54,18 @@
       </el-form>
       <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="analysisVisible = false">取 消</el-button>
-                    <el-button type="primary" @click="analysis">确 定</el-button>
+                    <el-button @click="analysisVisible = false" size="medium">再想想</el-button>
+                    <el-button type="primary" @click="analysis" size="medium">确定</el-button>
+                </span>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="分析结果" v-model="analysisGoodResultVisible" width="50%">
+      <span>数据分析成功！</span>
+      <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="analysisGoodResultVisible = false" size="medium">留在本页面</el-button>
+                    <el-button type="primary" @click="analysis" size="medium">查看分析结果</el-button>
                 </span>
       </template>
     </el-dialog>
@@ -65,7 +75,7 @@
 
 <script>
 import {reactive, ref} from "vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import {getOneAnalysisConfig} from "../../api/analysisConfig";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {visualize} from "../../api/analysis";
@@ -85,6 +95,7 @@ export default {
     const config=ref({});
     const route=useRoute()
     let analysisVisible = ref(false);
+    let analysisGoodResultVisible = ref(false);
     let analysisType = ref();
     let selectConfigCol = ref([]);
     let methodMsg=ref("不同方法仅适用于特定特征字段");
@@ -101,15 +112,15 @@ export default {
     const changeMethodMsg=()=>{
       let value = analysisType.value;
       if(value==='DATA_DISTRIBUTION'){
-        methodMsg.value="数据分布请传入1个字段，类型不限"
+        methodMsg.value="请传入 1 个字段，类型不限（int/double/string）"
       }else if(value==='SCATTER_PLOT'){
-        methodMsg.value="散点图可以传入2个int/double字段"
+        methodMsg.value="请传入 2-3 个 int/double 字段"
       }else if(value==='STATISTICS'){
-        methodMsg.value="请传入1个int/double字段"
+        methodMsg.value="请传入 1 个 int/double 字段"
       }else if(value==='SKEWNESS_KURTOSIS'){
-        methodMsg.value="请传入1个int/double字段"
+        methodMsg.value="请传入 1 个 int/double 字段"
       }else if(value==='PEARSON'){
-        methodMsg.value="请传入2个int/double字段"
+        methodMsg.value="请传入2个 int/double 字段"
       }
     }
 
@@ -130,6 +141,7 @@ export default {
       analysisVisible.value = true;
     }
 
+    const router = useRouter();
     const analysis = () => {
       const payload={
         userId: localStorage.getItem("ms_userId"),
@@ -138,46 +150,40 @@ export default {
       }
       if (payload.func !== undefined){
         analysisVisible.value = false;
-        ElMessageBox( {
-          title: "确定要分析吗？",
-          showCancelButton: true,
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          beforeClose: (action, instance, done) => {
-            if (action === 'confirm') {
-              instance.confirmButtonLoading = true
-              instance.confirmButtonText = '分析中...'
-              visualize(payload).then(res => {
-                instance.confirmButtonLoading = false
-                if (res.msg === '成功'){
-                  ElMessageBox({
-                    title: '数据分析',
-                    message: `数据分析成功`,
-                    confirmButtonText: '确定',
-                  })
-                  getData();
+        ElMessage.info("开始数据分析");
+        visualize(payload).then(res => {
+          if (res.msg === '成功'){
+            ElMessageBox( {
+              title: "分析结果",
+              message: `数据分析成功！`,
+              showCancelButton: true,
+              confirmButtonText: '查看分析结果',
+              cancelButtonText: '留在本页面',
+              beforeClose: (action, instance, done) => {
+                if (action === 'confirm') {
+                  router.push("/analysis");
                   done()
-                }
-                else{
-                  ElMessage.error("数据分析失败!:"+res.msg);
+                } else {
+                  getData();
                   done()
                 }
-              }).catch(err=>{
-                console.log(err)
-              });
-            } else {
-              done()
-            }
-          },
-        })
+              },
+            })
+          }
+          else{
+            ElMessage.error("数据分析失败！:"+res.msg);
+          }
+        }).catch(err=>{
+          console.log(err)
+        });
       }
       else {
-        alert("请选择数据分析方法！");
-        return;
+        ElMessage.warning("请选择数据分析方法！");
       }
     }
 
     return{
+      router,
       config,
       query,
       pageTotal,
@@ -193,6 +199,7 @@ export default {
       getData,
       startAnalysis,
       changeMethodMsg,
+      analysisGoodResultVisible
     };
   }
 }
@@ -230,4 +237,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/analysis/AnalysisHistory.vue

@@ -2,6 +2,9 @@
 <div>
   <div class="crumbs">
     <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/analysis' }">
+        <i class="el-icon-pie-chart"></i> 数据统计分析列表
+      </el-breadcrumb-item>
       <el-breadcrumb-item>
         <i class="el-icon-lx-cascades"></i> 分析结果
       </el-breadcrumb-item>
@@ -315,4 +318,4 @@ export default {
   width: 40px;
   height: 40px;
 }
-</style>
+</style>

src/views/file/FileDetail.vue

@@ -256,6 +256,7 @@ export default {
         payload.label = selectData.value[selectData.value.length-1].fieldName
       }
       addConfig(payload).then(res=>{
+        console.log(res)
         if(res.msg === '成功') {
           ElMessage.success(`已成功生成AI模型配置`);
           configCreate.value = false;
@@ -273,6 +274,7 @@ export default {
     };
 
     const handleAnalysisByHand=()=>{
+      ElMessage.warning(`重新分析文件中，请稍候`);
       const payload ={
         fileInfoId: fileInfoId,
         userId: localStorage.getItem("ms_userId")

src/views/ml/ConfigDetail.vue

@@ -2,6 +2,9 @@
   <div>
     <div class="crumbs">
       <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/config' }">
+          <i class="el-icon-lx-cascades"></i> AI模型配置列表
+        </el-breadcrumb-item>
         <el-breadcrumb-item>
           <i class="el-icon-lx-cascades"></i> 配置详情
         </el-breadcrumb-item>
@@ -11,7 +14,7 @@
 <!--  <el-tab-pane :label="featureList"> </el-tab-pane>-->
       <div class="container">
         <div class="form-box" >
-          <el-form ref="formRef" label-width="120px">
+          <el-form ref="formRef" label-width="100px" label-position="left">
             <el-form-item label="学习类型：" >
               <div v-if="config.learningType === 'SUPERVISED_LEARNING'">
                 监督学习
@@ -34,7 +37,7 @@
               </el-table-column>
               <el-table-column label="机器学习算法" width="150%">
                 <template #default="scope">
-                  {{ scope.row.machineLearningAlgorithm }}
+                  {{handleAlgorithmName(scope.row.machineLearningAlgorithm)}}
                 </template>
               </el-table-column>
               <el-table-column label="训练状态">
@@ -96,8 +99,8 @@
             </el-form>
             <template #footer>
                 <span class="dialog-footer">
-                    <el-button @click="modelVisiable = false">取 消</el-button>
-                    <el-button type="primary" @click="saveModel">确 定</el-button>
+                    <el-button @click="modelVisiable = false" size="medium">再想想</el-button>
+                    <el-button type="primary" @click="saveModel" size="medium">确定</el-button>
                 </span>
             </template>
           </el-dialog>
@@ -274,6 +277,30 @@ export default {
       selectData.value=val;
     }
 
+    const handleAlgorithmName=(name)=>{
+      if (name === "DECISION_TREE_CLASSIFICATION") {
+        return "决策树分类";
+      } else if (name === "GRADIENT_BOOSTED_TREE_CLASSIFICATION") {
+        return "梯度提升树分类";
+      } else if (name === "LOGISTIC_REGRESSION_CLASSIFICATION") {
+        return "对数几率回归分类";
+      } else if (name === "MULTILAYER_PERCEPTRON_CLASSIFICATION") {
+        return "多层感知器分类";
+      } else if (name === "NAIVE_BAYES_CLASSIFICATION") {
+        return "朴素贝叶斯分类";
+      } else if (name === "XGBOOST_CLASSIFICATION") {
+        return "XGBOOST分类";
+      } else if (name === "RANDOM_FOREST_CLASSIFICATION") {
+        return "随机森林分类";
+      } else if (name === "K_MEANS_CLUSTERING") {
+        return "K均值聚类";
+      } else if (name === "DECISION_TREE_REGRESSION") {
+        return "决策树回归算法";
+      } else if (name === "RANDOM_FOREST_REGRESSION") {
+        return "随机森林回归";
+      }
+    }
+
     return {
       modelVisiable,
       config,
@@ -302,6 +329,8 @@ export default {
       handlePageChange,
       createModel,
       handleEdit,
+
+      handleAlgorithmName
     };
   },
 };

src/views/ml/ConfigList.vue

@@ -3,7 +3,7 @@
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item>
-                    <i class="el-icon-lx-cascades"></i> 配置列表
+                    <i class="el-icon-lx-cascades"></i> AI模型配置列表
                 </el-breadcrumb-item>
             </el-breadcrumb>
         </div>

src/views/ml/ModelList.vue

@@ -18,7 +18,7 @@
         <el-table-column prop="modelName" label="模型名"></el-table-column>
         <el-table-column prop="configName" label="所属配置"></el-table-column>
         <el-table-column label="模型算法">
-          <template #default="scope">{{ scope.row.machineLearningAlgorithm }}</template>
+          <template #default="scope">{{ handleAlgorithmName(scope.row.machineLearningAlgorithm) }}</template>
         </el-table-column>
         <el-table-column prop="arguments" label="参数值" :show-overflow-tooltip="true">
           <template #default="scope">
@@ -528,6 +528,30 @@ export default {
       editVisible.value = true;
     };
 
+    const handleAlgorithmName=(name)=>{
+      if (name === "DECISION_TREE_CLASSIFICATION") {
+        return "决策树分类";
+      } else if (name === "GRADIENT_BOOSTED_TREE_CLASSIFICATION") {
+        return "梯度提升树分类";
+      } else if (name === "LOGISTIC_REGRESSION_CLASSIFICATION") {
+        return "对数几率回归分类";
+      } else if (name === "MULTILAYER_PERCEPTRON_CLASSIFICATION") {
+        return "多层感知器分类";
+      } else if (name === "NAIVE_BAYES_CLASSIFICATION") {
+        return "朴素贝叶斯分类";
+      } else if (name === "XGBOOST_CLASSIFICATION") {
+        return "XGBOOST分类";
+      } else if (name === "RANDOM_FOREST_CLASSIFICATION") {
+        return "随机森林分类";
+      } else if (name === "K_MEANS_CLUSTERING") {
+        return "K均值聚类";
+      } else if (name === "DECISION_TREE_REGRESSION") {
+        return "决策树回归算法";
+      } else if (name === "RANDOM_FOREST_REGRESSION") {
+        return "随机森林回归";
+      }
+    };
+
     return {
       router,
       usemodelId,
@@ -560,7 +584,8 @@ export default {
       handleBatchDelete,
       handleEdit,
       getpage,
-      handleTrainRes
+      handleTrainRes,
+      handleAlgorithmName
     };
   },
 };