UI优化: 小组页面局部优化

src/views/ProjectPage/ProjectPage.vue

@@ -94,30 +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 === '4' && !isLogin">
-              请先
-              <span style="cursor: pointer;color: #409eff"
-                    @click="$router.push('/login')">登录</span>
+<!--        <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 === '4' && !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>
 
-        <div v-if="this.activeIndex === '3' && isStudent">
-            <AnalysisStudentCard :num="$store.state.user.id"/>
+          <div v-if="this.activeIndex === '3'" >
+<!--        <div v-if="this.activeIndex === '3' && isStudent">-->
+            <AnalysisStudentCard :num="1626"/>
+<!--            <AnalysisStudentCard :num="$store.state.user.id"/>-->
         </div>
 
-        <div v-if="this.activeIndex === '4' && isStudent">
-          <AnalysisGroupCard :num="$store.state.user.id"/>
+          <div v-if="this.activeIndex === '4'">
+<!--        <div v-if="this.activeIndex === '4' && isStudent">-->
+            <AnalysisGroupCard :num="1626"/>
+<!--          <AnalysisGroupCard :num="$store.state.user.id"/>-->
         </div>
 
       </el-card>

src/views/ProjectPage/analysis/AnalysisGroupCard.vue

@@ -1,198 +1,100 @@
 <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">
