|
|
@@ -0,0 +1,333 @@
|
|
|
+<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="handle-box">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+<!-- <el-tab-pane :label="featureList"> </el-tab-pane>-->
|
|
|
+ <div class="container">
|
|
|
+ <div class="form-box" >
|
|
|
+ <el-form ref="formRef" label-width="120px">
|
|
|
+ <el-form-item label="模型类型名：" >
|
|
|
+ {{config.modelTypeName}}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模型描述：" >
|
|
|
+ {{config.modelDes}}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模型详情：" >
|
|
|
+ {{}}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="特征字段:" >
|
|
|
+ <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"><span>{{ scope.row.fieldName }}</span></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="别名">
|
|
|
+ <template #default="scope">{{ scope.row.aliasName }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="描述">
|
|
|
+ <template #default="scope">{{ scope.row.fieldDes }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="取值类型">
|
|
|
+ <template #default="scope">{{ scope.row.fieldType }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分布类型">
|
|
|
+ <template #default="scope">{{ scope.row.conOrDis }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="空值率">
|
|
|
+ <template #default="scope">{{ scope.row.nullsRatio }}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="值域" >
|
|
|
+ <template #default="scope">{{ scope.row.valueInfo }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="模型列表:" >
|
|
|
+ <el-table :data="modelData" 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"><span>{{ scope.row.modelName }}</span></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="详情">
|
|
|
+ <template #default="scope">{{ scope.row.modelDetailName }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="训练状态">
|
|
|
+ <template #default="scope">{{ scope.row.trainedStatus}}</template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+<!-- <div class="pagination">-->
|
|
|
+<!-- <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"-->
|
|
|
+<!-- :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>-->
|
|
|
+<!-- </div>-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 编辑弹出框 -->
|
|
|
+ <el-dialog title="选择字段" v-model="editVisible" width="30%">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item label="统计分析" required>
|
|
|
+ <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-form-item>
|
|
|
+ <el-form-item label="可选择字段" required>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="editVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveEdit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="新建配置" v-model="configCreate" width="30%">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item label="配置名" required>
|
|
|
+ <el-input v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模型类别" required>
|
|
|
+ <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>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="editVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveConfig">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {ref, reactive, getCurrentInstance, onMounted} from "vue";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import { fetchData } from "../api/index";
|
|
|
+import {getFileDetail} from "../api/file";
|
|
|
+import {getOneConfig} from "../api/config";
|
|
|
+import {useRoute}from "vue-router";
|
|
|
+export default {
|
|
|
+ name: "configDetail",
|
|
|
+ //训练特征
|
|
|
+ setup() {
|
|
|
+ const query = reactive({
|
|
|
+ address: "",
|
|
|
+ name: "",
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ });
|
|
|
+ const fileId=1;
|
|
|
+ //new TODO
|
|
|
+ //TODO
|
|
|
+ const fieldNameList=[]; //字段名
|
|
|
+ const aliasList=[]; //别名
|
|
|
+ const descList=[]; //描述
|
|
|
+ const aList=[]; //取值类型
|
|
|
+ const bList=[]; //分布类型
|
|
|
+ const cList=[]; //空值率
|
|
|
+ const dList=[];
|
|
|
+
|
|
|
+
|
|
|
+ const tableData = ref([]);
|
|
|
+ const selectData = ref([]);
|
|
|
+ const pageTotal = ref(0);
|
|
|
+
|
|
|
+ const modelData=ref([]);
|
|
|
+ const config=ref([]);
|
|
|
+ // 获取表格数据
|
|
|
+ const getData = () => {
|
|
|
+ const route=useRoute()
|
|
|
+ //todo:调用获取文件具体信息获取字段列表
|
|
|
+ // console.log("queryId",route.query.configId);
|
|
|
+ if(route.query.configId!=null) {
|
|
|
+ getOneConfig(route.query.configId).then(res => {
|
|
|
+ // console.log("configdetail",res);
|
|
|
+ config.value=res.data;
|
|
|
+ console.log("config",config);
|
|
|
+ tableData.value = res.data.featureList;
|
|
|
+ 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)
|
|
|
+
|
|
|
+ modelData.value=res.data.modelInfos;
|
|
|
+ console.log("tableData",tableData);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ };
|
|
|
+ getData();
|
|
|
+
|
|
|
+ // 查询操作
|
|
|
+ const handleSearch = () => {
|
|
|
+ query.pageIndex = 1;
|
|
|
+ getData();
|
|
|
+ };
|
|
|
+ // 分页导航
|
|
|
+ const handlePageChange = (val) => {
|
|
|
+ query.pageIndex = val;
|
|
|
+ getData();
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除操作
|
|
|
+ const handleDelete = (index) => {
|
|
|
+ // 二次确认删除
|
|
|
+ ElMessageBox.confirm("确定要删除吗？", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ ElMessage.success("删除成功");
|
|
|
+ tableData.value.splice(index, 1);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ };
|
|
|
+
|
|
|
+ // 表格编辑时弹窗和保存
|
|
|
+ const editVisible = ref(false);
|
|
|
+ let form = reactive({
|
|
|
+ name: "",
|
|
|
+ type: "",
|
|
|
+ // classification:"",
|
|
|
+ // feature:"",
|
|
|
+ });
|
|
|
+ let idx = -1;
|
|
|
+ const handleEdit = () => {
|
|
|
+ editVisible.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const configCreate = ref(false);
|
|
|
+ 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;
|
|
|
+ //todo: 数理分析相关
|
|
|
+
|
|
|
+
|
|
|
+ // ElMessage.success(`修改第 ${idx + 1} 行成功`);
|
|
|
+ // Object.keys(form).forEach((item) => {
|
|
|
+ // tableData.value[idx][item] = form[item];
|
|
|
+ // });
|
|
|
+ };
|
|
|
+ const saveConfig = () => {
|
|
|
+ editVisible.value = false;
|
|
|
+ ElMessage.success(`已成功生成配置`);
|
|
|
+ //todo: 调用Config相关接口
|
|
|
+
|
|
|
+ };
|
|
|
+ const handleSelectChange=val=>{
|
|
|
+ selectData.value=val;
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ config,
|
|
|
+ query,
|
|
|
+ tableData,
|
|
|
+ pageTotal,
|
|
|
+ modelData,
|
|
|
+ editVisible,
|
|
|
+ form,
|
|
|
+ configCreate,
|
|
|
+ selectData,
|
|
|
+ handleSelectChange,
|
|
|
+ handleSearch,
|
|
|
+ handlePageChange,
|
|
|
+ handleDelete,
|
|
|
+ handleEdit,
|
|
|
+ saveEdit,
|
|
|
+ createConfig
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.handle-box {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.handle-table{
|
|
|
+ margin-bottem: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.handle-select {
|
|
|
+ width: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.handle-input {
|
|
|
+ width: 300px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.table {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.red {
|
|
|
+ color: #ff0000;
|
|
|
+}
|
|
|
+.mr10 {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.table-td-thumb {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+</style>
|
191250061