新增数据报告静态页面

src/components/pages/components/classReport.vue

@@ -0,0 +1,242 @@
+<template>
+  <div style="padding-bottom: 20px">
+    <div class="search">
+      <div class="student_search">
+        <div>班级筛选</div>
+        <el-select v-model="classChoose">
+          <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>
+      <div>
+        <div class="searchImg">
+          <img src="../../../assets/icon/search.png" alt="" />
+        </div>
+        <el-input v-model="sName" placeholder="请输入学生姓名或账号"></el-input>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column prop="cName" align="center" label="班级" min-width="25%">
+      </el-table-column>
+      <el-table-column
+        prop="course"
+        align="center"
+        label="课程"
+        min-width="25%"
+      >
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="25%">
+        <template>
+          <el-button size="mini" type="primary" @click="lookEvaStudent"
+            >报告</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      title="选择学生"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="650px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div>
+          <div class="student_search">
+            <div>筛选</div>
+            <el-select v-model="classChoose1">
+              <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>
+          <el-table
+            :data="studentJuri"
+            border
+            style="width: 100%; margin-top: 10px"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column
+              prop="sName"
+              align="center"
+              label="姓名"
+              min-width="25%"
+            >
+            </el-table-column>
+            <el-table-column label="选择" align="center" min-width="25%">
+              <template slot-scope="scope">
+                <input
+                  type="checkbox"
+                  :id="scope.row.id"
+                  :value="scope.row.sNmae"
+                  @change="isChooseStudent(scope.row.id)"
+                  v-model="checkboxList[scope.$index]"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sName: "",
+      classChoose: "",
+      classChoose1: "",
+      classJuri: [
+        { id: 1, name: "一年级一班" },
+        { id: 2, name: "一年级二班" },
+        { id: 3, name: "一年级三班" },
+        { id: 4, name: "一年级四班" },
+      ],
+      tableData: [
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+      ],
+      dialogVisible: false,
+      checkboxList: [],
+      isChooseList: [],
+      studentJuri: [
+        { id: 1, sName: "牛倩楠" },
+        { id: 2, sName: "徐嘉伟" },
+        { id: 3, sName: "小王" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    isChooseStudent(id) {
+      if (this.isChooseList.indexOf(id) != -1) {
+        this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
+      } else {
+        this.isChooseList.push(id);
+      }
+      this.$forceUpdate();
+    },
+    lookEvaStudent() {
+      this.checkboxList = [];
+      this.isChooseList = [];
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.check_diy >>> .el-dialog__body {
+  padding-bottom: 0;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 20px 0;
+}
+.search > div:nth-child(2) {
+  position: relative;
+}
+.searchImg {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  z-index: 9;
+  top: 8px;
+  left: 5px;
+}
+.searchImg > img {
+  width: 100%;
+  height: 100%;
+}
+.search > div:nth-child(2) >>> .el-input__inner {
+  width: 250px;
+  text-indent: 20px;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.student_search > div:nth-child(1) {
+  margin-right: 10px;
+}
+</style>

src/components/pages/components/courseReport.vue

@@ -0,0 +1,166 @@
+<template>
+  <div style="padding-bottom: 20px">
+    <div class="search">
+      <div class="sxBox">
+        <div class="student_search">
+          <div>班级筛选</div>
+          <el-select v-model="classChoose">
+            <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>
+        <div class="student_search">
+          <div>课程筛选</div>
+          <el-select v-model="courseChoose">
+            <el-option label="全部" value="">全部</el-option>
+            <el-option
+              v-for="(c, cIndex) in courseJuri"
+              :key="cIndex"
+              :value="c.id"
+              :label="c.name"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div>
+        <div class="searchImg">
+          <img src="../../../assets/icon/search.png" alt="" />
+        </div>
+        <el-input v-model="sName" placeholder="请输入学生姓名或账号"></el-input>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column prop="cName" align="center" label="班级" min-width="25%">
+      </el-table-column>
+      <el-table-column
+        prop="course"
+        align="center"
+        label="课程"
+        min-width="25%"
+      >
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="25%">
+        <template>
+          <el-button size="mini" type="primary">报告</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sName: "",
+      classChoose: "",
+      classJuri: [
+        { id: 1, name: "一年级一班" },
+        { id: 2, name: "一年级二班" },
+        { id: 3, name: "一年级三班" },
+        { id: 4, name: "一年级四班" },
+      ],
+      courseChoose: "",
+      courseJuri: [
+        { id: 1, name: "课程1" },
+        { id: 2, name: "课程2" },
+        { id: 3, name: "课程3" },
+        { id: 4, name: "课程4" },
+      ],
+      tableData: [
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+        {
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 20px 0;
+}
+.search > div:nth-child(2) {
+  position: relative;
+}
+.searchImg {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  z-index: 9;
+  top: 8px;
+  left: 5px;
+}
+.searchImg > img {
+  width: 100%;
+  height: 100%;
+}
+.search > div:nth-child(2) >>> .el-input__inner {
+  width: 250px;
+  text-indent: 20px;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-right: 10px;
+}
+.student_search > div:nth-child(1) {
+  margin-right: 10px;
+}
+.sxBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+</style>

src/components/pages/components/evaReport.vue

@@ -0,0 +1,270 @@
+<template>
+  <div style="padding-bottom: 20px">
+    <div class="search">
+      <div class="sxBox">
+        <div class="student_search">
+          <div>班级筛选</div>
+          <el-select v-model="classChoose">
+            <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>
+        <div class="student_search">
+          <div>课程筛选</div>
+          <el-select v-model="courseChoose">
+            <el-option label="全部" value="">全部</el-option>
+            <el-option
+              v-for="(c, cIndex) in courseJuri"
+              :key="cIndex"
+              :value="c.id"
+              :label="c.name"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
+      <div>
+        <div class="searchImg">
+          <img src="../../../assets/icon/search.png" alt="" />
+        </div>
+        <el-input v-model="sName" placeholder="请输入学生姓名或账号"></el-input>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column
+        prop="mEva"
+        align="center"
+        label="目标体系名称"
+        min-width="25%"
+      >
+      </el-table-column>
+      <el-table-column prop="cName" align="center" label="班级" min-width="25%">
+      </el-table-column>
+      <el-table-column
+        prop="course"
+        align="center"
+        label="课程"
+        min-width="25%"
+      >
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="25%">
+        <template>
+          <el-button size="mini" type="primary" @click="lookmbCourse"
+            >报告</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      title="选择学生"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="650px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div>
+          <el-table
+            :data="courseJuri1"
+            border
+            style="width: 100%; margin-top: 10px"
+            :row-class-name="tableRowClassName"
+          >
+            <el-table-column
+              prop="cName"
+              align="center"
+              label="课程名称"
+              min-width="25%"
+            >
+            </el-table-column>
+            <el-table-column label="选择" align="center" min-width="25%">
+              <template slot-scope="scope">
+                <input
+                  type="checkbox"
+                  :id="scope.row.id"
+                  :value="scope.row.sNmae"
+                  @change="isChooseStudent(scope.row.id, scope.$index)"
+                  v-model="checkboxList[scope.$index]"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sName: "",
+      classChoose: "",
+      classJuri: [
+        { id: 1, name: "一年级一班" },
+        { id: 2, name: "一年级二班" },
+        { id: 3, name: "一年级三班" },
+        { id: 4, name: "一年级四班" },
+      ],
+      courseChoose: "",
+      courseJuri: [
+        { id: 1, name: "课程1" },
+        { id: 2, name: "课程2" },
+        { id: 3, name: "课程3" },
+        { id: 4, name: "课程4" },
+      ],
+      courseJuri1: [
+        { id: 1, cName: "课程名称1" },
+        { id: 2, cName: "课程名称2" },
+        { id: 3, cName: "课程名称3" },
+        { id: 4, cName: "课程名称4" },
+      ],
+      tableData: [
+        {
+          mEva: "目标体系1",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3",
+        },
+        {
+          mEva: "目标体系2",
+          cName: "四年级二班",
+          course: "课程1/课程2",
+        },
+        {
+          mEva: "目标体系3",
+          cName: "四年级二班",
+          course: "课程1",
+        },
+        {
+          mEva: "目标体系4",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+        {
+          mEva: "目标体系5",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+      ],
+      dialogVisible: false,
+      checkboxList: [],
+      isChooseList: [],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    isChooseStudent(id) {
+      if (this.isChooseList.indexOf(id) != -1) {
+        this.isChooseList.splice(this.isChooseList.indexOf(id), 1);
+      } else {
+        this.isChooseList.push(id);
+      }
+      this.$forceUpdate();
+    },
+    lookmbCourse() {
+      this.checkboxList = [];
+      this.isChooseList = [];
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.check_diy >>> .el-dialog__body {
+  padding-bottom: 0;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 20px 0;
+}
+.search > div:nth-child(2) {
+  position: relative;
+}
+.searchImg {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  z-index: 9;
+  top: 8px;
+  left: 5px;
+}
+.searchImg > img {
+  width: 100%;
+  height: 100%;
+}
+.search > div:nth-child(2) >>> .el-input__inner {
+  width: 250px;
+  text-indent: 20px;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-right: 10px;
+}
+.student_search > div:nth-child(1) {
+  margin-right: 10px;
+}
+.sxBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+</style>

src/components/pages/components/stReport.vue

@@ -0,0 +1,258 @@
+<template>
+  <div style="padding-bottom: 20px">
+    <div class="search">
+      <div class="student_search">
+        <div>班级筛选</div>
+        <el-select v-model="classChoose">
+          <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>
+      <div>
+        <div class="searchImg">
+          <img src="../../../assets/icon/search.png" alt="" />
+        </div>
+        <el-input v-model="sName" placeholder="请输入学生姓名或账号"></el-input>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      :row-class-name="tableRowClassName"
+    >
+      <el-table-column
+        prop="sName"
+        align="center"
+        label="学生姓名"
+        min-width="20%"
+      >
+      </el-table-column>
+      <el-table-column prop="cName" align="center" label="班级" min-width="20%">
+      </el-table-column>
+      <el-table-column
+        prop="course"
+        align="center"
+        label="课程"
+        min-width="20%"
+      >
+      </el-table-column>
+      <el-table-column label="操作" align="center" min-width="20%">
+        <template>
+          <el-button size="mini" type="primary" @click="lookEvaCourse"
+            >报告</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      title="选择报告"
+      :visible.sync="dialogVisible"
+      :append-to-body="true"
+      width="650px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div v-for="(m, mIndex) in mbCourse" :key="mIndex">
+          <div>{{ m.name }}</div>
+          <el-checkbox-group v-model="checkboxList" class="people_name">
+            <div
+              v-for="item in mbCourse[mIndex].course"
+              :key="item.id"
+              class="p_box"
+            >
+              <el-checkbox :label="item.id">
+                {{ item.name }}
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sName: "",
+      classChoose: "",
+      classJuri: [
+        { id: 1, name: "一年级一班" },
+        { id: 2, name: "一年级二班" },
+        { id: 3, name: "一年级三班" },
+        { id: 4, name: "一年级四班" },
+      ],
+      tableData: [
+        {
+          sName: "徐家伟",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3",
+        },
+        {
+          sName: "牛倩楠",
+          cName: "四年级二班",
+          course: "课程1/课程2",
+        },
+        {
+          sName: "小李",
+          cName: "四年级二班",
+          course: "课程1",
+        },
+        {
+          sName: "小王",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+        {
+          sName: "小胡",
+          cName: "四年级二班",
+          course: "课程1/课程2/课程3/课程4",
+        },
+      ],
+      dialogVisible: false,
+      checkboxList: [],
+      mbCourse: [
+        {
+          id: 1,
+          name: "目标体系名称1",
+          course: [
+            { id: 11, name: "设计并制作FEG智能车(5EX课程设计模型)" },
+            { id: 12, name: "韶关市信息科技教师培训" },
+          ],
+        },
+        {
+          id: 2,
+          name: "目标体系名称2",
+          course: [
+            { id: 21, name: "设计并制作FEG智能车(5EX课程设计模型)1111" },
+            { id: 22, name: "韶关市信息科技教师培训1111" },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+    handleClose(done) {
+      done();
+    },
+    lookEvaCourse() {
+      this.dialogVisible = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
+.check_diy >>> .el-dialog__body {
+  padding-bottom: 0;
+}
+.dialog_diy >>> .el-dialog__body,
+.dialog_diy >>> .el-dialog__footer {
+  background: #fafafa;
+}
+.search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 20px 0;
+}
+.search > div:nth-child(2) {
+  position: relative;
+}
+.searchImg {
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  z-index: 9;
+  top: 8px;
+  left: 5px;
+}
+.searchImg > img {
+  width: 100%;
+  height: 100%;
+}
+.search > div:nth-child(2) >>> .el-input__inner {
+  width: 250px;
+  text-indent: 20px;
+}
+.el-table >>> .even_row {
+  background-color: #f1f1f1;
+}
+.student_search {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.student_search > div:nth-child(1) {
+  margin-right: 10px;
+}
+.people_name {
+  display: flex;
+  justify-content: flex-start;
+  padding: 20px 0 0 25px;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.p_box {
+  position: relative;
+}
+
+.people_name >>> .el-checkbox {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.people_name >>> .el-checkbox__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: calc(100%);
+}
+
+.people_name2 >>> .el-checkbox__label {
+  width: calc(100% - 130px);
+}
+</style>

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

@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  props:["toolTypeArray"],
   data() {
     return {
       chartObj: null,
@@ -30,11 +31,12 @@ export default {
             type: "pie",
             radius: "50%",
             data: [
-              { value: 34, name: "思维类" },
-              { value: 46, name: "测试类" },
-              { value: 67, name: "技术类" },
-              { value: 34, name: "学科类" },
-              { value: 146, name: "互动类" },
+              { value: 0, name: "互动类" },
+              { value: 0, name: "思维类" },
+              { value: 0, name: "评价类" },
+              { value: 0, name: "编程类" },
+              { value: 0, name: "学科类" },
+              { value: 0, name: "其他" },
             ],
             label: {
               formatter: "{b}\n{c}",
@@ -53,7 +55,9 @@ export default {
   },
   methods: {
     getInfo() {
-      this.setChart();
+      if (this.toolTypeArray && this.toolTypeArray[0]) {
+        this.setChart();
+      }
     },
     setChart() {
       // 雷达图显示的标签
@@ -68,6 +72,9 @@ export default {
           //   document.getElementById("#charts_canvas")
         );
         // 初始化雷达图
+        for(var i=0;i<this.toolTypeArray[0].length;i++){
+          this.option.series[0].data[i].value = this.toolTypeArray[0][i];
+        }
         this.chartObj = chartObj;
         this.chartObj.setOption(this.option);
       });
@@ -80,8 +87,11 @@ export default {
     },
   },
   watch: {
-    userid(newValue, oldValue) {
-      this.getInfo();
+    toolTypeArray: {
+      handler: function (newVal, oldVal) {
+        this.getInfo();
+      },
+      deep: true,
     },
   },
   mounted() {

src/components/pages/myReport/myReport.vue

@@ -80,7 +80,7 @@
               </div>
               <div>工具类型分析</div>
             </div>
-            <ToolTypeAna class="r_box"></ToolTypeAna>
+            <ToolTypeAna class="r_box" :toolTypeArray="tTypeArray"></ToolTypeAna>
           </div>
         </div>
       </div>
@@ -137,6 +137,7 @@ export default {
       stuMessage: {}, //基础信息
       cEvaScore: [], //课程评价得分
       cTypeAnaList: [], //课程类型分析
+      tTypeArray: [], //工具类型分析
     };
   },
   methods: {
@@ -216,6 +217,51 @@ export default {
               }
             }
           }
+          var toolList = [
+            [10, 49], //互动类
+            [7, 1, 52, 3], //思维类
+            [4, 45, 15, 16, 50, 40, 41, 47, 48], //评价类
+            [18, 21, 22, 23, 24, 32, 57], //编程类
+            [28, 37, 38, 31, 39, 58, 59, 60], //学科类
+            [26, 25], //其他
+          ];
+          var toolAllArray = [];
+          for (var p = 0; p < toolList.length; p++) {
+            toolAllArray[p] = [];
+            for (var i = 0; i < cList.length; i++) {
+              for (var j = 0; j < cList[i].length; j++) {
+                for (
+                  var k = 0;
+                  k < cList[i][j].chapterInfo[0].taskJson.length;
+                  k++
+                ) {
+                  for (
+                    var q = 0;
+                    q <
+                    cList[i][j].chapterInfo[0].taskJson[k].toolChoose.length;
+                    q++
+                  ) {
+                    if (
+                      toolList[p].indexOf(
+                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
+                          .tool[0]
+                      ) != -1
+                    ) {
+                      toolAllArray[p].push(
+                        cList[i][j].chapterInfo[0].taskJson[k].toolChoose[q]
+                          .tool[0]
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+          var tTypeAnaArray = [];
+          for (var i = 0; i < toolAllArray.length; i++) {
+            tTypeAnaArray.push(toolAllArray[i].length);
+          }
+          this.tTypeArray.push(tTypeAnaArray);
 
           for (var i = 0; i < sWorksList.length; i++) {
             for (var j = 0; j < courseList.length; j++) {

src/components/pages/worksReport.vue

@@ -39,18 +39,49 @@
           >
           <span class="sub_head">数据报告</span>
         </div>
+        <div class="pb_child_head">
+          <div @click="wrType = 0" :class="{ iswrClick: wrType == 0 }">
+            学生报告
+          </div>
+          <div @click="wrType = 1" :class="{ iswrClick: wrType == 1 }">
+            班级报告
+          </div>
+          <div @click="wrType = 2" :class="{ iswrClick: wrType == 2 }">
+            课程报告
+          </div>
+          <div @click="wrType = 3" :class="{ iswrClick: wrType == 3 }">
+            目标评价
+          </div>
+        </div>
+        <div>
+          <StReport v-if="wrType == 0"></StReport>
+          <ClassReport v-if="wrType == 1"></ClassReport>
+          <CourseReport v-if="wrType == 2"></CourseReport>
+          <EvaReport v-if="wrType == 3"></EvaReport>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import StReport from "./components/stReport";
+import ClassReport from "./components/classReport";
+import CourseReport from "./components/courseReport";
+import EvaReport from "./components/evaReport";
 export default {
+  components: {
+    StReport,
+    ClassReport,
+    CourseReport,
+    EvaReport,
+  },
   data() {
     return {
       userid: this.$route.query.userid,
       org: this.$route.query.org,
       oid: this.$route.query.oid,
+      wrType: 0,
     };
   },
   methods: {
@@ -88,4 +119,20 @@ export default {
   margin: 0 !important;
   width: 100% !important;
 }
+.pb_child_head {
+  padding: 10px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.pb_child_head > div {
+  margin-right: 20px;
+  padding-bottom: 10px;
+  cursor: pointer;
+}
+.iswrClick {
+  border-bottom: 2px solid #238bfc;
+  color: #1684fc;
+}
 </style>

src/router/index.js

@@ -81,6 +81,10 @@ import courseTypeAna from '@/components/pages/myReport/components/courseTypeAna'
 import toolTypeAna from '@/components/pages/myReport/components/toolTypeAna'
 import mrEva from '@/components/pages/myReport/components/mrEva'
 import inviteLogin from '@/components/pages/inviteLogin/inviteLogin'
+import stReport from '@/components/pages/components/stReport'
+import classReport from '@/components/pages/components/classReport'
+import courseReport from '@/components/pages/components/courseReport'
+import evaReport from '@/components/pages/components/evaReport'
 
 Vue.use(Router).use(ElementUI)
 
@@ -696,6 +700,38 @@ export default new Router({
             meta: {
                 requireAuth: '' // 不需要鉴权
             }
-        }
+        },
+        {
+            path: '/stReport',
+            name: 'stReport',
+            component: stReport,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/classReport',
+            name: 'classReport',
+            component: classReport,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/courseReport',
+            name: 'courseReport',
+            component: courseReport,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
+        {
+            path: '/evaReport',
+            name: 'evaReport',
+            component: evaReport,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
+        },
     ]
 })