UI优化: 个人页面优化完成

src/views/ProjectPage/ProjectPage.vue

@@ -94,39 +94,39 @@
           查看相关项目。
         </div>
 
-<!--        <div v-if="this.activeIndex === '2' && !isLogin">-->
-<!--          请先-->
-<!--          <span style="cursor: pointer;color: #409eff"-->
-<!--                @click="$router.push('/login')">登录</span>-->
-<!--        </div>-->
-
-<!--          <div v-if="this.activeIndex === '3' && !isLogin">-->
-<!--              请先-->
-<!--              <span style="cursor: pointer;color: #409eff"-->
-<!--                    @click="$router.push('/login')">登录</span>-->
-<!--          </div>-->
+        <div v-if="this.activeIndex === '2' && !isLogin">
+          请先
+          <span style="cursor: pointer;color: #409eff"
+                @click="$router.push('/login')">登录</span>
+        </div>
 
-<!--          <div v-if="this.activeIndex === '4' && !isLogin">-->
-<!--              请先-->
-<!--              <span style="cursor: pointer;color: #409eff"-->
-<!--                    @click="$router.push('/login')">登录</span>-->
-<!--          </div>-->
+          <div v-if="this.activeIndex === '3' && !isLogin">
+              请先
+              <span style="cursor: pointer;color: #409eff"
+                    @click="$router.push('/login')">登录</span>
+          </div>
 
-          <div v-if="this.activeIndex === '2' ">
-                            <span style="cursor: pointer;color: #409eff"
-                                  @click="$router.push('/login')">跳转</span>
+          <div v-if="this.activeIndex === '4' && !isLogin">
+              请先
+              <span style="cursor: pointer;color: #409eff"
+                    @click="$router.push('/login')">登录</span>
           </div>
 
-          <div v-if="this.activeIndex === '3'" >
-<!--        <div v-if="this.activeIndex === '3' && isStudent">-->
-            <AnalysisStudentCard :num="1626"/>
-<!--            <AnalysisStudentCard :num="$store.state.user.id"/>-->
+<!--          <div v-if="this.activeIndex === '2' ">-->
+<!--                            <span style="cursor: pointer;color: #409eff"-->
+<!--                                  @click="$router.push('/login')">跳转</span>-->
+<!--          </div>-->
+
+<!--          <div v-if="this.activeIndex === '3'" >-->
+        <div v-if="this.activeIndex === '3' && isStudent">
+<!--            <AnalysisStudentCard :num="1575"/>-->
+            <AnalysisStudentCard :num="$store.state.user.id"/>
         </div>
 
-          <div v-if="this.activeIndex === '4'">
-<!--        <div v-if="this.activeIndex === '4' && isStudent">-->
-            <AnalysisGroupCard :num="1626"/>
-<!--          <AnalysisGroupCard :num="$store.state.user.id"/>-->
+<!--          <div v-if="this.activeIndex === '4'">-->
+        <div v-if="this.activeIndex === '4' && isStudent">
+<!--            <AnalysisGroupCard :num="1575"/>-->
+          <AnalysisGroupCard :num="$store.state.user.id"/>
         </div>
 
       </el-card>

src/views/ProjectPage/analysis/AnalysisStudentCard.vue

@@ -1,177 +1,173 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
     <div class="main">
