|
|
@@ -2,107 +2,250 @@
|
|
|
<div class="">
|
|
|
<div class="crumbs">
|
|
|
<el-breadcrumb separator="/">
|
|
|
- <el-breadcrumb-item><i class="el-icon-lx-file"></i> 我的模型</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ <i class="el-icon-lx-cascades"></i> 我的模型
|
|
|
+ </el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="container">
|
|
|
- <el-tabs v-model="message">
|
|
|
- <el-tab-pane :label="`我的模型列表`" name="first">
|
|
|
- <el-table :data="state.unread" :show-header="false" style="width: 100%">
|
|
|
- <el-table-column>
|
|
|
- <template #default="scope">
|
|
|
- <span class="message-title">{{scope.row.title}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="date" width="180"></el-table-column>
|
|
|
- <el-table-column width="120">
|
|
|
- <template #default="scope">
|
|
|
- <!----------------------------todo------------------------------->
|
|
|
- <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
|
|
|
- <router-link to="/dashboard">
|
|
|
- <el-button size="small" @click="handleRead(scope.$index)">获取详情</el-button>
|
|
|
-
|
|
|
- </router-link>
|
|
|
- <el-button size="small" @click="handleRead(scope.$index)">删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
-<!-- <div class="handle-row">-->
|
|
|
-<!-- <el-button type="primary">全部标为已读</el-button>-->
|
|
|
-<!-- </div>-->
|
|
|
-
|
|
|
-<!-- <button class="el-button el-button--primary" type="button" data-v-4eda24fc=""><!–v-if–><i class="el-icon-upload"></i><span>上传</span></button>-->
|
|
|
-
|
|
|
-<!-- <router-link to="/config">-->
|
|
|
-<!--<!– <button class="el-button el-button--primary" type="button" data-v-4eda24fc=""><!–v-if–><i class="el-icon-s-home"></i><span>添加模型</span></button>–>-->
|
|
|
-<!-- <el-button type="primary" size="large">配置模型</el-button>-->
|
|
|
-<!-- </router-link>-->
|
|
|
+ <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="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>
|
|
|
+ </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 prop="modelName" label="模型名"></el-table-column>
|
|
|
+ <el-table-column prop="configName" label="配置名"></el-table-column>
|
|
|
+ <el-table-column label="模型类别">
|
|
|
+ <template #default="scope">{{ scope.row.modelTypeName }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="arguments" label="参数值">
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-for="(item,index) in scope.row.arguments" :key="index">{{item}}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="trainedStatus" label="训练状态"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="180" align="center">
|
|
|
+ <template #default="scope">
|
|
|
|
|
|
+ <router-link :to="{path:'/ModelDetail',query:{modelId:scope.row.modelId}}">
|
|
|
+ <el-button type="text" icon="el-icon-view" >查看详情
|
|
|
+ </el-button>
|
|
|
+ </router-link>
|
|
|
+ <el-button type="text" icon="el-icon-delete" class="red"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { ref, reactive } from "vue";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import {getAllModel} from "../api/model";
|
|
|
+
|
|
|
export default {
|
|
|
- name: "tabs",
|
|
|
+ name: "model",
|
|
|
setup() {
|
|
|
- const message = ref("first");
|
|
|
- const state = reactive({
|
|
|
- unread: [
|
|
|
- {
|
|
|
- date: "2018-04-19 20:00:00",
|
|
|
- title: "文件1",
|
|
|
- },
|
|
|
- {
|
|
|
- date: "2018-04-19 21:00:00",
|
|
|
- title: "文件2",
|
|
|
- },
|
|
|
- ],
|
|
|
- read: [
|
|
|
- {
|
|
|
- date: "2018-04-19 20:00:00",
|
|
|
- title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
|
|
|
- },
|
|
|
- ],
|
|
|
- recycle: [
|
|
|
- {
|
|
|
- date: "2018-04-19 20:00:00",
|
|
|
- title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护",
|
|
|
- },
|
|
|
- ],
|
|
|
+ const featureSty = reactive({
|
|
|
+
|
|
|
+ resource: "小天才",
|
|
|
+
|
|
|
+ });
|
|
|
+ const modelSty = reactive({
|
|
|
+
|
|
|
+ resource: "小天才",
|
|
|
+
|
|
|
+ });
|
|
|
+ const query = reactive({
|
|
|
+ file: "",
|
|
|
+ name: "",
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
});
|
|
|
|
|
|
- const handleRead = (index) => {
|
|
|
- const item = state.unread.splice(index, 1);
|
|
|
- console.log(item);
|
|
|
- state.read = item.concat(state.read);
|
|
|
+ const typeList=["所有","分类","聚类","回归","自动分类器"];
|
|
|
+ const featureList=["所有","手动选择","自动选择"];
|
|
|
+ const multipleSelection =ref([]);
|
|
|
+
|
|
|
+ // const tableData = ref([]);
|
|
|
+ const tableData = ref();
|
|
|
+
|
|
|
+ const pageTotal = ref(0);
|
|
|
+ // 获取表格数据
|
|
|
+
|
|
|
+ const getpage=()=> {
|
|
|
+ // console.log("getpage");
|
|
|
+ const uid=1;
|
|
|
+ getAllModel(
|
|
|
+ uid
|
|
|
+ ).then(res => {
|
|
|
+ console.log("res",res);
|
|
|
+ tableData.value = res.data;
|
|
|
+ pageTotal.value=tableData.value.length
|
|
|
+ for(let i=0;i<tableData.value.length;i++) {
|
|
|
+ const reg=new RegExp("\"","g");
|
|
|
+ tableData.value[i].arguments = ((JSON.stringify(tableData.value[i].arguments))+"")
|
|
|
+ .replace(reg,"")
|
|
|
+ .replace("{","")
|
|
|
+ .replace("}","")
|
|
|
+ .split(",");
|
|
|
+ if(tableData.value[i].trainedStatus===1){
|
|
|
+ tableData.value[i].trainedStatus="已训练";
|
|
|
+ }else{
|
|
|
+ tableData.value[i].trainedStatus="未训练";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ };
|
|
|
+ getpage();
|
|
|
+ // 查询操作
|
|
|
+ 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);
|
|
|
+ console.log("删除");
|
|
|
+ let idx=tableData.value[index].id;
|
|
|
+ console.log(idx);
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ };
|
|
|
+
|
|
|
+ //TODO
|
|
|
+ const handleSelectionChange = (val) => {
|
|
|
+ multipleSelection.value = val
|
|
|
};
|
|
|
- const handleDel = (index) => {
|
|
|
- const item = state.read.splice(index, 1);
|
|
|
- state.recycle = item.concat(state.recycle);
|
|
|
+
|
|
|
+ //TODO 批量删除
|
|
|
+ const handleBatchDelete =()=>{
|
|
|
+ // 二次确认
|
|
|
+ if(multipleSelection.value.length<=0){
|
|
|
+ ElMessageBox.alert("请先勾选要删除的模型", '提示', {
|
|
|
+ confirmButtonText: '好的'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ ElMessageBox.confirm("确定要删除这些模型吗？", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let idList=[];
|
|
|
+ for(let i=0;i<multipleSelection.value.length;i++){
|
|
|
+ let id=multipleSelection.value[i]['id'];
|
|
|
+ idList.push(id);
|
|
|
+ }
|
|
|
+ idList.sort();
|
|
|
+ console.log(idList);
|
|
|
+ for (let i = idList[idList.length-1]; i >=0 ; i--) {
|
|
|
+ tableData.value.splice(i,1);
|
|
|
+ }
|
|
|
+ ElMessage.success("删除成功");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
};
|
|
|
- const handleRestore = (index) => {
|
|
|
- const item = state.recycle.splice(index, 1);
|
|
|
- state.read = item.concat(state.read);
|
|
|
+
|
|
|
+ const editVisible = ref(false);
|
|
|
+ let form = reactive({
|
|
|
+ name: "",
|
|
|
+ file: "",
|
|
|
+ // classification:"",
|
|
|
+ // feature:"",
|
|
|
+ });
|
|
|
+ let idx = -1;
|
|
|
+ const handleEdit = (index, row) => {
|
|
|
+ idx = index;
|
|
|
+ Object.keys(form).forEach((item) => {
|
|
|
+ form[item] = row[item];
|
|
|
+ });
|
|
|
+ editVisible.value = true;
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
- message,
|
|
|
- state,
|
|
|
- handleRead,
|
|
|
- handleDel,
|
|
|
- handleRestore,
|
|
|
+ query,
|
|
|
+ tableData,
|
|
|
+ pageTotal,
|
|
|
+ editVisible,
|
|
|
+ form,
|
|
|
+ handleSearch,
|
|
|
+ handlePageChange,
|
|
|
+ handleDelete,
|
|
|
+ handleSelectionChange,
|
|
|
+ handleBatchDelete,
|
|
|
+ handleEdit,
|
|
|
+ featureSty,
|
|
|
+ modelSty,
|
|
|
+ getpage,
|
|
|
};
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-.message-title {
|
|
|
- cursor: pointer;
|
|
|
+<style scoped>
|
|
|
+.handle-box {
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
+.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>
|
