|
|
@@ -0,0 +1,516 @@
|
|
|
+<template>
|
|
|
+ <el-container style="height:100%; background: url(src/assets/img/earth.jpg)" direction="vertical">
|
|
|
+ <v-header style="height: 70px" @getCollection="getCollection()" @getMine="getMine()"></v-header>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <div class="el-menu-demo" >
|
|
|
+ <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
|
|
|
+ background-color="transparent" text-color="#fff" active-text-color="#ffd04b">
|
|
|
+ <el-menu-item index="1">数据</el-menu-item>
|
|
|
+ <el-menu-item index="2">模型</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid-content">
|
|
|
+ <el-input placeholder="请输入内容" v-model="input" class="searchClass">
|
|
|
+ <template #append>
|
|
|
+ <el-button icon="el-icon-search" @click="handleSearch"/>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="postList">
|
|
|
+ <div style="" v-for="(post, index) in postList" :key="post.postId"
|
|
|
+ v-show="index >= (currentPage-1)*8 && index < currentPage*4">
|
|
|
+ <el-card shadow="hover"
|
|
|
+ style="height: 120px; margin-bottom: 10px; border-radius: 10px; background-color: #262626">
|
|
|
+ <div class="taskTitle">
|
|
|
+ <span style="font-size: 18px; font-weight: bold;color: #eeeeee">{{ post.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="desciption">
|
|
|
+ <div class="ellipsis-line" style="font-size: 14px; width: 800px; float: left; color: #dbd0d0; margin-top: 10px">
|
|
|
+ {{ post.content }}
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 5px; width: 150px; float: left; color: #dbd0d0; margin-top: 10px">
|
|
|
+ <i class="el-icon-thumb" style="color: white ;"></i>
|
|
|
+ {{ post.praise }}
|
|
|
+ <i class="el-icon-chat-line-round" style="color: white"></i>
|
|
|
+ {{ post.comment_num }}
|
|
|
+ <i class="el-icon-time" style="color: white ;"></i>
|
|
|
+ {{ post.updateTime }}
|
|
|
+ </div>
|
|
|
+ <el-button style="float: right;" size="small" type="warning" @click="handlePostDetail(post.postId)"
|
|
|
+ round>查看详情
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="pages"
|
|
|
+ style="float: right; margin-top: 10px; padding-bottom: 20px;"
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ background>
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ </el-container>
|
|
|
+ <el-dialog :title="title" v-model="collectionDetailVisble" min-width="30%" width="66%" style="">
|
|
|
+ <span style="font-size: 18px; font-weight: bold;color: black;">{{ currentPost.content }}</span>
|
|
|
+ <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="">
|
|
|
+ <el-table-column label="字段名" width="120%">
|
|
|
+ <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="值域" width="150%">
|
|
|
+ <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="">
|
|
|
+ <el-table-column label="模型名" width="150%">
|
|
|
+ <template #default="scope"><span>{{ scope.row.modelName }}</span></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="模型类别" width="150%">
|
|
|
+ <template #default="scope">{{ scope.row.modelDetailName }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="训练结果">
|
|
|
+ <template #default="scope" >
|
|
|
+ <div v-if="scope.row.trainedStatus===-1">accuracy：0.87</div>
|
|
|
+ <div v-else="">已训练</div></template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="">添加到我的配置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-collapse >
|
|
|
+ <el-collapse-item name="1" title="评论">
|
|
|
+ <div style="margin-top: 20px;border:2px solid #a6a9ad;box-shadow: 0 0 5px rgba(0,0,0,.1);padding: 5px;">
|
|
|
+ <v-write-comment :width="500" :post-id="currentPost.postId" style="margin-left: 250px" >
|
|
|
+ </v-write-comment>
|
|
|
+ <v-comments :comment-list="commentList" :width="800" style="margin-top: 5px;margin-left: 160px"></v-comments>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="写信给作者————更加快捷" name="2">
|
|
|
+ <div style="width: 600px;margin-left: 250px">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ autosize
|
|
|
+ placeholder="标题"
|
|
|
+ v-model="mailTitle">
|
|
|
+ </el-input>
|
|
|
+ <div style="margin: 20px 0;"></div>
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 3, maxRows: 5}"
|
|
|
+ placeholder="正文"
|
|
|
+ v-model="mailContent">
|
|
|
+ </el-input>
|
|
|
+ <el-button type="danger" icon="el-icon-message" big circle style="margin-left: 600px;" @click="sendMailTo()"></el-button>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="detailVisble = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveEdit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :title="title" v-model=" squareDetailVisble" min-width="30%" width="66%" style="">
|
|
|
+ <span style="font-size: 18px; font-weight: bold;color: black;">{{ currentPost.content }}</span>
|
|
|
+ <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="">
|
|
|
+ <el-table-column label="字段名" width="120%">
|
|
|
+ <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="值域" width="150%">
|
|
|
+ <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="">
|
|
|
+ <el-table-column label="模型名" width="150%">
|
|
|
+ <template #default="scope"><span>{{ scope.row.modelName }}</span></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="模型类别" width="150%">
|
|
|
+ <template #default="scope">{{ scope.row.modelDetailName }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="训练结果">
|
|
|
+ <template #default="scope" >
|
|
|
+ <div v-if="scope.row.trainedStatus===-1">accuracy：0.87</div>
|
|
|
+ <div v-else="">已训练</div></template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <v-comments :comment-list="commentList" :width="800" style="margin-top: 20px;border:2px solid #a6a9ad;box-shadow: 0 0 5px rgba(0,0,0,.1);padding: 5px;"></v-comments>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="detailVisble = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="collect(currentPost.postId)">收藏</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import vHeader from "../components/SquareHeader.vue";
|
|
|
+ import {searchPost, getPostByPostId, getUserCollection, getUserPost,collection} from "../api/posts";
|
|
|
+ import {getComment} from "../api/comment";
|
|
|
+ import {sendMail} from "../api/mail";
|
|
|
+ import {ref, reactive} from "vue";
|
|
|
+ import {getFileDetail} from "../api/file";
|
|
|
+ import vComments from "../components/Comments.vue"
|
|
|
+ import vWriteComment from "../components/WriteComment.vue"
|
|
|
+ import {getOneConfig} from "../api/config";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ setup() {
|
|
|
+ const collectionDetailVisble = ref(false);
|
|
|
+ const squareDetailVisble = ref(false);
|
|
|
+ const tableData = ref([])
|
|
|
+ return {collectionDetailVisble, tableData, squareDetailVisble};
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ vHeader, vComments,
|
|
|
+ vWriteComment
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ input: '',
|
|
|
+ select: '',
|
|
|
+ src: "src/assets/img/earth.jpg",
|
|
|
+ fit: 'cover',
|
|
|
+ postList: [
|
|
|
+ {
|
|
|
+ postId: 1,
|
|
|
+ title: "111",
|
|
|
+ content: "123456789",
|
|
|
+ praise: 5,
|
|
|
+ comment_num: 10,
|
|
|
+ updateTime: null,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentPage: 1,
|
|
|
+ title: "12121",
|
|
|
+ currentPost: null,
|
|
|
+ commentList: [],
|
|
|
+ currentState: 0,
|
|
|
+ mailTitle:"",
|
|
|
+ mailContent:"",
|
|
|
+ config: null,
|
|
|
+ modelData:null,
|
|
|
+ activeIndex: 1
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ sendMailTo(){
|
|
|
+ sendMail({"title":this.mailTitle,"fromUserId":1,"toUserId":this.currentPost.userId,"content":this.mailContent}).then(res=>{
|
|
|
+ if(res.success){
|
|
|
+ this.$message({
|
|
|
+ message: '发送成功！',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.mailContent=""
|
|
|
+ this.mailTitle=""
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$message({
|
|
|
+ message: '发送失败！',
|
|
|
+ type: 'fail'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ collect(postId){
|
|
|
+ collection({"userId":1,"postId":postId}).then(res =>
|
|
|
+ {
|
|
|
+ if(res.success){
|
|
|
+ this.$message({
|
|
|
+ message: '收藏成功！',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSearch() {
|
|
|
+ console.log("doing")
|
|
|
+ searchPost({
|
|
|
+ keyword: this.input,
|
|
|
+ flagList: "",
|
|
|
+ userId: 0
|
|
|
+ }).then(res => {
|
|
|
+ this.postList = res.object
|
|
|
+ console.log(this.postList)
|
|
|
+ this.currentState = 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCollectionDetail(postId) {
|
|
|
+ const data = ref([])
|
|
|
+ getPostByPostId({"postId": postId}).then(res => {
|
|
|
+ const postDetail = res.object
|
|
|
+ const fileId = postDetail.shareFileList[0]
|
|
|
+ this.currentPost = postDetail
|
|
|
+ this.title = postDetail.title
|
|
|
+
|
|
|
+ getComment({"userId": 1}).then(res => {
|
|
|
+ if (fileId != null) {
|
|
|
+ getOneConfig({"configId":this.currentPost.configId}).then(res => {
|
|
|
+ this.config=res.data
|
|
|
+ data.value=res.data.featureList
|
|
|
+ this.modelData=res.data.modelInfos
|
|
|
+ for (var i = 0; i < data.value.length; i++) {
|
|
|
+ if (data.value[i].conOrDis === 1) {
|
|
|
+ data.value[i].conOrDis = "连续值"
|
|
|
+ } else {
|
|
|
+ data.value[i].conOrDis = "离散值"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableData = data
|
|
|
+ console.log(data)
|
|
|
+ console.log("fileId=" + fileId)
|
|
|
+ this.collectionDetailVisble = true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.commentList = res.object
|
|
|
+ console.log(this.commentList)
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSearchDetail(postId) {
|
|
|
+ const data = ref([])
|
|
|
+ getPostByPostId({"postId": postId}).then(res => {
|
|
|
+ const postDetail = res.object
|
|
|
+ const fileId = postDetail.shareFileList[0]
|
|
|
+ this.currentPost = postDetail
|
|
|
+ this.title = postDetail.title
|
|
|
+ getComment({"userId": 1}).then(res => {
|
|
|
+ if (fileId != null) {
|
|
|
+ getOneConfig({"configId":this.currentPost.configId}).then(res => {
|
|
|
+ this.config=res.data
|
|
|
+ data.value=res.data.featureList
|
|
|
+ this.modelData=res.data.modelInfos
|
|
|
+ for (var i = 0; i < data.value.length; i++) {
|
|
|
+ if (data.value[i].conOrDis === 1) {
|
|
|
+ data.value[i].conOrDis = "连续值"
|
|
|
+ } else {
|
|
|
+ data.value[i].conOrDis = "离散值"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableData = data
|
|
|
+ this.squareDetailVisble = true
|
|
|
+ console.log(data)
|
|
|
+ console.log("fileId=" + fileId)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.commentList = res.object
|
|
|
+ console.log(this.commentList)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handlePostDetail(postId) {
|
|
|
+ console.log("ddd")
|
|
|
+ if (this.currentState == 1) {
|
|
|
+ this.handleCollectionDetail(postId)
|
|
|
+ }
|
|
|
+ if (this.currentState == 0) {
|
|
|
+ this.handleSearchDetail(postId)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ getCollection() {
|
|
|
+ getUserCollection({userId: 0}).then(
|
|
|
+ res => {
|
|
|
+ this.postList = res.object
|
|
|
+ console.log(this.postList)
|
|
|
+ this.currentState = 1
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ getMine() {
|
|
|
+ getUserPost({userId: 0}).then(
|
|
|
+ res => {
|
|
|
+ this.postList = res.object
|
|
|
+ console.log(this.postList)
|
|
|
+ this.currentState = 2
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .header {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ font-size: 26px !important;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass {
|
|
|
+ border: 1px solid #262626;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #1f1e1e;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .el-input-group__prepend {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ padding: 0 10px 0 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .el-input-group__append {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .el-input__inner {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 36px;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .el-icon-search {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .centerClass {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 26px;
|
|
|
+ background-color: #262626;
|
|
|
+ margin-left: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass:hover {
|
|
|
+ border: 1px solid #262626;
|
|
|
+ background: #262626;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass:hover .line {
|
|
|
+ background-color: #D5E3E8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchClass:hover .el-icon-search {
|
|
|
+ color: #ffd04b;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ border-radius: 30px
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-menu-demo {
|
|
|
+ width: 46%;
|
|
|
+ margin-left: 27%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid-content {
|
|
|
+ border-radius: 4px;
|
|
|
+ min-height: 36px;
|
|
|
+ width: 50%;
|
|
|
+ margin-left: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-menu-demo .el-menu-item:hover{
|
|
|
+ color: #ffd04b !important;
|
|
|
+ background: linear-gradient(270deg, transparent, transparent)!important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /*.el-input__inner{*/
|
|
|
+ /* border-radius: 30px!important;*/
|
|
|
+ /* border-color: #262626!important;*/
|
|
|
+ /* background-color: #606266!important;*/
|
|
|
+ /* height: 50px!important;*/
|
|
|
+
|
|
|
+ /*}*/
|
|
|
+
|
|
|
+ .postList {
|
|
|
+ margin-top: 40px;
|
|
|
+ width: 70%;
|
|
|
+ margin-left: 15%;
|
|
|
+ }
|
|
|
+</style>
|
chillqi