-                    <div v-for="item in productList" v-bind:key="item">
-                        <el-descriptions-item label="项目id:" :key="item.id">{{
-                            item.projectId
-                            }}</el-descriptions-item>
-                        <el-descriptions-item label="项目名称:" :key="item.name">{{
-                            item.projectName
-                            }}</el-descriptions-item>
-                    </div>
-                </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="3">
-                    <div v-for="item in userList" v-bind:key="item">
-                        <el-descriptions-item label="用户id:" :key="item.id">{{
-                            item.userId
-                            }}</el-descriptions-item>
-                        <el-descriptions-item label="姓名:" :key="item.number">{{
-                            item.name
-                            }}</el-descriptions-item>
-                        <el-descriptions-item label="电子邮箱:" :key="item.name">{{
-                            item.email
-                            }}</el-descriptions-item>
-                    </div>
-                </el-descriptions>
-            </el-card>
-        </el-card>
-        <!--        图表-->
-        <el-card class="box-card" style="margin-top: 20px">
-            <el-row :gutter="20">
-                <el-col :span="6">
-                    <p class="table_font">commit贡献占比</p>
-                    <div id="main1" class="pie"
-                    /></el-col>
-                <el-col :span="6">
-                    <p class="table_font">流水线部署贡献占比</p>
-                    <div id="main2" class="pie"
-                    />
-                </el-col>
-                <el-col :span="6">
-                    <p class="table_font">缺陷贡献占比</p>
-                    <div id="main3" class="pie"
-                    /></el-col>
-                <el-col :span="6">
-                    <p class="table_font">需求树贡献占比</p>
-                    <div id="main4" class="pie"
-                    />
-                </el-col>
-            </el-row>
-        </el-card>
-        <!--        commit信息-->
-        <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-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-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-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="流水线部署次数:">{{
-                        arrange.pipeline_deploy
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="流水线部署成功次数:">{{
-                        arrange.pipeline_pass
-                        }}</el-descriptions-item>
-                    <el-descriptions-item label="流水线部署失败次数:">{{
-                        arrange.pipline_failure
-                        }}</el-descriptions-item>
-                </el-descriptions>
-            </el-card>
-        </el-card>
+        <el-carousel trigger="click" height="560px" interval="1000000000">
+                        <el-carousel-item>
+                            <div>
+                                <div class="title">小组信息</div>
+<!--                                <el-descriptions :column="2" class="box-innercard">-->
+<!--&lt;!&ndash;                                    <div style="background-color: #409eff">&ndash;&gt;-->
+<!--&lt;!&ndash;                                    </div>&ndash;&gt;-->
+<!--                                    <el-descriptions-item label="小组得分:">{{-->
+<!--                                        totalScore-->
+<!--                                        }}</el-descriptions-item>-->
+<!--                                    <el-descriptions-item label="额外bonus:">{{-->
+<!--                                        bonus-->
+<!--                                        }}</el-descriptions-item>-->
+<!--                                </el-descriptions>-->
+                                <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-table
+                                        :data="userList"
+                                        class="table">
+                                    <el-table-column
+                                            prop="userId"
+                                            label="用户id"
+                                            width="150">
+                                    </el-table-column>
+                                    <el-table-column
+                                            prop="name"
+                                            label="项目名称"
+                                            width="150">
+                                    </el-table-column>
+                                    <el-table-column
+                                            prop="email"
+                                            label="电子邮箱">
+                                    </el-table-column>
+                                </el-table>
+                                <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>commit信息</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <div>缺陷信息</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <div>需求树信息</div>
+                        </el-carousel-item>
+                        <el-carousel-item>
+                            <div>流水线部署信息</div>
+                        </el-carousel-item>
+            <el-carousel-item>
+                <!--        图表-->
+                <el-card class="box-card" style="margin-top: 20px">
+                    <el-row :gutter="20">
+                        <el-col :span="5">
+                            <p class="table_font" style="text-align: center">commit贡献占比</p>
+                            <div id="main1" class="pie"
+                            /></el-col>
+                        <el-col :span="6">
+                            <p class="table_font" style="text-align: center">流水线部署贡献占比</p>
+                            <div id="main2" class="pie"
+                            />
+                        </el-col>
+                        <el-col :span="6">
+                            <p class="table_font" style="text-align: center">缺陷贡献占比</p>
+                            <div id="main3" class="pie"
+                            /></el-col>
+                        <el-col :span="7">
+                            <p class="table_font" style="text-align: center">需求树贡献占比</p>
+                            <div id="main4" class="pie"
+                            />
+                        </el-col>
+                    </el-row>
+                </el-card>
+            </el-carousel-item>
+        </el-carousel>
 
     </div>
 </template>
@@ -408,9 +310,9 @@
                     series: [
                         {
                             name: "commit次数",
-                            center: ["50%", "40%"],
+                            center: ["35%", "50%"],
                             type: "pie", // 设置图表类型为饼图
-                            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                             data: this.commitPie,
                         },
                     ],
@@ -462,9 +364,10 @@
                     series: [
                         {
                             name: "部署次数",
-                            center: ["50%", "40 %"],
+                            // center: ["50%", "40 %"],
+                            center: ["35%", "50%"],
                             type: "pie", // 设置图表类型为饼图
-                            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                             data: this.deployPie,
                         },
                     ],
@@ -489,9 +392,9 @@
                     series: [
                         {
                             name: "提交缺陷次数",
-                            center: ["50%", "40 %"],
+                            center: ["35%", "50%"],
                             type: "pie", // 设置图表类型为饼图
-                            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                             data: this.bugListPie,
                         },
                     ],
@@ -516,9 +419,9 @@
                     series: [
                         {
                             name: "提交需求次数",
-                            center: ["50%", "40 %"],
+                            center: ["35%", "50%"],
                             type: "pie", // 设置图表类型为饼图
-                            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                            radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                             data: this.treePie,
                         },
                     ],
@@ -533,6 +436,45 @@
 </script>
 
 <style scoped>
+
+    .box-innercard {
+        padding: 15px;
+        background-color: #F8F9FB;
+        font-size:16px;
+    }
+
+    .table{
+        margin: 10px;
+        margin-left: 15px;
+        width: 95%;
+    }
+
+    .el-carousel__item h3 {
+        color: #475669;
+        font-size: 14px;
+        opacity: 0.75;
+        line-height: 150px;
+        margin: 0;
+    }
+
+    .el-carousel__item{
+        /*background-color: #99a9bf;*/
+        background-color: #F8F9FB;
+        padding: 10px;
+    }
+
+    .title{
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .title-little{
+        padding-left: 15px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+
     .score-box {
         width: 20px;
         height: 10px;
@@ -583,9 +525,7 @@
         background-color: rgba(0, 0, 0, .01);
     }
 
-    .box-innercard {
-        /*background-color: #1f00f5;*/
-    }
+
     .pie {
         width: 200px;
         height: 150px;