update:文件详情，特征字段配置

src/api/config.js

@@ -30,10 +30,146 @@ export const getAllConfig = payload => {
   // console.log("getAllConfig",payload);
   const {uid} = payload;
 
-  return axios.get(`${CONFIG_MODULE}/get/all/${uid}`).then(res => {
-
-    return res.data;
-  });
+  // return axios.get(`${CONFIG_MODULE}/get/all/${uid}`).then(res => {
+  //
+  //   return res.data;
+  // });
+  return Promise.resolve({
+    "timestamp": 1649419361037,
+    "status": 200,
+    "data": [
+      {
+        "fileId": "1",
+        "fileName": "event_data",
+        "configId": "1",
+        "modelTypeId": "2",
+        "modelTypeName": "决策树",
+        "confName": "config1",
+        "featureList": [
+          {
+            "id": 105,
+            "fileInfoId": 1,
+            "fieldName": "road",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"R\",\"L\"]"
+          },
+          {
+            "id": 106,
+            "fileInfoId": 1,
+            "fieldName": "lane",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"r\",\"m\",\"l\"]"
+          },
+          {
+            "id": 107,
+            "fileInfoId": 1,
+            "fieldName": "vehicle_class",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+          },
+          {
+            "id": 110,
+            "fileInfoId": 1,
+            "fieldName": "duration",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+          },
+          {
+            "id": 109,
+            "fileInfoId": 1,
+            "fieldName": "event_type",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"cruise\",\"overdrive\"]"
+          }
+        ]
+      },
+      {
+        "fileId": "1",
+        "fileName": "event_data",
+        "configId": "3",
+        "modelTypeId": "9",
+        "modelTypeName": "K-均值",
+        "confName": "Kmeans-Test",
+        "featureList": [
+          {
+            "id": 105,
+            "fileInfoId": 1,
+            "fieldName": "road",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"R\",\"L\"]"
+          },
+          {
+            "id": 106,
+            "fileInfoId": 1,
+            "fieldName": "lane",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"r\",\"m\",\"l\"]"
+          },
+          {
+            "id": 107,
+            "fileInfoId": 1,
+            "fieldName": "vehicle_class",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+          },
+          {
+            "id": 110,
+            "fileInfoId": 1,
+            "fieldName": "duration",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+          },
+          {
+            "id": 109,
+            "fileInfoId": 1,
+            "fieldName": "event_type",
+            "aliasName": "",
+            "fieldDes": "",
+            "nullsRatio": 0.0,
+            "conOrDis": 0,
+            "fieldType": "string",
+            "valueInfo": "[\"cruise\",\"overdrive\"]"
+          }
+        ]
+      }
+    ]
+  })
 }
 
 //   console.log("uid",uid);

src/api/file.js

