修改我的学习报告页面样式及新增目标体系列表功能及点击查看报告功能

src/components/pages/myReport/components/courseEvaScore.vue

@@ -27,7 +27,7 @@ export default {
         series: [
           {
             data: [90, 90, 70, 80, 100],
-            type: "line",
+            type: "line"
           },
         ],
       },

src/components/pages/myReport/components/mrBasicData.vue

@@ -1,16 +1,31 @@
 <template>
   <div>
     <div class="basicBox">
-      <div>
-        <div>姓名：</div>
-        <div>班级：</div>
+      <div class="stuMes">
+        <div class="avaImg">
+          <img src="../../../../assets/avatar.png" alt="" />
+        </div>
+        <div class="sName">
+          <div>林嘉兴</div>
+          <div>三年一班</div>
+        </div>
       </div>
+
       <div class="basicBottom">
-        <div>参与项目详情：</div>
-        <div>
-          <div>项目总数18</div>
-          <div>已完成8</div>
-          <div>进行中2</div>
+        <div>参与课程详情：</div>
+        <div class="courseDetail">
+          <div class="courseChild">
+            <div>24</div>
+            <div>全部任务</div>
+          </div>
+          <div class="courseChild">
+            <div>18</div>
+            <div>已完成</div>
+          </div>
+          <div class="courseChild">
+            <div>5</div>
+            <div>待学习</div>
+          </div>
         </div>
       </div>
     </div>
@@ -23,19 +38,61 @@ export default {};
 
 <style scoped>
 .basicBox {
-  margin: 20px 0 20px 20px;
-  height: 100px;
+  margin: 20px 0;
 }
 .basicBottom {
-  margin-top: 20px;
+  margin-left: 20px;
 }
