新增报告页面

src/components/pages/myReport/myReport.vue

@@ -0,0 +1,193 @@
+<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>
+      </div>
+    </div> -->
+    <div class="sr_body">
+      <div class="sr_box">
+        <div class="sr_first">
+          <div class="first">
+            <div class="sub_title"><span>基础信息</span></div>
+            <MrBasicData class="r_box"></MrBasicData>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>我的综合表现</span></div>
+            <MrOverPer class="r_box"></MrOverPer>
+          </div>
+          <div class="third">
+            <div class="sub_title"><span>我的学习状态</span></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>
+            <MyCourseReport class="r_box"></MyCourseReport>
+          </div>
+        </div>
+        <div class="sr_third">
+          <div class="first">
+            <div class="sub_title"><span>课程评价得分</span></div>
+            <CourseEvaScore class="r_box"></CourseEvaScore>
+          </div>
+          <div class="second">
+            <div class="sub_title"><span>课程类型分析</span></div>
+            <CourseTypeAna class="r_box"></CourseTypeAna>
+          </div>
+          <div class="third">
+            <div class="sub_title"><span>工具类型分析</span></div>
+            <ToolTypeAna class="r_box"></ToolTypeAna>
+          </div>
+        </div>
+      </div>
+      <div style="height: 100%; min-width: 1100px">
+        <div class="sub_title"><span>目标体系1</span></div>
+        <MrEva class="r_box"></MrEva>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MrBasicData from "../studio/components/mrBasicData.vue";
+import MrOverPer from "../studio/components/mrOverPer.vue";
+import MyCourseReport from "../studio/components/myCourseReport.vue";
+import MrLearnStatus from "../studio/components/mrLearnStatus.vue";
+import CourseEvaScore from "../studio/components/courseEvaScore.vue";
+import CourseTypeAna from "../studio/components/courseTypeAna.vue";
+import ToolTypeAna from "../studio/components/toolTypeAna.vue";
+import MrEva from "../studio/components/mrEva.vue";
+export default {
+  components: {
+    MrBasicData,
+    MrOverPer,
+    MyCourseReport,
+    MrLearnStatus,
+    CourseEvaScore,
+    CourseTypeAna,
+    ToolTypeAna,
+    MrEva,
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.sr_head {
+  color: rgb(21, 80, 183);
+  font-size: 30px;
+  font-weight: bolder;
+  text-align: center;
+  margin-bottom: 15px;
+}
+.sr_body {
+  width: 95%;
+  margin: 0 auto;
+  height: calc(100% - 55px);
+  overflow: auto;
+}
+
+.sr_box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  min-width: 1100px;
+  min-height: 700px;
+}
+
+.sr_first {
+  width: calc(100% / 3.75);
+  height: 100%;
+}
+
+.sr_second {
+  width: calc(100% / 3.75 * 2);
+  height: 100%;
+}
+.sr_third {
+  width: calc(100% / 3.75 * 0.75);
+  height: 100%;
+}
+.sr_first,
+.sr_second,
+.sr_third {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sr_first .first,
+.sr_first .second,
+.sr_first .third,
+.sr_second .first,
+.sr_second .second,
+.sr_third .first,
+.sr_third .second,
+.sr_third .third {
+  background: #fff;
+  border-radius: 10px;
+  width: 98%;
+  overflow: hidden;
+}
+.sr_first .first {
+  height: calc(100% / 3);
+  margin-bottom: 20px;
+}
+.sr_first .second {
+  height: calc(100% / 3);
+  margin-bottom: 20px;
+}
+
+.sr_first .third {
+  height: calc(100% / 3);
+}
+
+.sr_second .first {
+  /* height: calc(100% / 3.5 * 2); */
+  height: calc(100%);
+  /* margin-bottom: 20px; */
+}
+.sr_second .second {
+  /* height: calc(100% / 3.5 * 1.5); */
+}
+.sr_third .first {
+  height: calc(100% / 2.25);
+  margin-bottom: 20px;
+}
+.sr_third .second {
+  height: calc(100% / 2.25);
+  margin-bottom: 20px;
+}
+.sr_third .third {
+  height: calc(100% / 2.25);
+}
+.sub_title {
+  display: flex;
+  color: #3050c2;
+  font-weight: bold;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  width: 200px;
+  margin: 0 15px;
+}
+
+.r_box {
+  height: calc(100% - 40px);
+  width: 100%;
+}
+</style>

src/components/pages/studio/components/courseEvaScore.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div style="width: 95%; height: 250px; margin: 0 auto">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {
+          type: "category",
+          data: ["课程1", "课程2", "课程3", "课程4", "课程5"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [90, 90, 70, 80, 100],
+            type: "line",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style>
+</style>

src/components/pages/studio/components/courseTypeAna.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div style="width: 95%; height: 250px; margin: 0 auto">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {
+          type: "category",
+          data: [
+            "语文",
+            "数学",
+            "英语",
+            "信息科技",
+            "劳动",
+            "科学",
+            "STEM",
+            "美术",
+          ],
+          axisLabel: {
+            interval: 0, //全部显示x轴
+          },
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [45, 23, 35, 55, 30, 20, 25, 10],
+            type: "bar",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style>
+</style>

src/components/pages/studio/components/mrBasicData.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="basicBox">
+      <div>
+        <div>姓名：</div>
+        <div>班级：</div>
+      </div>
+      <div class="basicBottom">
+        <div>参与项目详情：</div>
+        <div>
+          <div>项目总数18</div>
+          <div>已完成8</div>
+          <div>进行中2</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.basicBox {
+  margin: 20px 0 20px 20px;
+  height: 100px;
+}
+.basicBottom {
+  margin-top: 20px;
+}
+.basicBottom > div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: 5px;
+}
+.basicBottom > div:nth-child(2) > div {
+  padding-right: 20px;
+}
+</style>

src/components/pages/studio/components/mrEva.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="evaBox">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="course" label="课程" 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>
+        <el-table-column prop="class" label="班级" min-width="20%">
+        </el-table-column>
+        <el-table-column label="操作" min-width="30%">
+          <template>
+            <el-button size="mini" type="primary" style="cursor: pointer"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          course: "设计并制作小车",
+          subject: "综合实践",
+          theme: "人工智能",
+          class: "初一一班",
+        },
+        {
+          course: "可可乐博项目",
+          subject: "企业项目",
+          theme: "可可乐博",
+          class: "初二一班",
+        },
+        {
+          course: "火星地球碰撞测试项目",
+          subject: "航空项目",
+          theme: "外太空",
+          class: "初一三班",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.evaBox {
+  width: 100%;
+  margin: 10px 0 0 15px;
+}
+</style>

src/components/pages/studio/components/mrLearnStatus.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div style="width: 95%; height: 420px; margin: 0 auto">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        series: [
+          {
+            type: "gauge",
+            startAngle: 180,
+            endAngle: 0,
+            center: ["50%", "75%"],
+            radius: "90%",
+            min: 0,
+            max: 1,
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                width: 6,
+                color: [
+                  // [0.25, '#8FAADC'],
+                  // [0.5, '#8FAADC'],
+                  // [0.75, '#8FAADC'],
+                  [1, "#8FAADC"],
+                ],
+              },
+            },
+            pointer: {
+              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+              length: "12%",
+              width: 20,
+              offsetCenter: [0, "-60%"],
+              itemStyle: {
+                color: "inherit",
+              },
+            },
+            axisTick: {
+              length: 12,
+              lineStyle: {
+                color: "inherit",
+                width: 2,
+              },
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                color: "inherit",
+                width: 5,
+              },
+            },
+            axisLabel: {
+              color: "#464646",
+              fontSize: 20,
+              distance: -60,
+              rotate: "tangential",
+            },
+            detail: {
+              fontSize: 30,
+              offsetCenter: [0, "-35%"],
+              valueAnimation: true,
+              formatter: function (value) {
+                return Math.round(value * 100) + "";
+              },
+              color: "inherit",
+            },
+            data: [
+              {
+                value: 0.7,
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style>
+</style>

src/components/pages/studio/components/mrOverPer.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div class="basicBox">
+      <div class="allPer">
+        <div>在2023年1月份,</div>
+        <div>我的登录总时长认200小时，总学习总时长达150小时。</div>
+        <div>
+          在课程学习中，我的的工具提交率达
+          98%，资料说读率达89%，课程平均得分为85，超过班级内70%的同学。
+        </div>
+        <div>我获得的本月称号是</div>
+        <div>XXXX。</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.basicBox {
+  margin: 20px 0 20px 20px;
+  height: 200px;
+}
+.allPer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.allPer > div {
+  padding-bottom: 5px;
+}
+</style>

src/components/pages/studio/components/myCourseReport.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div class="basicBox">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+
+</style>

src/components/pages/studio/components/toolTypeAna.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div style="width: 95%; height: 300px; margin: 0 auto">
+      <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: [
+              { value: 34, name: "思维类" },
+              { value: 46, name: "测试类" },
+              { value: 67, name: "技术类" },
+              { value: 34, name: "学科类" },
+              { value: 146, name: "互动类" },
+            ],
+            label: {
+              formatter: "{b}:{c}",
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getInfo() {
+      this.setChart();
+    },
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+          //   document.getElementById("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+      let _this = this;
+      window.addEventListener("resize", () => {
+        if (_this.chartObj) {
+          _this.chartObj.resize();
+        }
+      });
+    },
+  },
+  watch: {
+    userid(newValue, oldValue) {
+      this.getInfo();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getInfo();
+    });
+  },
+};
+</script>
+
+<style>
+</style>

src/components/pages/works.vue

@@ -48,22 +48,66 @@
             >课程管理</span
           >
           <span class="sub_head">评价管理</span>
+          <span
+            @click="
+              goTo(
+                '/worksReport?userid=' + userid + '&oid=' + oid + '&org=' + org
+              )
+            "
+            >数据报告</span
+          >
         </div>
         <div class="student_head">
           <div class="student_search">
-            <div>项目筛选</div>
-            <el-select v-model="groupA" @change="search">
-              <el-option value="0" label="我的课程"></el-option>
-              <el-option value="1" label="他人课程"></el-option>
+            <div>班级筛选</div>
+            <el-select v-model="classChoose" @change="search">
+              <el-option label="全部" value="">全部</el-option>
+              <el-option
+                v-for="(c, cIndex) in classJuri"
+                :key="cIndex"
+                :value="c.id"
+                :label="c.name"
+              ></el-option>
+            </el-select>
+            <div
+              style="
+                line-height: 35px;
+                font-size: 14px;
+                min-width: 60px;
+                margin-left: 10px;
+              "
+            >
+              目标筛选
+            </div>
+            <el-select v-model="eChoose" @change="search" clear="mbCss">
+              <el-option label="全部" value="">全部</el-option>
+              <el-option
+                v-for="(e, eIndex) in evaJuri"
+                :key="eIndex"
+                :value="e.id"
+                :label="e.title"
+              ></el-option>
             </el-select>
             <el-input
               v-model="cn"
               placeholder="筛选项目名称"
               @input="search"
             ></el-input>
-            <div @click="
-              goTo('/studentWorks?userid=' + userid + '&oid=' + oid + '&org=' + org)
-            ">学生评价管理</div>
+            <div
+              style="margin-left: 10px; cursor: pointer"
+              @click="
+                goTo(
+                  '/studentWorks?userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&org=' +
+                    org
+                )
+              "
+            >
+              学生评价管理
+            </div>
           </div>
         </div>
       </div>
@@ -86,12 +130,31 @@
               min-width="30"
               align="center"
             ></el-table-column>
+            <el-table-column label="班级" min-width="30" align="center">
+              <template slot-scope="scope">
+                {{
+                  tableData1[scope.$index].classJson.className
+                    ? tableData1[scope.$index].classJson.className
+                    : "-"
+                }}
+              </template>
+            </el-table-column>
             <el-table-column
               prop="uname"
               label="创建人"
               min-width="30"
               align="center"
             ></el-table-column>
+            <el-table-column
+              prop="evaTitle"
+              label="目标名称"
+              min-width="30"
+              align="center"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.evaTitle ? scope.row.evaTitle : "-" }}
+              </template>
+            </el-table-column>
             <el-table-column
               prop="time"
               label="时间"