-        <!-- 个人信息 -->
-        <el-card class="box-card">
-            <template v-slot:header class="clearfix">
-                <span>个人信息</span>
-            </template>
-            <el-descriptions :column="2">
-                <el-descriptions-item label="个人总得分:">{{
-                    totalScore
-                    }}</el-descriptions-item>
-                <el-descriptions-item label="额外得分bonus:">{{
-                    bonus
-                    }}</el-descriptions-item>
-            </el-descriptions>
-            <el-card class="box-innercard">
-                <template v-slot:header class="clearfix">
-                    <span>基本信息</span>
-                </template>
-                <el-descriptions :column="2">
-                    <el-descriptions-item label="姓名:">{{
-                        user.name
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="用户id:">{{
-                        user.userId
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="电子邮箱:">{{
-                        user.email
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-            <el-card class="box-innercard" style="margin-top: 20px">
-                <template v-slot:header class="clearfix">
-                    <span>项目信息</span>
-                </template>
-                <el-descriptions :column="2" style="margin-top: 20px">
-                    <div v-for="item in productList" v-bind:key="item">
-                        <el-descriptions-item label="项目id:" :key="item.projectId">{{
-                            item.projectId
-                            }}</el-descriptions-item>
-                        <el-descriptions-item label="项目名称:" :key="item.projectName">{{
-                            item.projectName
-                            }}</el-descriptions-item>
-                    </div>
-                </el-descriptions>
-            </el-card>
-        </el-card>
-        <!-- 提交信息 -->
-        <el-card class="box-card" style="margin-top: 20px">
-            <template v-slot:header class="clearfix">
-                <span>commit信息</span>
-            </template>
-            <el-descriptions :column="1">
-                <el-descriptions-item label="commit得分:">{{
-                    commitScore
-                    }}</el-descriptions-item>
-            </el-descriptions>
-            <el-card class="box-innercard" >
-                <template v-slot:header class="clearfix">
-                    <span>commit统计信息</span>
-                </template>
-                <el-descriptions :column="2">
-                    <el-descriptions-item label="commit总次数:">{{
-                        commitMessage.commit_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="有效commit次数:">{{
-                        commitMessage.valid_commit_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="bugList_commit次数:">{{
-                        commitMessage.buglist_commit
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="feature_commit次数:">{{
-                        commitMessage.feature_commit
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-            <el-card class="box-innercard" style="margin-top: 20px">
-                <template v-slot:header class="clearfix">
-                    <span>commit具体信息（可下滑查看）</span>
-                </template>
-                <el-descriptions :column="1" :colon="false" class="nui-scroll">
-                    <div v-for="item in commitMessage.commit_msg_overview" v-bind:key="item">
-                        <el-descriptions-item :key="item">{{
-                            item
-                            }}</el-descriptions-item>
-                    </div>
-                </el-descriptions>
-            </el-card>
-            <el-button type="text" @click="showModel1">commit组成信息</el-button>
-        </el-card>
-        <!-- bug信息 -->
-        <el-card class="box-card" style="margin-top: 20px">
-            <template v-slot:header class="clearfix">
-                <span>缺陷信息</span>
-            </template>
-            <el-descriptions :column="1">
-                <el-descriptions-item label="缺陷得分:">{{
-                    bugScore
-                    }}</el-descriptions-item>
-            </el-descriptions>
-            <el-card class="box-innercard" style="margin-top: 20px">
-                <template v-slot:header class="clearfix">
-                    <span>缺陷统计信息</span>
-                </template>
-                <el-descriptions :column="2">
-                    <el-descriptions-item label="缺陷数目:">{{
-                        bugList.bug_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="高优先级缺陷数目:">{{
-                        bugList.high_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="已经修复的缺陷数目:">{{
-                        bugList.finished_times
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-            <el-button type="text" @click="showModel4">缺陷修复率</el-button>
-        </el-card>
-        <!-- treeNode信息 -->
-        <el-card class="box-card" style="margin-top: 20px">
-            <template v-slot:header class="clearfix">
-                <span>需求树信息</span>
-            </template>
-            <el-descriptions :column="1">
-                <el-descriptions-item label="需求得分:">{{
-                    nodeScore
-                    }}</el-descriptions-item>
-            </el-descriptions>
-            <el-card class="box-card" style="margin-top: 20px">
-                <template v-slot:header class="clearfix">
-                    <span>需求统计信息</span>
-                </template>
-                <el-descriptions :column="2">
-                    <el-descriptions-item label="需求节点数目:">{{
-                        treeNode.treeNode_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="高优先级需求数目:">{{
-                        treeNode.high_treeNode_times
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="已经完成的需求数目:">{{
-                        treeNode.finished_treeNode_times
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-            <el-button type="text" @click="showModel5">需求完成率</el-button>
-        </el-card>
-        <!-- 部署信息 -->
-        <el-card class="box-card" style="margin-top: 20px">
-            <template v-slot:header class="clearfix">
-                <span>流水线部署信息</span>
-            </template>
-            <el-descriptions :column="1">
-                <el-descriptions-item label="部署得分:">{{
-                    pipelineScore
-                    }}</el-descriptions-item>
-            </el-descriptions>
-            <el-card class="box-card" style="margin-top: 20px">
-                <template v-slot:header class="clearfix">
-                    <span>部署统计信息</span>
-                </template>
-                <el-descriptions :column="2">
-                    <el-descriptions-item label="流水线部署次数:">{{
-                        pipeline.pipeline_deploy
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="流水线部署成功次数:">{{
-                        pipeline.pipeline_pass
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="流水线部署失败次数:">{{
-                        pipeline.pipline_failure
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-            <el-button type="text" @click="showModel3">部署通过率</el-button>
-        </el-card>
+        <el-carousel trigeer="click" height="580px" interval="1000000000">
+            <el-carousel-item>
+                <div>
+                    <div class="title">个人信息</div>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            个人得分: {{totalScore}}
+                        </el-col>
+                        <el-col :span="12">
+                            额外bonus: {{bonus}}
+                        </el-col>
+                    </el-row>
+                    <div class="title-little">基本信息</div>
+                    <el-row class="box-innercard" style="padding-left: 20px;">
+                        <el-col :span="12">
+                            姓名: {{user.name}}
+                        </el-col>
+                        <el-col :span="12">
+                            用户id: {{user.userId}}
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard" style="padding-left: 20px;">
+                        <el-col :span="12">
+                            电子邮箱: {{user.email}}
+                        </el-col>
+                    </el-row>
+                    <div class="title-little">项目信息</div>
+                    <el-table
+                            :data="productList"
+                            class="table">
+                        <el-table-column
+                                prop="projectId"
+                                label="项目id"
+                                width="150">
+                        </el-table-column>
+                        <el-table-column
+                                prop="projectName"
+                                label="项目名称">
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </el-carousel-item>
+            <el-carousel-item>
+                <div>
+                    <el-row>
+                        <el-col :span="20" class="title">
+                            commit信息
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button type="text" @click="showModel1">commit组成信息</el-button>
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        commit得分: {{commitScore}}
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            commit总次数: {{commitMessage.commit_times}}
+                        </el-col>
+                        <el-col :span="12">
+                            有效commit次数: {{commitMessage.valid_commit_times}}
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            bugList_commit次数: {{commitMessage.buglist_commit}}
+                        </el-col>
+                        <el-col :span="12">
+                            feature_commit次数: {{commitMessage.feature_commit}}
+                        </el-col>
+                    </el-row>
+                    <el-card class="box-innercard" style="background-color: #ffffff;margin: 10px;width: 90%;height:350px;">
+                        <template v-slot:header class="clearfix">
+                            <span style="font-size: 14px">commit具体信息（可下滑查看）</span>
+                        </template>
+                        <el-descriptions :column="1" :colon="false" class="nui-scroll">
+                            <div v-for="item in commitMessage.commit_msg_overview" v-bind:key="item">
+                                <el-descriptions-item :key="item">{{
+                                    item
+                                    }}</el-descriptions-item>
+                            </div>
+                        </el-descriptions>
+                    </el-card>
+                </div>
+            </el-carousel-item>
+            <el-carousel-item>
+                <div>
+                    <el-row style="margin-top: 50px">
+                        <el-col :span="20" class="title">
+                            缺陷信息
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button type="text" @click="showModel4">缺陷修复率</el-button>
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        缺陷得分: {{bugScore}}
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            缺陷数目: {{bugList.bug_times}}
+                        </el-col>
+                        <el-col :span="12">
+                            高优先级缺陷数目: {{bugList.high_times}}
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            已经修复的缺陷数目: {{bugList.finished_times}}
+                        </el-col>
+                    </el-row>
+                </div>
+                <div>
+                    <el-row style="margin-top: 50px">
+                        <el-col :span="20" class="title">
+                            需求树信息
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button type="text" @click="showModel5">需求完成率</el-button>
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        需求得分: {{nodeScore}}
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            需求节点数目: {{treeNode.treeNode_times}}
+                        </el-col>
+                        <el-col :span="12">
+                            高优先级需求数目: {{treeNode.high_treeNode_times}}
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            已经完成的需求数目: {{treeNode.finished_treeNode_times}}
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-carousel-item>
+            <el-carousel-item>
+                <div>
+                    <el-row style="margin-top: 20%">
+                        <el-col :span="20" class="title">
+                            流水线部署信息
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button type="text" @click="showModel3">部署通过率</el-button>
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        部署得分: {{pipelineScore}}
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            流水线部署次数: {{arrange.pipeline_deploy}}
+                        </el-col>
+                        <el-col :span="12">
+                            流水线部署成功次数: {{arrange.pipeline_pass}}
+                        </el-col>
+                    </el-row>
+                    <el-row class="box-innercard">
+                        <el-col :span="12">
+                            流水线部署失败次数: {{arrange.pipline_failure}}
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-carousel-item>
+        </el-carousel>
         <el-dialog v-model="visible1">
             <div
                     class="righttop"
@@ -249,7 +245,7 @@
                 testAnalysis: [],
                 visible3: false,
                 deployAnalysis: [],
-                pipeline: {},
+                arrange: {},
                 user: {},
                 test: {},
                 commitMessage: {},
@@ -549,6 +545,50 @@
 </script>
 
 <style scoped>
+    .box-innercard {
+        padding: 10px;
+        background-color: #F8F9FB;
+        font-size:14px;
+    }
+
+    .table{
+        margin: 10px;
+        margin-top: 20px;
+        margin-left: 15px;
+        margin-bottom: 20px;
+        width: 95%;
+    }
+
+    .el-carousel__item h3 {
+        color: #475669;
+        font-size: 14px;
+        opacity: 0.75;
+        line-height: 150px;
+        margin: 0;
+    }
+
+    .el-carousel__item{
+        /*background-color: #FFFFFF;*/
+        background-color: #F8F9FB;
+        /*border-radius: 10px;*/
+        padding: 10px;
+    }
+
+    .title{
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .title-little{
+        margin-top: 30px;
+        padding-left: 15px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+
     .nui-scroll {
         margin-top: 5px;
         width: 99%;