-.basicBottom > div:nth-child(2) {
+.basicBottom > div:first-child {
+  margin: 20px 0;
+}
+.stuMes {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-left: 20px;
+}
+.avaImg {
+  width: 50px;
+  height: 49px;
+}
+
+.avaImg > img {
+  width: 100%;
+  height: 100%;
+}
+.sName {
+  margin-left: 5px;
+}
+.sName > div:last-child {
+  color: #d2d2d2;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.courseDetail {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding-top: 5px;
+  width: 90%;
+  justify-content: space-around;
+}
+.courseChild {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.courseChild > div:first-child {
+  color: #3868c1;
+  font-size: 32px;
+  font-weight: bold;
 }
-.basicBottom > div:nth-child(2) > div {
-  padding-right: 20px;
+.courseChild > div:last-child {
+  background: #eef8fb;
+  border: 1px solid #b6c2c2;
+  color: #4f657a;
+  padding: 1px 3px;
 }
 </style>

src/components/pages/myReport/components/mrEva.vue

@@ -1,23 +1,36 @@
 <template>
   <div>
-    <div class="evaBox">
-      <el-table
-        :data="tableData"
-        border
-        style="width: 100%"
-        :row-class-name="tableRowClassName"
-      >
-        <el-table-column prop="course" label="课程" min-width="15%">
+    <div class="evaBox" v-for="(item, index) in evaList" :key="index">
+      <div class="sub_title">
+        <div class="yuan">
+          <img src="../../../../assets/icon/myReport/gang.png" alt="" />
+        </div>
+        <div>目标体系-{{ item.title }}</div>
+      </div>
+      <el-table :data="item.course" border style="width: 100%" stripe>
+        <el-table-column
+          prop="title"
+          label="项目"
+          align="center"
+          min-width="15%"
+        >
         </el-table-column>
-        <el-table-column prop="subject" label="学科" min-width="15%">
-        </el-table-column>
-        <el-table-column prop="theme" label="主题" min-width="20%">
+        <el-table-column label="分类" align="center" min-width="20%">
+          <template slot-scope="scope">
+            {{ scope.row.typename ? scope.row.typename : "-" }}
+          </template>
         </el-table-column>
-        <el-table-column prop="class" label="班级" min-width="20%">
+        <el-table-column label="班级" align="center" min-width="20%">
+          <template slot-scope="scope">
+            {{ scope.row.cName ? scope.row.cName : "-" }}
+          </template>
         </el-table-column>
         <el-table-column label="操作" min-width="15%">
-          <template>
-            <el-button size="mini" type="primary" style="cursor: pointer"
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="getReport(scope.row.courseId)"
               >查看</el-button
             >
           </template>
@@ -28,54 +41,43 @@
 </template>
 
 <script>
+
 export default {
+  props: ["ooid", "uuid"],
   data() {
     return {
-      evaList:[],
-      tableData: [
-        {
-          course: "设计并制作小车",
-          subject: "综合实践",
-          theme: "人工智能",
-          class: "初一一班",
-        },
-        {
-          course: "可可乐博项目",
-          subject: "企业项目",
-          theme: "可可乐博",
-          class: "初二一班",
-        },
-        {
-          course: "火星地球碰撞测试项目",
-          subject: "航空项目",
-          theme: "外太空",
-          class: "初一三班",
-        },
-      ],
+      evaList: [],
     };
   },
   methods: {
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "even_row";
-      } else {
-        return "";
-      }
-    },
-    getMrEva(){
+    getMrEva() {
       let params = {
-        oid: this.oid,
+        oid: this.ooid,
       };
       this.ajax
         .get(this.$store.state.api + "selectMrEva", params)
         .then((res) => {
           this.evaList = res.data[0];
           var courseList = res.data[1];
+          for (var i = 0; i < this.evaList.length; i++) {
+            this.evaList[i].course = [];
+            for (var j = 0; j < courseList.length; j++) {
+              if (this.evaList[i].id == courseList[j].evaId) {
+                this.evaList[i].course.push(courseList[j]);
+              }
+            }
+          }
         })
         .catch((err) => {
           console.error(err);
         });
     },
+    getReport(cid){
+      this.$emit("getEvaCid", cid);
+    },
+  },
+  created() {
+    this.getMrEva();
   },
 };
 </script>
@@ -83,9 +85,30 @@ export default {
 <style scoped>
 .evaBox {
   width: 100%;
-  margin: 10px 0 0 15px;
+  padding: 20px 0 0 0;
+}
+.el-table >>> .has-gutter > tr th {
+  background: #fafafa;
+}
+.sub_title {
+  display: flex;
+  color: #3050c2;
+  font-weight: bold;
+  align-items: center;
+  height: 40px;
+  width: 200px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 0;
+  justify-content: flex-start;
+  width: 100%;
+}
+.yuan {
+  width: 40px;
+  height: 20px;
 }
-.el-table >>> .even_row {
-  background-color: #f1f1f1;
+.yuan > img {
+  width: 100%;
+  height: 100%;
 }
 </style>

src/components/pages/myReport/components/mrLearnStatus.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 95%; height: 420px; margin: 0 auto">
+    <div style="width: 95%; height: 220px; margin: 0 auto">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
       <div
         id="gauge_canvas"
@@ -22,34 +22,34 @@ export default {
             type: "gauge",
             startAngle: 180,
             endAngle: 0,
-            center: ["50%", "75%"],
+            center: ["50%", "60%"],
             radius: "90%",
             min: 0,
             max: 1,
-            splitNumber: 8,
+            splitNumber: 6,
             axisLine: {
               lineStyle: {
-                width: 6,
+                width: 10,
                 color: [
-                  [0.25, "#8FAADC"],
-                  [0.5, "#8FAADC"],
-                  [0.75, "#8FAADC"],
-                  [1, "#8FAADC"],
+                  [0.25, "#E73FF1"],
+                  [0.5, "#89DCBE"],
+                  [0.75, "#89DCBE"],
+                  [1, "#2836F6"],
                 ],
               },
             },
             axisTick: {
-              length: 12,
+              length: 0,
               lineStyle: {
                 color: "inherit",
                 width: 2,
               },
             },
             splitLine: {
-              length: 20,
+              length: 15,
               lineStyle: {
                 color: "inherit",
-                width: 5,
+                width: 2,
               },
             },
             axisLabel: {
@@ -81,7 +81,7 @@ export default {
             },
             data: [
               {
-                value: 0.7,
+                value: 0.2,
               },
             ],
           },
@@ -102,7 +102,7 @@ export default {
       newPromise.then(() => {
         const setEcharWH = {
           width: 500,
-          height: 400,
+          height: 260,
         };
         const chartObj = this.$echarts.init(
           //劳动课程

src/components/pages/myReport/components/mrOverPer.vue

@@ -2,14 +2,34 @@
   <div>
     <div class="basicBox">
       <div class="allPer">
-        <div>在2023年1月份,</div>
-        <div>我的登录总时长认200小时，总学习总时长达150小时。</div>
-        <div>
-          在课程学习中，我的的工具提交率达
-          98%，资料说读率达89%，课程平均得分为85，超过班级内70%的同学。
+        <div class="perItem">
+          <div></div>
+          <div>
+            我的登录总时长达
+            <span class="cBlue">200</span>
+            小时，总学习总时长<span class="cBlue">150</span>小时。
+          </div>
+        </div>
+        <div class="perItem">
+          <div></div>
+          <div>
+            我的的工具提交率达<span class="cOrange">98%</span
+            >，资料阅读率达<span class="cOrange">89%</span>。
+          </div>
+        </div>
+        <div class="perItem">
+          <div></div>
+          <div>
+            课程平均得分为<span class="cBlue">85</span>，超过班级内<span
+              class="cOrange"
+              >70%</span
+            >的同学。
+          </div>
+        </div>
+        <div class="perItem">
+          <div></div>
+          <div>我获得的本月称号是:课堂智慧星。</div>
         </div>
-        <div>我获得的本月称号是</div>
-        <div>XXXX。</div>
       </div>
     </div>
   </div>
@@ -21,16 +41,43 @@ export default {};
 
 <style scoped>
 .basicBox {
-  margin: 20px 0 20px 20px;
-  height: 200px;
+  margin: 0 0 0 20px;
+  height: 100%;
 }
 .allPer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+  width: 100%;
+  height: 85%;
 }
 .allPer > div {
-  padding-bottom: 15px;
   font-size: 14px;
 }
+.perItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.perItem > div:first-child {
+  width: 12px;
+  height: 12px;
+  background: #3d74f1;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+.cBlue,
+.cOrange {
+  font-size: 16px;
+  font-weight: bold;
+}
+.cBlue {
+  color: blue;
+}
+.cOrange {
+  color: orange;
+}
 </style>

src/components/pages/myReport/components/toolTypeAna.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 95%; height: 300px; margin: 0 auto">
+    <div style="width: 95%; height: 220px; margin: 0 auto">
       <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
       <div
         id="charts_canvas"
@@ -23,6 +23,7 @@ export default {
         legend: {
           orient: "vertical",
           left: "left",
+          show: false,
         },
         series: [
           {
@@ -36,7 +37,7 @@ export default {
               { value: 146, name: "互动类" },
             ],
             label: {
-              formatter: "{b}:{c}",
+              formatter: "{b}\n{c}",
             },
             emphasis: {
               itemStyle: {

src/components/pages/myReport/myReport.vue

@@ -1,59 +1,104 @@
 <template>
-  <div>
-    <!-- <div class="myBox">
-      <div class="myLeftBox">
-        <div><MrBasicData></MrBasicData></div>
-        <div><MrOverPer></MrOverPer></div>
-      </div>
-      <div class="myMiddleBox"><MyCourseReport></MyCourseReport></div>
-      <div class="myRightBox">
-        <div>
-          <CourseEvaScore></CourseEvaScore>
+  <div :class="{ isWorkCss: reportVisible }">
+    <div class="sr_body">
+      <div class="mrTitle">
+        <div>我的学习报告</div>
+        <div class="mrIcon">
+          <img src="../../../assets/icon/myReport/tIcon.png" alt="" />
         </div>
       </div>
-    </div> -->
-    <div class="sr_body">
       <div class="sr_box">
         <div class="sr_first">
-          <div class="first">
-            <div class="sub_title"><span>基础信息</span></div>
+          <div class="first" style="height: 260px">
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>基础信息</div>
+            </div>
             <MrBasicData class="r_box"></MrBasicData>
           </div>
-          <div class="second">
-            <div class="sub_title"><span>我的综合表现</span></div>
+          <div class="second" style="height: 260px">
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>我的综合表现</div>
+            </div>
             <MrOverPer class="r_box"></MrOverPer>
           </div>
           <div class="third">
-            <div class="sub_title"><span>我的学习状态</span></div>
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>我的学习状态</div>
+            </div>
             <MrLearnStatus class="r_box"></MrLearnStatus>
           </div>
         </div>
-        <div class="sr_second" style="height:965px">
-          <div class="first">
-            <div class="sub_title"><span>我的课程报告</span></div>
+        <div class="sr_second" style="height: 830px">
+          <div class="first" style="margin: 0; justify-content: flex-start">
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>我的课程报告</div>
+            </div>
             <MyCourseReport class="r_box"></MyCourseReport>
           </div>
         </div>
         <div class="sr_third">
           <div class="first">
-            <div class="sub_title"><span>课程评价得分</span></div>
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>课程评价得分</div>
+            </div>
             <CourseEvaScore class="r_box"></CourseEvaScore>
           </div>
           <div class="second">
-            <div class="sub_title"><span>课程类型分析</span></div>
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>课程类型分析</div>
+            </div>
             <CourseTypeAna class="r_box"></CourseTypeAna>
           </div>
-          <div class="third">
-            <div class="sub_title"><span>工具类型分析</span></div>
+          <div class="third" style="height: 270px">
+            <div class="sub_title">
+              <div class="yuan">
+                <img src="../../../assets/icon/myReport/yuan.png" alt="" />
+              </div>
+              <div>工具类型分析</div>
+            </div>
             <ToolTypeAna class="r_box"></ToolTypeAna>
           </div>
         </div>
       </div>
-      <div style="height: 100%;overflow-x: hidden;">
-        <div class="sub_title"><span>目标体系1</span></div>
-        <MrEva class="r_box"></MrEva>
+      <div style="height: 100%; overflow-x: hidden">
+        <div>
+          <MrEva
+            class="r_box"
+            :ooid="oid"
+            :uuid="userid"
+            @getEvaCid="getCid"
+          ></MrEva>
+        </div>
       </div>
     </div>
+    <div class="report_box" v-if="reportVisible">
+      <studentReport
+        :checkCourse="checkCourse"
+        :checkStudent="checkStudent"
+        :oid="oid"
+      ></studentReport>
+    </div>
+    <div class="cancelbox" v-if="reportVisible">
+      <el-button @click="cancelR" type="primary" size="small">返回</el-button>
+    </div>
   </div>
 </template>
 
@@ -66,6 +111,7 @@ import CourseEvaScore from "./components/courseEvaScore.vue";
 import CourseTypeAna from "./components/courseTypeAna.vue";
 import ToolTypeAna from "./components/toolTypeAna.vue";
 import MrEva from "./components/mrEva.vue";
+import studentReport from "../components/studentReport";
 export default {
   components: {
     MrBasicData,
@@ -76,14 +122,30 @@ export default {
     CourseTypeAna,
     ToolTypeAna,
     MrEva,
+    studentReport,
   },
   data() {
     return {
       userid: this.$route.query.userid,
       org: this.$route.query.org,
       oid: this.$route.query.oid,
+      reportVisible: false,
+      checkStudent: "",
+      checkCourse: "",
     };
   },
+  methods: {
+    getCid(cid) {
+      this.checkCourse = cid;
+      this.checkStudent = this.userid;
+      this.reportVisible = true;
+    },
+    cancelR() {
+      this.checkCourse = "";
+      this.checkStudent = "";
+      this.reportVisible = false;
+    },
+  },
 };
 </script>
 
@@ -111,7 +173,7 @@ export default {
 }
 
 .sr_first {
-  width: calc(100% / 3.75);
+  width: calc(100% / 4);
   height: 100%;
 }
 
@@ -120,7 +182,7 @@ export default {
   height: 100%;
 }
 .sr_third {
-  width: calc(100% / 3.75 * 0.75);
+  width: calc(100% / 3.75);
   height: 100%;
 }
 .sr_first,
@@ -142,6 +204,7 @@ export default {
   border-radius: 10px;
   width: 98%;
   overflow: hidden;
+  box-shadow: 0 0 10px 3px #cad1d9;
 }
 .sr_first .first {
   height: calc(100% / 3);
@@ -165,29 +228,88 @@ export default {
   /* height: calc(100% / 3.5 * 1.5); */
 }
 .sr_third .first {
-  height: calc(100% / 2.25);
+  height: 260px;
   margin-bottom: 20px;
 }
 .sr_third .second {
-  height: calc(100% / 2.25);
+  height: 260px;
   margin-bottom: 20px;
 }
 .sr_third .third {
-  height: calc(100% / 2.25);
+  height: 260px;
 }
 .sub_title {
   display: flex;
   color: #3050c2;
   font-weight: bold;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   height: 40px;
   width: 200px;
-  margin: 0 15px;
+  margin: 0 auto;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin-top: 10px;
 }
 
 .r_box {
   height: calc(100% - 40px);
   width: 100%;
 }
+.mrTitle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
+  margin: 10px 0;
+}
+.mrTitle > div:nth-child(1) {
+  font-size: 22px;
+}
+.mrIcon {
+  width: 30px;
+  margin-left: 5px;
+}
+.yuan {
+  width: 30px;
+  height: 30px;
+}
+.mrIcon > img,
+.yuan > img {
+  width: 100%;
+  height: 100%;
+}
+.cancelbox {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 20px;
+  width: 95%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 90px 0px 0px;
+  box-sizing: border-box;
+}
+
+.report_box {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  /* background: #fff; */
+  background: rgb(231, 242, 252);
+  overflow: auto;
+  z-index: 1;
+  width: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 20px;
+  box-sizing: border-box;
+}
+.isWorkCss {
+  width: 100%;
+  height: 100%;
+}
 </style>