@@ -25,9 +25,20 @@ export const UploadFile = payload => {
 export const GetAllFile = payload => {
     console.log(payload);
     const {userId} = payload;
-    return axios.get(`${FILE_MODULE}/get/all`, {params:{userId:userId}}).then(res => {
-        return res.data;
-    });
+    // return axios.get(`${FILE_MODULE}/get/all`, {params:{userId:userId}}).then(res => {
+    //     return res.data;
+    // });
+
+    return Promise.resolve({
+        "timestamp": 1649397417317,
+        "status": 200,
+        "data": [
+            {
+                "fileId": "1",
+                "fileName": "event_data"
+            }
+        ]
+    })
 }
 
 /**
@@ -35,12 +46,113 @@ export const GetAllFile = payload => {
  * @param {*} payload
  * @returns
  */
-export const GetAllFile = payload => {
-    console.log(payload);
-    const {fileId} = payload;
-    return axios.get(`${FILE_MODULE}/get/detail`, {params:{fileId:fileId}}).then(res => {
-        return res.data;
-    });
+export const getFileDetail = payload => {
+    // console.log(payload);
+    // const {fileId} = payload;
+    // return axios.get(`${FILE_MODULE}/get/detail`, {params:{fileId:fileId}}).then(res => {
+    //     return res.data;
+    // });
+    return Promise.resolve({
+        "timestamp": 1649398931190,
+        "status": 200,
+        "data": {
+            "fileName": "event_data",
+            "createTime": "2022-03-29T09:25:43.154+00:00",
+            "fileStrucInfo": {
+                "totalRows": "754"
+            },
+            "headerInfos": [
+                {
+                    "id": 103,
+                    "fileInfoId": 1,
+                    "fieldName": "frame_index",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "int",
+                    "valueInfo": "[\"79\",\"89992\"]"
+                },
+                {
+                    "id": 104,
+                    "fileInfoId": 1,
+                    "fieldName": "time",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "double",
+                    "valueInfo": "[\"3.16\",\"3599.68\"]"
+                },
+                {
+                    "id": 105,
+                    "fileInfoId": 1,
+                    "fieldName": "road",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"R\",\"L\"]"
+                },
+                {
+                    "id": 106,
+                    "fileInfoId": 1,
+                    "fieldName": "lane",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"r\",\"m\",\"l\"]"
+                },
+                {
+                    "id": 107,
+                    "fileInfoId": 1,
+                    "fieldName": "vehicle_class",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"car\",\"truck\",\"bus\"]"
+                },
+                {
+                    "id": 108,
+                    "fileInfoId": 1,
+                    "fieldName": "vehicle_id",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 1,
+                    "fieldType": "int",
+                    "valueInfo": "[\"20\",\"46862\"]"
+                },
+                {
+                    "id": 109,
+                    "fileInfoId": 1,
+                    "fieldName": "event_type",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"cruise\",\"overdrive\"]"
+                },
+                {
+                    "id": 110,
+                    "fileInfoId": 1,
+                    "fieldName": "duration",
+                    "aliasName": "",
+                    "fieldDes": "",
+                    "nullsRatio": 0.0,
+                    "conOrDis": 0,
+                    "fieldType": "string",
+                    "valueInfo": "[\"48,60\",\"24,36\",\"36,48\",\"12,24\",\"0,12\"]"
+                }
+            ]
+        }
+    })
 }
 
 /**
@@ -48,7 +160,7 @@ export const GetAllFile = payload => {
  * @param {*} payload
  * @returns
  */
-export const GetAllFile = payload => {
+export const deleteFile = payload => {
     console.log(payload);
     const {fileId} = payload;
     return axios.get(`${FILE_MODULE}/delete`, {params:{fileId:fileId}}).then(res => {

src/components/Sidebar.vue

@@ -48,7 +48,7 @@ export default {
                 title: "我的文件"
               },
               {
-                index: "/dashboard",
+                index: "/fileDetail",
                 title: "文件详情",
               },
               {

src/router/index.js

@@ -4,7 +4,7 @@ import Home from "../views/Home.vue";
 const routes = [
     {
         path: '/',
-        redirect: '/dashboard'
+        redirect: '/fileList'
     }, {
         path: "/",
         name: "Home",
@@ -27,12 +27,12 @@ const routes = [
                 component: () => import ( /* webpackChunkName: "dashboard" */ "../views/modelList.vue")
             },
             {
-                path: "/dashboard",
-                name: "dashboard",
+                path: "/fileDetail",
+                name: "fileDetail",
                 meta: {
                     title: '首页'
                 },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/Dashboard.vue")
+                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/FileDetail.vue")
             }, {
                 path: "/config",
                 name: "config",

src/views/Config.vue

@@ -12,34 +12,39 @@
             <div class="handle-box">
                 <el-select v-model="query.file" placeholder="模型类别" class="handle-select mr10">
                     <el-option key="0" label="所有" value="0"></el-option>
-                    <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="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-option key="6" label="朴素贝叶斯" value="6"></el-option>
+                  <el-option key="7" label="随机森林回归" value="7"></el-option>
+                  <el-option key="8" label="K-均值" value="8"></el-option>
                 </el-select>
                 <el-input v-model="query.name" placeholder="配置名" class="handle-input mr10"></el-input>
                 <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
-              <router-link to="modelList">
-              <el-button type="success" icon="el-icon-plus"  style="position: absolute;right: 25em">所有配置</el-button>
-              </router-link>
-                <el-button type="success" icon="el-icon-plus" @click="handleEdit(tableData.length,0)" style="position: absolute;right: 15em">添加配置</el-button>
-                <el-button type="danger" icon="el-icon-minus" @click="handleBatchDelete" style="position: absolute;right: 5em">批量删除</el-button>
+<!--              <router-link to="modelList">-->
+<!--              <el-button type="success" icon="el-icon-plus"  style="position: absolute;right: 25em">所有配置</el-button>-->
+<!--              </router-link>-->
+<!--                <el-button type="success" icon="el-icon-plus" @click="handleEdit(tableData.length,0)" style="position: absolute;right: 15em">添加配置</el-button>-->
+<!--                <el-button type="danger" icon="el-icon-minus" @click="handleBatchDelete" style="position: absolute;right: 5em">批量删除</el-button>-->
+<!--            </div>-->
             </div>
-
             <el-table
                 :data="tableData" border class="table" ref="multipleTable"
                 header-cell-class-name="table-header"
                 @selection-change="handleSelectionChange"
+                @row-dblclick="getConfigDetail"
             >
                 <el-table-column width="50" type="selection"></el-table-column>
-                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
-                <el-table-column prop="name" label="配置名"></el-table-column>
+                <el-table-column prop="confName" label="配置名"></el-table-column>
                 <el-table-column label="模型类别">
-                    <template #default="scope">{{ scope.row.type }}</template>
-                </el-table-column>
-                <el-table-column label="特征字段">
-                    <template #default="scope">{{ scope.row.feature }}</template>
+                    <template #default="scope">{{ scope.row.modelTypeName }}</template>
                 </el-table-column>
+              <el-table-column prop="fileName" label="文件名"></el-table-column>
+<!--                <el-table-column label="特征字段">-->
+<!--                    <template #default="scope">{{ scope.row.feature }}</template>-->
+<!--                </el-table-column>-->
 <!--                <el-table-column label="头像(查看大图)" align="center">-->
 <!--                    <template #default="scope">-->
 <!--                        <el-image class="table-td-thumb" :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]">-->
@@ -59,18 +64,18 @@
 <!--                    </template>-->
 <!--                </el-table-column>-->
 
-                <el-table-column prop="date" label="创建时间"></el-table-column>
+
                 <el-table-column label="操作" width="180" align="center">
                     <template #default="scope">
 <!--                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑-->
 <!--                        </el-button>-->
 <!--                      <router-link :to="`/configformpf/${scope.$index}`">-->
-                      <router-link :to="`/configformp/${scope.row.id}`">
+<!--                      <router-link :to="`/configformp/${scope.row.configId}`">-->
 <!--                      :to="{path:'/news/detail',query:{id:1}}"-->
 <!--                      <router-link :to="{path:'/configform',query:{id:scope.row.id}}">-->
-                        <el-button type="text" icon="el-icon-edit">编辑
+                        <el-button type="text" icon="el-icon-edit" >查看详情
                         </el-button>
-                      </router-link>
+<!--                      </router-link>-->
                         <el-button type="text" icon="el-icon-delete" class="red"
                             @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                     </template>
@@ -206,10 +211,11 @@ export default {
         uid: 1
       }).then(res => {
         console.log("res",res);
-        tableData.value = res;
+        tableData.value = res.data;
+
       })
     };
-    // getpage();
+     getpage();
 
 
 
@@ -280,7 +286,11 @@ export default {
           }
         };
 
-
+        const getConfigDetail=(row,column,event)=>{
+          var configId=row.configId;
+          //todo:双击跳转到config界面
+          console.log("跳转到config详情界面")
+        }
         // 表格编辑时弹窗和保存
         const editVisible = ref(false);
         let form = reactive({
@@ -331,6 +341,7 @@ export default {
             handleBatchDelete,
             handleEdit,
             saveEdit,
+          getConfigDetail,
             featureSty,
           modelSty,
           getpage,

src/views/ConfigForm.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="crumbs">
       <el-breadcrumb separator="/">
+
         <el-breadcrumb-item>
           <i class="el-icon-lx-calendar"></i> 模型配置
         </el-breadcrumb-item>

src/views/Dashboard.vue → src/views/FileDetail.vue

@@ -18,32 +18,30 @@
 
       </div>
 
-      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
-        <el-table-column width="50" type="selection"></el-table-column>
-        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
+      <el-table :data="tableData" border class="table" ref="fieldTable" header-cell-class-name="table-header" @selection-change="handleSelectChange">
+        <el-table-column width="50" type="selection" ></el-table-column>
         <el-table-column label="字段名">
-          <template #default="scope">{{ scope.row.fieldname }}</template>
+          <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
         </el-table-column>
         <el-table-column label="别名">
-          <template #default="scope">{{ scope.row.alias }}</template>
+          <template #default="scope">{{ scope.row.aliasName }}</template>
         </el-table-column>
         <el-table-column label="描述">
-          <template #default="scope">{{ scope.row.desc }}</template>
+          <template #default="scope">{{ scope.row.fieldDes }}</template>
         </el-table-column>
         <el-table-column label="取值类型">
-          <template #default="scope">{{ scope.row.num }}</template>
+          <template #default="scope">{{ scope.row.fieldType }}</template>
         </el-table-column>
         <el-table-column label="分布类型">
-          <template #default="scope">{{ scope.row.distribution }}</template>
+          <template #default="scope">{{ scope.row.conOrDis }}</template>
         </el-table-column>
         <el-table-column label="空值率">
-          <template #default="scope">{{ scope.row.null }}</template>
+          <template #default="scope">{{ scope.row.nullsRatio }}</template>
         </el-table-column>
 
         <el-table-column label="值域" >
-          <template #default="scope">{{ scope.row.num }}</template>
+          <template #default="scope">{{ scope.row.valueInfo }}</template>
         </el-table-column>
-        <el-table-column  label="创建时间"></el-table-column>
       </el-table>
       <div class="pagination">
         <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
@@ -78,10 +76,24 @@
           <el-input v-model="form.name"></el-input>
         </el-form-item>
         <el-form-item label="模型类别" required>
-          <el-input v-model="form.address"></el-input>
+          <el-select v-model="form.type" placeholder="模型类别" class="handle-select mr10" >
+            <el-option key="0" label="所有" value="0"></el-option>
+            <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-option key="6" label="朴素贝叶斯" value="6"></el-option>
+            <el-option key="7" label="随机森林回归" value="7"></el-option>
+            <el-option key="8" label="K-均值" value="8"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="已选择字段" required>
-
+          <el-table :data="selectData" border class="table"  header-cell-class-name="table-header" >
+            <el-table-column label="字段名">
+              <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
+            </el-table-column>
+          </el-table>
         </el-form-item>
 
       </el-form>
@@ -96,9 +108,11 @@
 </template>
 
 <script>
-import { ref, reactive } from "vue";
+import {ref, reactive, getCurrentInstance, onMounted} from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchData } from "../api/index";
+import {getFileDetail} from "../api/file";
+import {useRoute}from "vue-router";
 export default {
   name: "config",
   //训练特征
@@ -122,15 +136,26 @@ export default {
 
 
     const tableData = ref([]);
+    const selectData = ref([]);
     const pageTotal = ref(0);
     // 获取表格数据
     const getData = () => {
-      // fetchData(query).then((res) => {
-      //   tableData.value = res.list;
-      //   pageTotal.value = res.pageTotal || 50;
-      // });
-
+      const route=useRoute()
       //todo:调用获取文件具体信息获取字段列表
+      if(route.query.fileId!=null) {
+        getFileDetail(route.query.fileId).then(res => {
+          tableData.value = res.data.headerInfos;
+          for (var i = 0; i < tableData.value.length; i++) {
+            if (tableData.value[i].conOrDis === 1) {
+              tableData.value[i].conOrDis = "连续值"
+            } else {
+              tableData.value[i].conOrDis = "离散值"
+            }
+          }
+          //console.log(tableData)
+          console.log(route.query.fileId)
+        })
+      }
 
     };
     getData();
@@ -163,7 +188,7 @@ export default {
     const editVisible = ref(false);
     let form = reactive({
       name: "",
-      address: "",
+      type: "",
       // classification:"",
       // feature:"",
     });
@@ -173,8 +198,15 @@ export default {
     };
 
     const configCreate = ref(false);
-    const createConfig = () =>{
-      configCreate.value=true;
+    const createConfig =() => {
+      const fieldTable = ref(null)
+      //console.log(fieldTable)
+      console.log(selectData.value)
+       onMounted(() => {
+        console.log(fieldTable.value.selection)
+      })
+
+      configCreate.value = true;
     };
     const saveEdit = () => {
       editVisible.value = false;
@@ -192,6 +224,9 @@ export default {
       //todo: 调用Config相关接口
 
     };
+    const handleSelectChange=val=>{
+      selectData.value=val;
+    }
 
     return {
       query,
@@ -200,6 +235,8 @@ export default {
       editVisible,
       form,
       configCreate,
+      selectData,
+      handleSelectChange,
       handleSearch,
       handlePageChange,
       handleDelete,
@@ -209,6 +246,8 @@ export default {
     };
   },
 };
+
+
 </script>
 
 <style scoped>

src/views/FileList.vue

@@ -47,10 +47,9 @@
               <template #default="scope">
                 <!----------------------------todo------------------------------->
                 <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
-                <!--<router-link :to="{path:'/dashboard',query:{id:scope.row.fileId}}">-->
-                <router-link to="/dashboard">
-                <el-button size="small" @click="handleFileGet(scope.$index)">获取详情</el-button>
-
+                <router-link :to="{path:'/fileDetail',query:{fileId:scope.row.fileId}}">
+                <!--<router-link to="/dashboard">-->
+                <el-button size="small" @click="handleFileGet(scope.row.fileId)">获取详情</el-button>
                 </router-link>
                 <el-button size="small" @click="handleFileDel(scope.$index)">删除文件</el-button>
               </template>
@@ -96,6 +95,9 @@
 
 <script>
 import {ref, reactive, onMounted} from "vue";
+import{GetAllFile,getFileDetail} from "../api/file";
+import router from "../router";
+
 export default {
   name: "tabs",
   setup() {
@@ -142,6 +144,9 @@ export default {
     // };
     let getFileList=(userId)=>{
       //todo: 调用getall接口，将数据复制给fileList
+    GetAllFile(userId).then(res=>{
+      state.fileList=res.data;
+    })
     };
     getFileList(userId);
     const handleFileDel = (index) => {
@@ -157,6 +162,12 @@ export default {
     const handleFileGet=(index)=>{
       console.log("handleFileGet")
       console.log(index)
+      // this.router.push({
+      //     path:'fileDetail',
+      //   query:{
+      //     fileId:index
+      //   }
+      // })
 
       //todo:吧要查看的文件id传参
     }