@@ -309,11 +372,15 @@ export default {
       sClass: "",
       subjectJuri: [],
       projectJuri: [],
+      classJuri: [],
+      evaJuri: [],
       grade: [],
       projectchoose: "",
       page: 1,
       total: 0,
       groupA: "0",
+      classChoose: "",
+      eChoose: "",
       cn: "",
       userid: this.$route.query.userid,
       org: this.$route.query.org,
@@ -375,39 +442,55 @@ export default {
       this.getStudnet();
     },
     //获取班级列表
-    getClass() {
-      this.isLoading = true;
-      let params = {
-        cu: "",
-        cn: this.sClass,
-        page: this.page,
-      };
-      this.ajax
-        .get(this.$store.state.api + "selectClass", params)
-        .then((res) => {
-          this.isLoading = false;
-          this.grade = res.data[0];
-        })
-        .catch((err) => {
-          this.isLoading = false;
-          console.error(err);
-        });
-    },
+    // getClass() {
+    //   this.isLoading = true;
+    //   let params = {
+    //     cu: "",
+    //     cn: this.sClass,
+    //     page: this.page,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "selectClass", params)
+    //     .then((res) => {
+    //       this.isLoading = false;
+    //       this.grade = res.data[0];
+    //     })
+    //     .catch((err) => {
+    //       this.isLoading = false;
+    //       console.error(err);
+    //     });
+    // },
     getProject() {
       this.isLoading = true;
       let params = {
-        type: this.groupA,
         uid: this.userid,
-        oid: this.oid,
+        cid: this.classChoose,
+        eid: this.eChoose,
         cn: this.cn,
         page: this.page,
       };
       this.ajax
-        .get(this.$store.state.api + "getProject", params)
+        .get(this.$store.state.api + "getProject1", params)
         .then((res) => {
           this.isLoading = false;
           this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
           this.tableData1 = res.data[0];
+          var cJuri = res.data[1];
+          for (var j = 0; j < this.tableData1.length; j++) {
+            this.tableData1[j].classJson = { className: "" };
+            for (var i = 0; i < cJuri.length; i++) {
+              if (this.tableData1[j].courseId == cJuri[i].courseId) {
+                if (cJuri[i].cName != undefined && cJuri[i].cName != null) {
+                  if (this.tableData1[j].classJson.className == "") {
+                    this.tableData1[j].classJson.className += cJuri[i].cName;
+                  } else {
+                    this.tableData1[j].classJson.className +=
+                      "," + cJuri[i].cName;
+                  }
+                }
+              }
+            }
+          }
         })
         .catch((err) => {
           this.isLoading = false;
@@ -477,11 +560,37 @@ export default {
       this.reportVisible = true;
       this.signDialog = false;
     },
+    getClass() {
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectClassBySchool", params)
+        .then((res) => {
+          this.classJuri = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getEva() {
+      let params = {
+        oid: this.oid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectAllEvaluation", params)
+        .then((res) => {
+          this.evaJuri = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
   },
   created() {
     this.page = 1;
-    // this.getClass();
-    // this.getGroup();
+    this.getClass();
+    this.getEva();
     this.getProject();
   },
 };
@@ -490,7 +599,7 @@ export default {
 <style scoped>
 .sub_head {
   position: relative;
-  margin-left: 10px;
+  margin: 0 10px;
 }
 .sub_head::after {
   content: "";
@@ -502,7 +611,8 @@ export default {
   bottom: -12px;
 }
 
-.pb_head > span:nth-child(1) {
+.pb_head > span:nth-child(1),
+.pb_head > span:nth-child(3) {
   /* font-size: 16px; */
   font-size: 26px;
   cursor: pointer;
@@ -510,7 +620,8 @@ export default {
   /* color: #409eff; */
   color: #999;
 }
-.pb_head > span:nth-child(1):hover {
+.pb_head > span:nth-child(1):hover,
+.pb_head > span:nth-child(3):hover {
   color: #000;
 }
 .pb_head {
@@ -634,4 +745,11 @@ export default {
   padding: 20px;
   box-sizing: border-box;
 }
+
+.mbCss >>> .el-input__inner {
+  margin: 0 !important;
+}
+.student_search >>> .el-input {
+  width: auto !important;
+}
 </style>

src/components/pages/worksReport.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="pb_content"
+    style="
+      background: unset;
+      overflow: auto;
+      padding: 20px;
+      margin: 0;
+      box-sizing: border-box;
+    "
+  >
+    <div
+      style="
+        position: absolute;
+        width: 95%;
+        top: 0;
+        height: 100%;
+        overflow: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      "
+    >
+      <div
+        class="pb_content_body"
+        style="
+          background: #fff;
+          padding: 0px 25px;
+          box-sizing: border-box;
+          border-radius: 5px;
+        "
+      >
+        <div class="pb_head">
+          <!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
+          <span
+            @click="
+              goTo('/works?userid=' + userid + '&oid=' + oid + '&org=' + org)
+            "
+            >评价管理</span
+          >
+          <span class="sub_head">数据报告</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      org: this.$route.query.org,
+      oid: this.$route.query.oid,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.sub_head {
+  position: relative;
+  margin-left: 10px;
+}
+.sub_head::after {
+  content: "";
+  width: 100%;
+  background: #5a9cea;
+  height: 2px;
+  position: absolute;
+  left: 0;
+  bottom: -12px;
+}
+
+.pb_head > span:nth-child(1) {
+  font-size: 26px;
+  cursor: pointer;
+  color: #999;
+}
+.pb_head > span:nth-child(1):hover {
+  color: #000;
+}
+.pb_head {
+  margin: 0 !important;
+  width: 100% !important;
+}
+</style>