bjs

src/components/pages/liyuan/bjspersonTop.vue

@@ -0,0 +1,1514 @@
+<template>
+  <div class="teacherDevelop">
+    <div class="topTalent_container">
+      <div class="topTalent_bg">
+        <div class="topTalent_bg_title">
+          欢迎回来，{{ userInfo.name ? userInfo.name[0] : "" }}老师
+        </div>
+        <div class="topTalent_bg_content">
+          探索潜力，成就未来。拔尖人才选拔与培养系统致力于打造卓越的教育生态，助力创新人才的挖掘与培养，赋能师生共同成长。
+        </div>
+        <div class="topTalent_bg_decor">
+          <div class="topTalent_bg_circle circle_1"></div>
+          <div class="topTalent_bg_circle circle_2"></div>
+        </div>
+      </div>
+      <div>
+        <div style="font-weight: 600;">功能导航</div>
+        <div class="cardBox">
+          <div v-for="item in cardArray" :key="item.title" @click="goToPage(item.to)" class="cardItem">
+            <img :src="item.icon" alt="" />
+            <div>{{ item.title }}</div>
+          </div>
+        </div>
+      </div>
+
+
+      <!-- 表单区域 -->
+      <div class="taskContainer">
+        <div class="taskTitle">
+          <div class="taskTitle_left">
+            <span style="font-weight: 600;">评测任务</span>
+            <div class="taskBox">
+              <div
+                @click="getWorks('')"
+                class="taskItem_box"
+                :class="{ taskItem_active: activeId == '' }"
+              >
+                全部
+              </div>
+              <div
+                v-for="(item, index) in tagArrList"
+                :key="index"
+                class="taskItem_box"
+                @click="getWorks(item.id)"
+                :class="{ taskItem_active: item.id == activeId }"
+              >
+                <div class="taskItem">{{ item.name }}</div>
+              </div>
+            </div>
+          </div>
+          <div>共{{ worksArray.length }}项任务</div>
+        </div>
+        <div class="check_box" v-loading="loading">
+          <div
+            class="noneData"
+            v-if="!worksArray.length"
+            style="text-align: center; margin-top: 20px;"
+          >
+            暂无数据
+          </div>
+          <template v-else>
+            <div
+              class="test_panel"
+              v-for="(item, index) in worksArray"
+              :key="index"
+            >
+              <div class="test_panel_title">
+                <div
+                  class="title"
+                  :style="{
+                    paddingLeft:
+                      item.array.length > 0 || item.carray.length > 0
+                        ? '0'
+                        : '30px'
+                  }"
+                  @click="openWork(index)"
+                >
+                  <span
+                    class="open"
+                    :class="{ active: item.open }"
+                    v-if="item.array.length > 0 || item.carray.length > 0"
+                  ></span>
+                  <el-tooltip
+                    :content="item.title"
+                    placement="top"
+                    effect="dark"
+                  >
+                    <span class="titleN">{{ item.title }}</span>
+                  </el-tooltip>
+                </div>
+                <div class="state">
+                  <span
+                    :class="{
+                      is: isOK(item.array) == '已完成',
+                      no: isOK(item.array) == '待办'
+                    }"
+                  >
+                    {{ isOK(item.array) }}
+                    <!-- {{ item.array.length > 0 ? "已完成" : "未完成" }} -->
+                  </span>
+                </div>
+                <div class="time">
+                  <span
+                    v-if="item.overtime"
+                    :class="{ isDead: isDeadlinePassed(item.overtime) }"
+                    >截止时间：{{ item.overtime }}</span
+                  >
+                  <span v-else></span>
+                </div>
+                <div
+                  class="creator"
+                  :style="{
+                    paddingRight: !item.carray.length > 0 ? '0' : '0px'
+                  }"
+                >
+                  <el-tooltip
+                    :content="item.username"
+                    placement="top"
+                    effect="dark"
+                  >
+                    <span>创建者：{{ item.username }}</span>
+                  </el-tooltip>
+                </div>
+                <div
+                  class="editBtn2"
+                  :style="`${item.open ? 'display:flex' : ''}`"
+                  v-if="!item.carray.length > 0"
+                >
+                  <span v-if="item.array.length === 0">去填写</span>
+                  <span v-else>再填一份</span>
+                </div>
+                <div
+                  @click="doTest2(item.courseid)"
+                  class="editBtn"
+                  :style="`${item.open ? 'display:flex' : ''}`"
+                  v-if="!item.carray.length > 0"
+                >
+                  <span v-if="item.array.length === 0">去填写</span>
+                  <span v-else>再填一份</span>
+                </div>
+              </div>
+              <div class="test_panel_box" v-if="item.open">
+                <div class="test_add_box" v-if="item.array">
+                  <div
+                    class="test"
+                    v-for="(test, index) in item.array"
+                    :key="test.id"
+                  >
+                    <div class="time">
+                      <span v-if="!test.editName && !test.name"
+                        >提交记录{{ item.array.length - index }}</span
+                      >
+                      <span v-if="!test.editName && test.name">{{
+                        test.name
+                      }}</span>
+                      <el-input
+                        :ref="`changeName_${test.id}`"
+                        v-if="test.editName"
+                        v-model="test.name"
+                        @blur="changeNameUpdate(test.courseid, test.id)"
+                        @keyup.enter.native="
+                          changeNameUpdate(test.courseid, test.id)
+                        "
+                      ></el-input>
+                    </div>
+                    <div class="testType">
+                      <span :class="`typeStatus_${test.type}`">{{
+                        typeStatusList[test.type]
+                      }}</span>
+                    </div>
+                    <div class="utime">
+                      <span>{{ test.utime }}</span>
+                    </div>
+                    <div class="mask">
+                      <div
+                        @click="doTest(test.courseid, test.id)"
+                        v-if="test.isReview != 1"
+                      >
+                        <span>编辑</span>
+                      </div>
+                      <div
+                        @click="deleteTest(test.id)"
+                        class="delete"
+                        v-if="test.isReview != 1"
+                      >
+                        <span>删除</span>
+                      </div>
+                      <div
+                        @click="changeName(test.courseid, test.id)"
+                        v-if="test.isReview != 1"
+                      >
+                        <span>重命名</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="test_add_box"
+                  v-else-if="item.carray"
+                  v-loading="!item.carray.length"
+                >
+                  <div
+                    class="test courseLength"
+                    v-for="(course, index) in item.carray"
+                    :key="index"
+                  >
+                    <div class="time">
+                      <el-tooltip
+                        :content="course.title + '-' + course.username"
+                        placement="top"
+                        effect="dark"
+                      >
+                        <span>{{ course.title }}-{{ course.username }}</span>
+                      </el-tooltip>
+                    </div>
+                    <div class="finishBox" :class="{ is: course.array.length }">
+                      <span class="finish"></span>
+                      <span v-if="course.array.length">已评分</span>
+                      <span v-else>未评分</span>
+                    </div>
+                    <div class="utime" style="margin-left: 30px;">
+                      <span v-if="course.array.length">{{
+                        course.array[0].utime
+                      }}</span>
+                      <span v-else></span>
+                    </div>
+                    <div class="mask">
+                      <div @click="doTest3(item, course)">
+                        <span>评分</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topBar from "./components/topBar";
+import card from "./components/card.vue";
+export default {
+  components: {
+    topBar,
+    card
+  },
+  computed: {
+    isOK() {
+      return function(array) {
+        // console.log('array',array);
+        let result = "";
+        if (array.length > 0) {
+          let k = array.filter(e => e.type == 1 || e.type == 4);
+          if (k.length) {
+            result = "待办";
+          } else {
+            result = "已完成";
+          }
+        } else {
+          result = "待办";
+        }
+
+        return result;
+      };
+    },
+    // 进行权限判断一些只有管理员能看
+    cardData() {
+      return val => {
+        if (this.tType == 1) return val
+
+        let com = val.filter(
+          e => e.type == 0
+        );
+        return com;
+      };
+    }
+  },
+  data() {
+    return {
+      role: this.$route.query.role,
+      userid: this.$route.query.userid,
+      tType:this.$route.query.tType,
+      userInfo: {},
+      activeId: "",
+      loading: false,
+
+      // 标签数组
+      tagArrList: [],
+
+      // 任务数组
+      worksArray: [],
+      typeStatusList: ["", "未提交", "已提交", "", "已退回"],
+
+      cardArray: [
+        {
+          title: "课程中心",
+          icon: require("../../../assets/icon/liyuan/niandukaohe.svg"),
+          type: 0,
+          to: "/courseCenter",
+        },
+        {
+          title: "人才数据库",
+          icon: require("../../../assets/icon/liyuan/zhinengbiaodan.svg"),
+          type: 1,
+          to: "/sassPlatform",
+          sassPlatFormTypeId: "eefb7195-8ee7-11f0-9c7b-005056924926",
+          tType: this.$route.query.tType
+        },
+        {
+          title: "学生画像",
+          icon: require("../../../assets/icon/liyuan/jiaoshihuaxiang.svg"),
+          type: 0,
+          to: "/testReview",
+          tType: this.$route.query.tType
+        }
+      ]
+    };
+  },
+  methods: {
+    goToPage(to) {
+      if (to == '/testReview') return this.$message.info('该功能尚未上线，敬请期待')
+      try {
+          window.topU.gotype = this.$route.path
+          console.log('top',this.$route.path);
+      } catch (error) {
+          console.log(error);
+      }
+      let params = {
+        userid: this.userid,
+        oid: this.userInfo.organizeid,
+        org: this.userInfo.org,
+        role: this.role,
+        tType: this.$route.query.type,
+        sassPlatFormTypeId:'ce4f1224-37a5-11f1-bcd9-005056924926'
+      };
+      this.$router.push({
+        path: to,
+        query: params
+      });
+    },
+    getPageBase(type = 1) {
+      let params = {
+        typ: type,
+        org: this.org,
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestExamineBase", params)
+        .then(res => {
+          this.ExamineBase = res.data[0];
+          if (type == 1 && !res.data[0].length) {
+            this.getPageBase(2);
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    isDeadlinePassed(deadline) {
+      let _line = new Date(deadline);
+      const currentDate = new Date();
+      return currentDate > _line;
+    },
+    checkType(type) {
+      this.type = type;
+      this.getWorks();
+    },
+    selectTestType(type) {
+      let params = {
+        oid: this.oid
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestType", params)
+        .then(res => {
+          this.typeArray = res.data[0];
+          if (type == 1) {
+            this.type = "";
+          }
+          this.getWorks();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+ 
+
+    returnA() {
+      this.$router.push(
+        "/testStudent?userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&role=" +
+          this.role
+      );
+    },
+    checkTest(cid, tid) {
+      this.$router.push(
+        "/checkTest?cid=" +
+          cid +
+          "&tid=" +
+          tid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
+      );
+    },
+    doTest(cid, tid) {
+      this.$router.push(
+        "/doTest?cid=" +
+          cid +
+          "&tid=" +
+          tid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
+      );
+    },
+    doTest2(cid) {
+      this.$router.push(
+        "/doTest?cid=" +
+          cid +
+          "&userid=" +
+          this.userid +
+          "&oid=" +
+          this.oid +
+          "&org=" +
+          this.org +
+          "&type=3" +
+          "&role=" +
+          this.role
+      );
+    },
+    doTest3(item, course) {
+      if (course.array.length) {
+        this.$router.push(
+          "/doTest?cid=" +
+            item.courseid +
+            "&tid=" +
+            course.array[0].id +
+            "&userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org +
+            "&type=3" +
+            "&role=" +
+            this.role
+        );
+      } else {
+        this.$router.push(
+          "/doTest?cid=" +
+            item.courseid +
+            "&userid=" +
+            this.userid +
+            "&oid=" +
+            this.oid +
+            "&org=" +
+            this.org +
+            "&type=3" +
+            "&courseid=" +
+            course.courseid +
+            "&role=" +
+            this.role
+        );
+      }
+    },
+    copyTest(tid) {
+      let params = [
+        {
+          tid: tid,
+          uid: this.userid
+        }
+      ];
+      this.ajax
+        .post(this.$store.state.api + "copyTestWorks", params)
+        .then(res => {
+          this.$message.success("复制成功");
+          this.getWorks();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    deleteTest(tid) {
+      let _this = this;
+      _this
+        .$confirm("确定删除此填写的表单么？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+        .then(() => {
+          let params = [
+            {
+              tid: tid
+            }
+          ];
+          _this.ajax
+            .post(_this.$store.state.api + "deleteTestCourseWorks", params)
+            .then(res => {
+              _this.$message.success("删除成功");
+              _this.getWorks();
+            })
+            .catch(err => {
+              console.error(err);
+            });
+        })
+        .catch(() => {
+          return;
+        });
+    },
+    changeShowType(value) {
+      this.checkTypeValue = value;
+      this.getWorks();
+    },
+    changeNameUpdate(courseId, testId) {
+      let array = this.worksArray.find(i => i.courseid == courseId);
+      if (array) {
+        array = array.array;
+        array.find(i => i.id == testId).editName = false;
+        this.$forceUpdate();
+        let data = array.find(i => i.id == testId);
+        let params = [
+          {
+            uid: this.userid,
+            testId: testId,
+            newName: data.name
+          }
+        ];
+
+        this.ajax
+          .post(
+            this.$store.state.api + "update_testCourseWorksNameById",
+            params
+          )
+          .then(res => {
+            if (res.data == 1) {
+              this.$message.success("修改成功");
+            } else {
+              this.$message.error("修改失败");
+              array.find(i => i.id == testId).name = "";
+            }
+          });
+      }
+    },
+    changeName(courseId, testId) {
+      let array = this.worksArray.find(i => i.courseid == courseId);
+      if (array) {
+        array = array.array;
+        array.find(i => i.id == testId).editName = true;
+        this.$forceUpdate();
+        this.$nextTick(() => {
+          console.log(this.$refs[`changeName_${testId}`]);
+          this.$refs[`changeName_${testId}`][0].focus();
+        });
+      }
+    },
+    getTasktag() {
+      let params = {
+        oid: ""
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestType_liYuan", params)
+        .then(res => {
+          let _data = res.data[0];
+          this.tagArrList = _data.filter(
+            e => e.pid == "ce4f1224-37a5-11f1-bcd9-005056924926"
+          );
+
+          this.getWorks("");
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+    getWorks(id) {
+      this.activeId = id;
+      this.loading = true;
+      let allid = [];
+      if (this.tagArrList.length) {
+        allid = this.tagArrList.map(item => item.id);
+        allid.push("ce4f1224-37a5-11f1-bcd9-005056924926");
+      }
+      let params = {
+        uid: this.userid,
+        typeid: this.activeId ? this.activeId : allid.join(",")
+      };
+      this.ajax
+        .get(this.$store.state.api + "getTestWorksPerson_2type", params)
+        .then(res => {
+          let array = res.data[0];
+          let array2 = res.data[1];
+          // 用于存储归类后的数据的对象
+          let worksArray = {};
+
+          // 遍历原始数据，根据 parentId 进行分组
+          array2.forEach(item => {
+            // console.log(item.chapters);
+            worksArray[item.courseId] = {
+              id: item.id,
+              courseid: item.courseId,
+              title: item.title,
+              time: item.time,
+              utime: item.utime,
+              overtime: item.overtime,
+              username: item.username,
+              chapters: item.chapters,
+              brief: item.brief,
+              typeid: item.typeid,
+              array:
+                item.typeid == "dda9728e-5f11-469e-89ee-aca518daf123" ? 0 : [],
+              carray: [],
+              open: false
+            };
+          });
+          worksArray = Object.values(worksArray);
+          worksArray.forEach(async el => {
+            if (el.typeid == "dda9728e-5f11-469e-89ee-aca518daf123") {
+              let courseJson = this.returnCourseJSON(el.chapters);
+              if (courseJson && courseJson.courses.length) {
+                let courses = courseJson.courses.join(",");
+                let _res = await this.getAllCourse(courses);
+                console.log(_res);
+                let _carray = [];
+                for (var i = 0; i < _res.length; i++) {
+                  _carray.push({
+                    courseid: _res[i].courseId,
+                    title: _res[i].title,
+                    username: _res[i].username,
+                    array: []
+                  });
+                }
+                el.carray = _carray;
+              }
+            }
+
+            array.forEach(el2 => {
+              if (
+                el.courseid == el2.courseid &&
+                el.typeid != "dda9728e-5f11-469e-89ee-aca518daf123"
+              ) {
+                el.array.push(el2);
+              }
+
+              if (
+                el.courseid == el2.courseid &&
+                el.typeid == "dda9728e-5f11-469e-89ee-aca518daf123"
+              ) {
+                let courseid = this.returnCourseId(el2.courseJson);
+                for (var c = 0; c < el.carray.length; c++) {
+                  if (el.carray[c].courseid == courseid) {
+                    el.carray[c].array.push(el2);
+                    break;
+                  }
+                }
+              }
+            });
+          });
+
+          this.worksArray = worksArray;
+          this.loading = false;
+
+          this.$forceUpdate();
+        })
+        .catch(err => {
+          this.loading = false;
+          console.error(err);
+        });
+    },
+    returnCourseId(array) {
+      let _array = JSON.parse(array);
+      let courseJson = "";
+      s: for (var j = 0; j < _array.length; j++) {
+        let el = _array[j];
+        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
+          for (var k2 = 0; k2 < el.array.length; k2++) {
+            let item = el.array[k2];
+            console.log(k2);
+            if (item.ttype == 2 && item.array.length > 0) {
+              for (var z = 0; z < item.array.length; z++) {
+                let item2 = item.array[z];
+                if (
+                  item2.ttype == 1 &&
+                  item2.type == 6 &&
+                  item2.json &&
+                  item2.json.answer2
+                ) {
+                  courseJson = item2.json.answer2;
+                  break s;
+                }
+              }
+            } else if (
+              item.ttype == 1 &&
+              item.type == 6 &&
+              item.json &&
+              item.json.answer2
+            ) {
+              courseJson = item.json.answer2;
+              break s;
+            }
+          }
+        } else if (
+          el.ttype == 1 &&
+          el.type == 6 &&
+          el.json &&
+          el.json.answer2
+        ) {
+          courseJson = el.json.answer2;
+          break s;
+        }
+      }
+      return courseJson;
+    },
+    async getAllCourse(id) {
+      let params = {
+        cid: id
+      };
+      let res = await this.ajax.get(
+        this.$store.state.api + "getCourseInfoTestAll",
+        params
+      );
+      return res.data[0];
+    },
+    returnCourseJSON(array) {
+      let _array = JSON.parse(array);
+      let courseJson = "";
+      s: for (var j = 0; j < _array.length; j++) {
+        let el = _array[j];
+        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
+          for (var k2 = 0; k2 < el.array.length; k2++) {
+            let item = el.array[k2];
+            console.log(k2);
+            if (item.ttype == 2 && item.array.length > 0) {
+              for (var z = 0; z < item.array.length; z++) {
+                let item2 = item.array[z];
+                if (item2.ttype == 1 && item2.type == 6 && item2.json) {
+                  courseJson = item2.json;
+                  break s;
+                }
+              }
+            } else if (item.ttype == 1 && item.type == 6 && item.json) {
+              courseJson = item.json;
+              break s;
+            }
+          }
+        } else if (el.ttype == 1 && el.type == 6 && el.json) {
+          courseJson = el.json;
+          break s;
+        }
+      }
+      return courseJson;
+    },
+    goTo(path, cid) {
+      // console.log('cid',cid);
+      try {
+        window.topU.gotype = this.$route.path;
+        console.log("top", this.$route.path);
+      } catch (error) {
+        console.log(error);
+      }
+      // console.log('path',path);
+      let query = {
+        cid: cid,
+        userid: this.userid,
+        oid: this.userInfo.organizeid,
+        org: this.userInfo.org,
+        role: this.userInfo.role,
+        type: 3
+      };
+      this.$router.push({ path: path, query: query });
+    },
+    openWork(index) {
+      if (
+        this.worksArray[index].array.length === 0 &&
+        this.worksArray[index].carray.length === 0
+      ) {
+        return;
+      }
+      this.worksArray[index].open = !this.worksArray[index].open;
+      this.$forceUpdate();
+    },
+    async getData() {
+      let params = { uid: this.userid };
+      this.ajax
+        .get(this.$store.state.api + "selectliyuanUserInfo", params)
+        .then(res => {
+          this.userInfo = res.data[0][0];
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
+  },
+  mounted() {
+    this.getTasktag();
+    this.getData();
+  }
+};
+</script>
+
+<style scoped>
+.teacherDevelop {
+  width: 100%;
+  min-height: 100%;
+  padding: 40px 90px;
+  box-sizing: border-box;
+  background: #fafafa;
+}
+.topTalent_container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.taskContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.taskTitle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.taskTitle_left {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.taskBox {
+  display: flex;
+  gap: 10px;
+  background: #f3f4f6;
+  border-radius: 5px;
+  padding: 3px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+}
+.cardBox {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+  width: 100%;
+  margin-top: 20px;
+}
+.topTalent_bg {
+  width: 100%;
+  background: linear-gradient(90deg, #2563eb 15%, #4239cb 100%);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  position: relative;
+  overflow: hidden;
+}
+.topTalent_bg_title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.topTalent_bg_content {
+  width: 500px;
+  font-size: 16px;
+  color: #c0cff8;
+  font-weight: 400;
+}
+
+.topTalent_bg_decor {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  width: 220px;
+  height: 100%;
+  pointer-events: none;
+}
+.topTalent_bg_circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+}
+.topTalent_bg_circle.circle_1 {
+  width: 140px;
+  height: 140px;
+  right: -20%;
+  top: -50%;
+}
+.topTalent_bg_circle.circle_2 {
+  width: 90px;
+  height: 90px;
+  right: 30px;
+  top: 60px;
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+.cardItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  cursor: pointer;
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+.cardItem img {
+  width: 60px;
+  height: 60px;
+}
+.taskItem_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  box-sizing: border-box;
+  cursor: pointer;
+  &:hover {
+    background: #fff;
+  }
+}
+.taskItem_active {
+  background: #fff;
+  color: #4777ed;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+}
+.taskList_container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #fff;
+  border-radius: 10px;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
+}
+.Item_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  font-size: 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e5e7eb;
+}
+.sleft {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.redPoint {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.taskTitle_text {
+  font-size: 14px;
+  font-weight: 600;
+}
+.taskType {
+  font-size: 10px;
+  color: #6088f0;
+  background: #eff6ff;
+  padding: 3px 5px;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+.time_box {
+  font-size: 12px;
+  color: #989da5;
+  padding: 3px 5px;
+  border-radius: 5px;
+  margin-top: 3px;
+  box-sizing: border-box;
+}
+.write_btn {
+  font-size: 14px;
+  color: #4777ed;
+  padding: 5px 10px;
+  border-radius: 25px;
+  box-sizing: border-box;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #eff6ff;
+  cursor: pointer;
+}
+.write_btn2 {
+  font-size: 14px;
+  color: #747a88;
+  padding: 5px 10px;
+  border-radius: 25px;
+  box-sizing: border-box;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #f3f4f6;
+}
+.i_body_box {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  background: #fff;
+  flex-direction: column;
+}
+
+.check_nav {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  padding: 0;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: auto;
+  padding: 0 90px;
+}
+
+.check_nav > .nav {
+  width: 120px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(167, 167, 167);
+  /* background: #000000; */
+  cursor: pointer;
+  min-width: fit-content;
+  margin-right: 10px;
+}
+
+.check_nav > .active {
+  color: #3681fc;
+  background: rgb(248, 250, 254);
+  border-radius: 10px 10px 0 0;
+}
+
+.check_nav > .all::before,
+.check_nav > .gr::before,
+.check_nav > .md::before,
+.check_nav > .jy::before,
+.check_nav > .bj::before,
+.check_nav > .yy::before {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  background-size: 100% 100%;
+  margin-right: 5px;
+}
+
+.check_nav > .all::before {
+  background-image: url("../../../assets/icon/test/all_icon.png");
+}
+
+.check_nav > .active.all::before {
+  background-image: url("../../../assets/icon/test/all_icon_active.png");
+}
+
+.check_nav > .gr::before {
+  background-image: url("../../../assets/icon/test/gr_icon.png");
+}
+
+.check_nav > .active.gr::before {
+  background-image: url("../../../assets/icon/test/gr_icon_active.png");
+}
+
+.check_nav > .md::before {
+  background-image: url("../../../assets/icon/test/md_icon.png");
+}
+
+.check_nav > .active.md::before {
+  background-image: url("../../../assets/icon/test/md_icon_active.png");
+}
+
+.check_nav > .jy::before {
+  background-image: url("../../../assets/icon/test/jy_icon.png");
+}
+
+.check_nav > .active.jy::before {
+  background-image: url("../../../assets/icon/test/jy_icon_active.png");
+}
+
+.check_nav > .yy::before {
+  background-image: url("../../../assets/icon/test/yy_icon.png");
+}
+
+.check_nav > .active.yy::before {
+  background-image: url("../../../assets/icon/test/yy_icon_active.png");
+}
+
+.check_nav > .bj::before {
+  background-image: url("../../../assets/icon/test/bj_icon.png");
+}
+
+.check_nav > .active.bj::before {
+  background-image: url("../../../assets/icon/test/bj_icon_active.png");
+}
+
+.check_box {
+  height: calc(100% - 50px);
+  overflow: auto;
+  padding: 0 0 20px;
+  box-sizing: border-box;
+}
+
+.test_panel {
+  width: calc(100% - 5px);
+  margin: 20px auto 0;
+  background: #fff;
+  border-radius: 10px;
+  /* height: 300px; */
+  overflow: hidden;
+  box-shadow: 0 2px 5px 1px #0001;
+}
+
+.test_panel:hover {
+  box-shadow: 0 0 2px 1px #3681fc;
+}
+
+.test_panel:hover > .test_panel_title > .title {
+  color: #5996fd;
+}
+
+.test_panel_title:hover > .editBtn {
+  display: flex;
+}
+.test_panel_title:hover > .editBtn2 {
+  display: flex;
+}
+
+/* .test_panel + .test_panel {
+  margin-top: 15px;
+} */
+
+.test_panel_title {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+  /* justify-content: space-between; */
+  /* padding: 0 20px; */
+  box-sizing: border-box;
+  /* border-bottom: 2px solid #f0f0f0; */
+}
+
+.test_panel_title > .title {
+  display: flex;
+  align-items: center;
+  width: 300px;
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.test_panel_title > .title > .open {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  background-image: url("../../../assets/icon/test/chevron-right.png");
+  background-size: 100% 100%;
+  cursor: pointer;
+  transition: all 0.3s;
+  opacity: 0.5;
+}
+
+.test_panel_title > .title > .open.active {
+  transform: rotate(90deg);
+  opacity: 1;
+}
+
+.test_panel_title > .state {
+  margin-left: auto;
+  min-width: fit-content;
+}
+
+.test_panel_title > .state > span {
+  font-size: 14px;
+  padding: 5px 8px;
+  border-radius: 5px;
+  margin-right: 0;
+}
+
+.test_panel_title > .state > .is:nth-child(1) {
+  color: #17c469;
+  background: #effcf5;
+  border: 1px solid #effcf5;
+}
+
+.test_panel_title > .state > .no:nth-child(1) {
+  color: #3681fc;
+  background: #e0eafb;
+  border: 1px solid #e0eafb;
+}
+
+.test_panel_title > .title > .titleN {
+  font-size: 18px;
+  font-weight: 600;
+  max-width: calc(100% - 20px - 10px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.test_panel_title > .time {
+  font-size: 16px;
+  color: #a1a1a1;
+  min-width: 160px;
+  margin: 0 30px;
+}
+
+.test_panel_title > .creator {
+  font-size: 16px;
+  color: #a1a1a1;
+  max-width: 160px;
+  min-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.test_panel_title > .editBtn {
+  font-size: 16px;
+  color: #fff;
+  background: #3681fc;
+  height: 100%;
+  display: none;
+  align-items: center;
+  padding: 0 15px;
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+}
+.test_panel_title > .editBtn2 {
+  font-size: 16px;
+  color: #fff;
+  background: #3681fc;
+  height: 100%;
+  display: none;
+  align-items: center;
+  padding: 0 15px;
+  cursor: pointer;
+}
+
+.test_panel_title > .time > span + span {
+  margin-left: 10px;
+}
+
+.test_panel_box {
+  border-top: 2px solid #f0f0f0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 5px 20px;
+  box-sizing: border-box;
+}
+
+.test_panel_box > .detail {
+  width: calc(100% - 350px - 20px);
+  margin-right: 20px;
+  color: #a1a1a1;
+  font-size: 14px;
+  line-height: 24px;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.test_panel_box > .panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 350px;
+  min-width: 350px;
+}
+
+.test_panel_box > .panel > .score {
+  height: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: 1px solid #dbdbdb;
+  background: rgb(252, 252, 252);
+  width: 120px;
+  border-radius: 5px;
+}
+
+.test_panel_box > .panel > .score:nth-child(1) {
+  display: flex;
+}
+
+.test_panel_box > .panel > .score > div:nth-child(1) > span:nth-child(1) {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.test_panel_box > .panel > .score > div:nth-child(1) > span:nth-child(2) {
+  margin-left: 5px;
+}
+
+.test_panel_box > .panel > .score > div:nth-child(2) {
+  font-size: 14px;
+  margin-top: 10px;
+  color: #a1a1a1;
+}
+
+.test_panel_box > .panel > .btn {
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.test_panel_box > .panel > .btn > div {
+  display: flex;
+  color: rgb(69, 141, 255);
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* .test_panel_box > .panel >.btn > div + div{
+      margin: 15px 0 0 0;
+    } */
+.test_panel_box > .panel > .btn > div > span:nth-child(1) {
+  display: block;
+  width: 13px;
+  height: 13px;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+
+.test_panel_box > .panel > .btn > div:nth-child(1) > span:nth-child(1) {
+  background-image: url("../../../assets/icon/test/edit_icon.png");
+}
+
+.test_panel_box > .panel > .btn > div:nth-child(2) > span:nth-child(1) {
+  background-image: url("../../../assets/icon/test/check_icon.png");
+}
+
+.test_panel_box > .panel > .btn > div:nth-child(3) > span:nth-child(1) {
+  background-image: url("../../../assets/icon/test/paste_icon.png");
+}
+
+.test_add_box {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.test_add_box > .test {
+  width: 100%;
+  height: 40px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.test_add_box > .test > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.test_add_box > .test + .test {
+  /* margin-left: 10px; */
+}
+
+.test_add_box > .test > .time {
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  font-size: 14px;
+  width: 300px;
+  padding-left: 30px;
+  box-sizing: border-box;
+}
+
+.test_add_box > .test > .time > span {
+  /* margin-top: 5px; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.test_add_box > .test > .utime {
+  font-size: 14px;
+  width: 160px;
+  min-width: 160px;
+  margin: 0 30px 0 0;
+}
+.test_add_box > .test > .mask {
+  display: flex;
+  align-items: center;
+  padding-right: 58px;
+  max-width: 160px;
+  min-width: 160px;
+}
+
+.test_add_box > .test > .delete {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  right: -5px;
+  top: -5px;
+  cursor: pointer;
+  z-index: 2;
+  display: none;
+}
+
+.test_add_box > .test > .mask > div {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #3681fc;
+}
+
+.test_add_box > .test > .mask > .delete {
+  color: #ee3e3e;
+}
+
+.test_add_box > .test > .mask > div + div {
+  margin-left: 15px;
+}
+
+.bgColor {
+  background: #466b99;
+}
+
+.courseLength > .finishBox {
+  display: flex;
+  color: #a1a1a1;
+  font-size: 14px;
+  margin-left: auto;
+  align-items: center;
+}
+.courseLength > .finishBox > .finish {
+  width: 15px;
+  height: 15px;
+  background-image: url("../../../assets/icon/test/icon_course.png");
+  background-size: 100% 100%;
+  margin-right: 5px;
+}
+.courseLength > .finishBox.is > .finish {
+  background-image: url("../../../assets/icon/test/icon_course_check.png");
+}
+.courseLength > .finishBox.is {
+  color: #000;
+}
+
+.isDead {
+  color: #ee3e3e;
+}
+
+.testType {
+  width: 60px;
+  margin: 0 45px 0 auto;
+}
+
+.testType > span {
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: solid 1px gray;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.testType > .typeStatus_2 {
+  background: #f0f9f2;
+  border-color: #b5e3bf;
+  color: #5fc875;
+}
+
+.testType > .typeStatus_4 {
+  background: #fef5ec;
+  border-color: #fad0a1;
+  color: #f7933b;
+}
+
+.testType > .typeStatus_1 {
+  background: #eef3fc;
+  border-color: #0f40f5;
+  color: #0f40f5;
+}
+</style>

src/components/pages/liyuan/page/courseCenter.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="courseCenter">
+    <div class="header">
+      <img
+        @click="$router.go(-1)"
+        style="cursor: pointer;"
+        src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/default%2F%E8%BF%94%E5%9B%9E1776417712913.png"
+        alt=""
+      />
+      <div class="header_title">
+        <div>课程中心</div>
+        <div>汇聚拔尖名师资源，提供定制化、进阶式的拓展课程。</div>
+      </div>
+    </div>
+    <div class="serachCon">
+      <el-input
+        placeholder="搜索课程..."
+        prefix-icon="el-icon-search"
+        @change="getCourseList"
+        v-model="search"
+      >
+      </el-input>
+    </div>
+    <div class="courseDataL" v-loading="loading">
+      <div class="Conblock" v-for="(i, index) in courseList" :key="index">
+        <img
+          class="PimgL"
+          :src="
+            i.cover != null && i.cover != ''
+              ? JSON.parse(i.cover).length > 0
+                ? JSON.parse(i.cover)[0].url
+                : mr
+              : mr
+          "
+          alt
+        />
+        <div class="ConblockTit">
+          {{ i.title }}
+        </div>
+        <div style="display: flex;gap: 10px;color: #969BA3;font-size: 14px;padding: 0 16px;">
+          <span>{{ i.uname }}</span>
+          <!-- <span>@{{ i.school }}</span> -->
+        </div>
+        <div class="foot">
+          <!-- <img style="cursor: pointer;"
+                v-if="i.userid == userid" 
+                @click="goToCourse(i.courseId)" 
+                src="../../../../assets/icon/liyuan/courseEditC.svg" alt=""> -->
+          <div class="ent" @click="entCourse(i)">进入课程</div>
+        </div>
+      </div>
+    </div>
+    <div style="display: flex;justify-content: flex-end;align-items: center;padding: 20px 0;">
+        <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :page-size="pageSize"
+        :current-page="page"
+        @current-change="getCourseList"
+        >
+        </el-pagination>
+    </div>
+   
+  </div>
+</template>
+<script>
+export default {
+  name: "courseCenter",
+  data() {
+    return {
+      search: "",
+      oid: this.$route.query["oid"],
+      userid: this.$route.query["userid"],
+      org: this.$route.query["org"],
+      role: this.$route.query["role"],
+      courseList: [],
+      total: 0,
+      page: 1,
+      pageSize: 8,
+      loading: false
+    };
+  },
+  methods: {
+    searchCourse() {
+      console.log(this.search);
+    },
+    getCourseList() {
+      this.loading = true;
+      this.ajax
+        .get(this.$store.state.api + "selectPersonCourseList", {
+          oid: this.oid,
+          inp: this.search,
+          page: this.page,
+          num: this.pageSize
+        })
+        .then(res => {
+          console.log(res);
+          this.courseList = res.data[0];
+          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.loading = false;
+        })
+        .catch(err => {
+          this.loading = false;
+          console.log(err);
+        });
+    },
+    entCourse(item) {
+      let _str = "";
+      if (item.state == 1) {
+        _str = "course_stageMode_open";
+      }
+      if (item.state == 2) {
+        _str = "course_taskMode_open";
+      }
+      if (item.state == 3) {
+        _str = "course_easyMode_open";
+      }
+      if (item.state == 5) {
+        _str = "course_aiMode_open";
+      }
+      if (item.state == 6) {
+        _str = "course_aiEasyMode_open";
+      }
+      this.addOp3("1", "", { courseid: item.courseId, type: _str }, "success");
+
+      window.topU.postMessage({ cid: item.courseId, screenType: "3" }, "*");
+    }
+  },
+  mounted() {
+    this.getCourseList();
+  }
+};
+</script>
+<style scoped>
+.courseCenter {
+  width: 100%;
+  min-height: 100%;
+  padding: 30px;
+  box-sizing: border-box;
+  background-color: #f8fafc;
+}
+.header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: 10px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.header img {
+  width: 20px;
+  height: 20px;
+}
+.header_title {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.header_title div:nth-child(1) {
+  font-size: 20px;
+  font-weight: bold;
+}
+.header_title div:nth-child(2) {
+  font-size: 14px;
+  color: #666;
+}
+.serachCon {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 0;
+  box-sizing: border-box;
+}
+.serachCon >>> .el-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.serachCon >>> .el-input {
+  width: 200px !important;
+}
+.serachCon >>> .el-input__inner {
+  height: 30px !important;
+  border-radius: 20px !important;
+  width: 200px !important;
+  border: 1px solid #e5e5e5;
+  background: #ffffff;
+}
+.courseList {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+.courseItem {
+  display: flex;
+  flex-direction: column;
+}
+.courseDataL {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    display: grid;
+}
+.Conblock {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  padding-bottom: 10px;
+  /* padding: 14px 16px; */
+  box-sizing: border-box;
+  box-shadow: 0px 4px 10px 0px #0000001a;
+}
+.PimgL {
+  width: 100%;
+  height: 126px;
+  /* border-radius: 10px; */
+  object-fit: cover;
+}
+.ConblockTit {
+  font-size: 18px;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 16px;
+}
+.foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+}
+.ent {
+  background: #eff6ff;
+  width: 100%;
+  color: #507ee8;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: 10px;
+  padding: 10px 16px;
+  box-sizing: border-box;
+}
+/* .ent:hover{
+    border: 1px solid #4080FF;
+    background: #4080FF;
+    color: #fff;
+} */
+.moreL {
+  font-family: PingFang HK;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #969ba3;
+  justify-content: flex-end;
+}
+</style>

src/router/index.js

@@ -156,7 +156,8 @@ import userInfoL from '@/components/pages/liyuan/page/userInfoL'
 import examineL from '@/components/pages/liyuan/page/examine'
 import examineperson from "@/components/pages/liyuan/page/examineperson";
 import studentManageNew from '@/components/pages/studentManageNew'
-
+import bjspersonTop from '@/components/pages/liyuan/bjspersonTop'
+import courseCenter from '@/components/pages/liyuan/page/courseCenter'
 import portraitL from '@/components/pages/liyuan/page/portrait'
 import teadTest from '@/components/pages/liyuan/page/teadTest'
 import Listudent from '@/components/pages/liyuan/page/student'
@@ -252,6 +253,22 @@ export default new Router({
       requireAuth: ''
     }
   },
+  {
+    path: '/courseCenter',
+    name: 'courseCenter',
+    component: courseCenter,
+    meta: {
+      requireAuth: ''
+    }
+  },
+  {
+    path: '/bjspersonTop',
+    name: 'bjspersonTop',
+    component: bjspersonTop,
+    meta: {
+      requireAuth: ''
+    }
+  },
   // {
   //   path: '/',
   //   redirect: '/course',