feat: before可视化

src/api/analysis.js

@@ -0,0 +1,28 @@
+import {ANALYSIS_MODULE, MOCK} from "./_prefix";
+import {axios} from '../utils/request'
+
+/**
+ *  添加配置信息 POST
+ * @param {*} payload
+ * @returns
+ */
+export const visualize = async payload => {
+    const { userId, configId, func} = payload;
+    // return await axios.post(`${MOCK}`, {
+    return await axios.post(`${MOCK}/analysis/visualize/:configId`, {
+        userId, configId, func
+    }).then(res => {
+        return res;
+    });
+}
+
+/**
+ * 获取一个配置下的所有分析结果 GET
+ * @param userId
+ * @returns
+ */
+export const getAnalysisByConfig = async configId => {
+    // const res = await axios.get(`${MODEL_MODULE}/get/all`, {params: {userId: userId}})
+    const res = await axios.get(`${MOCK}/analysis/visualize/{configId}`)
+    return res
+}

src/router/index.js

@@ -114,6 +114,14 @@ const routes = [
                 },
                 component: () => import ( /* webpackChunkName: "charts" */ "../views/analysis/Analysis.vue")
             },
+            {
+                path: "/analysisHistory",
+                name: "analysisHistory",
+                meta: {
+                    title: '数据分析结果'
+                },
+                component: () => import ( /* webpackChunkName: "charts" */ "../views/analysis/AnalysisHistory.vue")
+            },
             {
                 path: "/analysisPipeline",
                 name: "analysisPipeline",

src/views/analysis/Analysis.vue

@@ -16,25 +16,58 @@
       <el-table-column prop="configName" label="配置名"></el-table-column>
       <el-table-column prop="fileId" label="文件id"></el-table-column>
       <el-table-column label="查看历史分析">
+        <template #default="scope">
           <el-button type="text" icon="el-icon-circle-check" class="yellow"
-                     @click="handleTrainRes(scope.$index, scope.row)">查看分析结果</el-button>
+                     @click="handleAnalysisResult(scope.row.id)">查看分析结果</el-button>
+        </template>
       </el-table-column>
 
       <el-table-column label="操作" width="180" align="center">
         <template #default="scope">
-
           <el-button type="text" icon="el-icon-mouse"
-                     @click="editUseModel(scope.$index, scope.row)">分析
+                     @click="startAnalysis(scope.$index)">分析
           </el-button>
-
           <el-button type="text" icon="el-icon-delete" class="red"
-                     @click="handleDelete(scope.row.id)"
-          >删除</el-button>
-
+                     @click="handleDelete(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
+
     </el-table>
 
+    <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-option key="1" label="数据分布" value="1"></el-option>
+            <el-option key="2" label="散点图" value="2"></el-option>
+            <el-option key="3" label="数据统计" value="3"></el-option>
+            <el-option key="4" label="偏度-峰度" value="4"></el-option>
+            <el-option key="5" label="皮尔森相关系数" value="5"></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-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>
+                </span>
+      </template>
+    </el-dialog>
+
 
   </div>
 
@@ -45,18 +78,42 @@
 import {ref} from "vue";
 import {deleteAnalysisConfig, getAnalysisConfig} from "../../api/analysisConfig";
 import {ElMessage, ElMessageBox} from "element-plus";
+import {visualize} from "../../api/analysis";
+import {train} from "../../api/model";
+import {useRouter} from "vue-router";
 
 export default {
   name: "Analysis",
   setup(){
     const tableData = ref([]);
     const pageTotal = ref(0);
+    let analysisVisible = ref(false);
+    let selectConfigLen = ref();
+    let selectConfigId = ref();
+    let analysisType = ref();
+    let selectConfigCol = ref([]);
+    let methodMsg=ref("不同方法仅适用于特定特征字段");
+    const router = useRouter();
+
+    const changeMethodMsg=()=>{
+      let value = analysisType.value;
+      if(value==='1'){
+        methodMsg.value="数据分布无特殊限制"
+      }else if(value==='2'){
+        methodMsg.value="散点图可以传入2-3个int/double字段"
+      }else if(value==='3'){
+        methodMsg.value="请传入1个int/double字段"
+      }else if(value==='4'){
+        methodMsg.value="请传入1个int/double字段"
+      }else if(value==='5'){
+        methodMsg.value="请传入2个int/double字段"
+      }
+    }
 
     const getPage=()=> {
       getAnalysisConfig({
         uid: 1
       }).then(res => {
-        console.log("res",res);
         tableData.value = res.result.configVOList;
       })
     };
@@ -77,13 +134,87 @@ export default {
             });
           })
           .catch(() => {});
+    };
+
+    const handleAnalysisResult = (configId) => {
+      router.push({
+        path:'analysisHistory',
+        query:{
+          configId: configId,
+        }
+      })
+    };
+
+    const startAnalysis = (index) => {
+      selectConfigId = tableData.value[index].id;
+      selectConfigLen.value = tableData.value[index].chosenColumn.length;
+      selectConfigCol.value = tableData.value[index].chosenColumn;
+      analysisVisible.value = true;
+    };
+
+    const analysis = () => {
+      const payload={
+        userId: 1,
+        configId: selectConfigId,
+        func: analysisType.value,
+      }
+      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.code);
+                  done()
+                }
+              }).catch(err=>{
+                console.log(err)
+              });
+            } else {
+              done()
+            }
+          },
+        })
+      }
+      else {
+        alert("请选择数据分析方法！");
+        return;
+      }
     }
 
     return{
       tableData,
       pageTotal,
+      analysisVisible,
+      selectConfigLen,
+      analysisType,
+      selectConfigCol,
+      methodMsg,
+      selectConfigId,
+      router,
       getPage,
       handleDelete,
+      handleAnalysisResult,
+      startAnalysis,
+      analysis,
+      changeMethodMsg,
     };
   }
 }

src/views/analysis/AnalysisHistory.vue

@@ -0,0 +1,103 @@
+<template>
+<div>
+  <div class="crumbs">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>
+        <i class="el-icon-lx-cascades"></i> 分析结果
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+  <div class="container">
+    <el-table
+        :data="tableData" border class="table" ref="multipleTable"
+        header-cell-class-name="table-header"
+    >
+      <el-table-column prop="analysisConfigId" label="配置id"></el-table-column>
+      <el-table-column label="分析方法">
+        <template #default="scope">{{ scope.row.analysisFunction }}</template>
+      </el-table-column>
+      <el-table-column prop="result" label="结果"></el-table-column>
+      <el-table-column label="操作" width="180" align="center">
+        <template #default="scope">
+            <el-button type="text" icon="el-icon-view" >可视化
+            </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+
+</div>
+</template>
+
+<script>
+import {useRoute} from "vue-router";
+import {getFileDetail} from "../../api/file";
+import {ref} from "vue";
+import {getAnalysisByConfig} from "../../api/analysis";
+
+export default {
+  name: "AnalysisHistory",
+  setup(){
+    const tableData = ref([]);
+    const configId = ref();
+
+
+    const getData = () => {
+      const route=useRoute()
+      if(route.query.configId!=null) {
+        getAnalysisByConfig(route.query.configId).then(res => {
+          tableData.value = res.result.visualizationVOList;
+          for (let i=0;i<tableData.value.length;i++){
+            tableData.value[i].result=JSON.stringify(tableData.value[i].analysisResult)
+          }
+          configId.value=route.query.configId
+        })
+      }
+    };
+    getData();
+
+    return{
+      tableData,
+      getData,
+    };
+  }
+}
+</script>
+
+<style scoped>
+.handle-box {
+  margin-bottom: 20px;
+}
+
+.handle-select {
+  width: 120px;
+}
+
+.handle-input {
+  width: 300px;
+  display: inline-block;
+}
+.table {
+  width: 100%;
+  font-size: 14px;
+}
+.red {
+  color: #ff0000;
+}
+.green {
+  color: rgb(32, 220, 88)
+}
+.yellow{
+  color:yellowgreen;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.table-td-thumb {
+  display: block;
+  margin: auto;
+  width: 40px;
+  height: 40px;
+}
+</style>

src/views/file/FileDetail.vue

@@ -11,11 +11,11 @@
       <div class="handle-box">
         <el-button plain icon="el-icon-lx-file" @click="handleFileSelect" >选择文件</el-button>
 
-        <el-button type="success" icon="el-icon-search" @click="handleAnalysis">统计分析配置</el-button>
+        <el-button type="success" icon="el-icon-plus" @click="handleAnalysis">统计分析配置</el-button>
 
         <el-button type="primary" icon="el-icon-plus" @click="createConfig">AI模型配置</el-button>
 
-        <el-button type="success" icon="el-icon-thumb" @click="getFeature">自动特征选择</el-button>
+        <el-button type="primary" icon="el-icon-thumb" @click="getFeature">自动特征选择</el-button>
 
       </div>