'all'

config/index.js

@@ -11,7 +11,7 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/proxyApi': {
-          target: 'http://127.0.0.1',
+          target: 'http://127.0.0.1:8081',
             changeOrigin: true,
             pathRewrite: {
             '/proxyApi': ''
@@ -27,7 +27,7 @@ module.exports = {
     notifyOnErrors: true,
     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
-    
+
     /**
      * Source Maps
      */

src/mock/db.json

@@ -2,7 +2,7 @@
 	"nodes": [
 		{
 			"id": "10001",
-			"name": "数据库原理与应用",
+			"name": "移动应用开发",
 			"symbolSize": 20.0,
 			"x": 0.0,
 			"y": 0.0,
@@ -305,4 +305,4 @@
     },{
         "name":"5"
     }]
-}
+}

src/mock/knowmap.js

@@ -1,13 +1,14 @@
 let mathConstruct = require("./math_construct.json")
-let dbKnows = require("./db.json") 
+let dbKnows = require("./db.json")
+let Knowledge = require("./knowledge.json")
+
 
 
-  
 // 按层次分布算法
 function distributeNodesByHierarchy(data, relations, width = 800, height = 600) {
     // 创建数据的深拷贝，避免修改原始数据
     const newData = JSON.parse(JSON.stringify(data));
-    
+
     // 构建节点索引，方便查找
     const nodeMap = new Map();
     newData.forEach(node => {
@@ -15,44 +16,44 @@ function distributeNodesByHierarchy(data, relations, width = 800, height = 600)
         node.children = []; // 为每个节点添加children属性，用于构建层级结构
         node.level = -1;   // 初始化节点层级
     });
-    
+
     // 构建邻接表和入度表
     const adjacency = new Map();
     const inDegree = new Map();
     relations.forEach(rel => {
         const source = rel.source;
         const target = rel.target;
-        
+
         if (!adjacency.has(source)) {
             adjacency.set(source, []);
         }
         adjacency.get(source).push(target);
-        
+
         if (!inDegree.has(target)) {
             inDegree.set(target, 0);
         }
         inDegree.set(target, inDegree.get(target) + 1);
-        
+
         // 更新节点的children关系
         if (nodeMap.has(source) && nodeMap.has(target)) {
             nodeMap.get(source).children.push(nodeMap.get(target));
         }
     });
-    
+
     // 找出所有入度为0的节点（根节点）
     const rootNodes = newData.filter(node => {
         return !inDegree.has(node.id) || inDegree.get(node.id) === 0;
     });
-    
+
     // 使用广度优先搜索确定每个节点的层级
     const queue = [...rootNodes];
     const visited = new Set();
-    
+
     while (queue.length > 0) {
         const node = queue.shift();
         if (visited.has(node.id)) continue;
         visited.add(node.id);
-        
+
         // 为子节点分配层级
         node.children.forEach(child => {
             if (!visited.has(child.id)) {
@@ -61,7 +62,7 @@ function distributeNodesByHierarchy(data, relations, width = 800, height = 600)
             }
         });
     }
-    
+
     // 为每个节点分配位置
     const levels = new Map();
     newData.forEach(node => {
@@ -71,34 +72,53 @@ function distributeNodesByHierarchy(data, relations, width = 800, height = 600)
             levels.set(node.level, [node]);
         }
     });
-    
+
     // 计算每个节点的水平位置
     const levelYOffset = height / (levels.size + 1); // 每个层级之间的垂直间距
     levels.forEach((nodes, level) => {
         const xOffset = width / (nodes.length + 1); // 每个节点之间的水平间距
-        
+
         nodes.forEach((node, index) => {
             // 为每个节点分配位置
             node.x = xOffset * (index + 1) - xOffset / 2; // 水平位置
             node.y = levelYOffset * (level + 1);         // 垂直位置
         });
     });
-    
+
     return newData;
 }
 
 //http
 function getData(subjectName) {
-   if (subjectName == "1") {
-      const n = distributeNodesByHierarchy(mathConstruct.nodes,mathConstruct.links)
-      mathConstruct.nodes = n
-      return mathConstruct
-   } else if(subjectName == "2") {
-      const n = distributeNodesByHierarchy(dbKnows.nodes,dbKnows.links)
-      dbKnows.nodes = n
-      return  dbKnows
-   } 
-   return null
+  if (subjectName === "数据库原理") {
+    // 调用按层次分布算法，创建新副本防止报错
+    const nodes = distributeNodesByHierarchy(mathConstruct.nodes, mathConstruct.links);
+    return {
+      nodes,
+      links: [...mathConstruct.links],
+      categories: [...mathConstruct.categories]
+    };
+  } else if (subjectName === "人工智能应用基础") {
+    const nodes = distributeNodesByHierarchy(Knowledge.nodes, Knowledge.links);
+    return {
+      nodes,
+      links: [...Knowledge.links],
+      categories: [...Knowledge.categories]
+    };
+  }else if (subjectName === "移动应用开发") {
+    const nodes = distributeNodesByHierarchy(dbKnows.nodes, dbKnows.links);
+    return {
+      nodes,
+      links: [...dbKnows.links],
+      categories: [...dbKnows.categories]
+    };
+  }
+  // 返回默认空结构防止报错
+  return {
+    nodes: [],
+    links: [],
+    categories: []
+  };
 }
 
-  export { getData}
+  export { getData}

src/mock/math_construct.json

@@ -2,7 +2,7 @@
 	"nodes": [
 		{
 			"id": "10001",
-			"name": "数据结构",
+			"name": "数据库原理",
 			"symbolSize": 20.0,
 			"x": 0.0,
 			"y": 0.0,
@@ -305,4 +305,4 @@
     },{
         "name":"5"
     }]
-}
+}

src/views/course/courses.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="container learnstyle-page">
-        <el-row class="grid-head"></el-row>
-        <el-row>
-            <div data-v-318a99d9="" data-v-530f7e3a="" class="homewort-part">
-                <div data-v-318a99d9="" class="assess-tips">
-                    <div data-v-318a99d9="" class="col-1">
-                        <el-select v-model="courseVal" placeholder="请选择课程">
-                            <el-option v-for="item in options" :key="item.value" :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </div>
-                    <!-- <div data-v-318a99d9="" class="col-2"><span data-v-318a99d9="" class="total  current">全部</span><span
-                            data-v-318a99d9="" class="total ">学习中</span><span data-v-318a99d9=""
-                            class="total ">未学习</span><span data-v-318a99d9="" class="total ">已完成</span></div> -->
-                </div>
-                <div data-v-318a99d9="" class="list-data">
-                    <div data-v-318a99d9="" class="list-header">
-                        <div data-v-318a99d9="" class="top">
-                            <div data-v-318a99d9="" class="category_name"><span data-v-318a99d9="" class="">
+  <div class="container learnstyle-page">
+    <el-row class="grid-head"></el-row>
+    <el-row>
+      <div data-v-318a99d9="" data-v-530f7e3a="" class="homewort-part">
+        <div data-v-318a99d9="" class="assess-tips">
+          <div data-v-318a99d9="" class="col-1">
+            <el-select v-model="courseVal" placeholder="请选择课程">
+              <el-option v-for="item in courseList" :key="item.id" :label="item.name"
+                         :value="item.id" @change="getCourseSection(courseVal)">
+              </el-option>
+            </el-select>
+          </div>
+          <!-- <div data-v-318a99d9="" class="col-2"><span data-v-318a99d9="" class="total  current">全部</span><span
+                  data-v-318a99d9="" class="total ">学习中</span><span data-v-318a99d9=""
+                  class="total ">未学习</span><span data-v-318a99d9="" class="total ">已完成</span></div> -->
+        </div>
+        <div data-v-318a99d9="" class="list-data">
+          <div data-v-318a99d9="" class="list-header">
+            <div data-v-318a99d9="" class="top">
+              <div data-v-318a99d9="" class="category_name"><span data-v-318a99d9="" class="">
                                     全部&nbsp;
                                 </span><span data-v-318a99d9="" class="checked">
                                     第一章：高等教育政策与理论基础&nbsp;(7)
@@ -35,390 +35,400 @@
                                 </span><span data-v-318a99d9="" class="">
                                     第七章：教师综合素养提升&nbsp;(8)
                                 </span></div>
-                        </div>
-                    </div>
-                    <div data-v-318a99d9="" class="table-body">
-                        <div data-v-318a99d9=""
-                            class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
-                            style="width: 100%;">
-                            <div class="hidden-columns">
-                                <div data-v-318a99d9=""></div>
-                                <div data-v-318a99d9=""></div>
-                                <div data-v-318a99d9=""></div>
-                                <div data-v-318a99d9=""></div>
-                            </div>
-                            <div class="el-table__header-wrapper">
-                                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header"
-                                    style="width: 100%;">
-                                    <colgroup>
-                                        <col name="el-table_24_column_101" width="400">
-                                        <col name="el-table_24_column_102" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_104" width="150">
-                                        <col name="gutter" width="0">
-                                    </colgroup>
-                                    <thead class="has-gutter">
-                                        <tr class="">
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_101     is-leaf">
-                                                <div class="cell">目标(G)</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_102     is-leaf">
-                                                <div class="cell">P</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
-                                                <div class="cell">S</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
-                                                <div class="cell">R</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
-                                                <div class="cell">E</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
-                                                <div class="cell">N</div>
-                                            </th>
-                                            <th colspan="1" rowspan="1"
-                                                class="el-table_24_column_104  is-center   is-leaf">
-                                                <div class="cell">操作</div>
-                                            </th>
-                                            <th class="gutter" style="width: 0px; display: none;"></th>
-                                        </tr>
-
-
-                                    </thead>
-                                </table>
-                            </div>
-                            <div class="el-table__body-wrapper is-scrolling-none">
-                                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
-                                    style="width: 100%;">
-                                    <colgroup>
-                                        <col name="el-table_24_column_101" width="400">
-                                        <col name="el-table_24_column_102" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_103" width="100">
-                                        <col name="el-table_24_column_104" width="150">
-                                    </colgroup>
-                                    <tbody>
-                                        <tr class="el-table__row">
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
-                                                <div class="cell"><span data-v-318a99d9=""
-                                                        class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
-                                                        加快建设教育强国</span></div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
-                                                <div class="cell"><a data-v-318a99d9="" class="btn study-btn">学习</a>
-                                                </div>
-                                            </td>
-                                        </tr>
-
-                                        <tr class="el-table__row">
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
-                                                <div class="cell"><span data-v-318a99d9=""
-                                                        class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
+            </div>
+          </div>
+          <div data-v-318a99d9="" class="table-body">
+            <div data-v-318a99d9=""
+                 class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
+                 style="width: 100%;">
+              <div class="hidden-columns">
+                <div data-v-318a99d9=""></div>
+                <div data-v-318a99d9=""></div>
+                <div data-v-318a99d9=""></div>
+                <div data-v-318a99d9=""></div>
+              </div>
+              <div class="el-table__header-wrapper">
+                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header"
+                       style="width: 100%;">
+                  <colgroup>
+                    <col name="el-table_24_column_101" width="400">
+                    <col name="el-table_24_column_102" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_104" width="150">
+                    <col name="gutter" width="0">
+                  </colgroup>
+                  <thead class="has-gutter">
+                  <tr class="">
+                    <th colspan="1" rowspan="1" class="el-table_24_column_101     is-leaf">
+                      <div class="cell">目标(G)</div>
+                    </th>
+                    <th colspan="1" rowspan="1" class="el-table_24_column_102     is-leaf">
+                      <div class="cell">P</div>
+                    </th>
+                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
+                      <div class="cell">S</div>
+                    </th>
+                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
+                      <div class="cell">R</div>
+                    </th>
+                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
+                      <div class="cell">E</div>
+                    </th>
+                    <th colspan="1" rowspan="1" class="el-table_24_column_103     is-leaf">
+                      <div class="cell">N</div>
+                    </th>
+                    <th colspan="1" rowspan="1"
+                        class="el-table_24_column_104  is-center   is-leaf">
+                      <div class="cell">操作</div>
+                    </th>
+                    <th class="gutter" style="width: 0px; display: none;"></th>
+                  </tr>
+
+
+                  </thead>
+                </table>
+              </div>
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body"
+                       style="width: 100%;">
+                  <colgroup>
+                    <col name="el-table_24_column_101" width="400">
+                    <col name="el-table_24_column_102" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_103" width="100">
+                    <col name="el-table_24_column_104" width="150">
+                  </colgroup>
+                  <tbody>
+                  <tr class="el-table__row">
+                    <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
+                      <div class="cell"><span data-v-318a99d9=""
+                                              class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
                                                         加快建设教育强国</span></div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
-                                                <div class="cell">
-                                                    <div data-v-318a99d9="">
-                                                        <el-progress type="circle" :width="60"
-                                                            :percentage="25"></el-progress>
-
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
-                                                <div class="cell"><a data-v-318a99d9="" class="btn study-btn"
-                                                        @click="()=>{ this.dialogVisible = true}">学习</a>
-                                                </div>
-                                            </td>
-                                        </tr>
-
-                                    </tbody>
-                                </table><!----><!---->
-                            </div><!----><!----><!----><!---->
-                            <div class="el-table__column-resize-proxy" style="display: none;"></div>
-                            <div class="el-loading-mask" style="display: none;">
-                                <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular">
-                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
-                                    </svg><!----></div>
-                            </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
                         </div>
-                        <div data-v-318a99d9="" class="page-part">
-                            <el-pagination background :current-page="currentPage" :page-size="pageSize"
-                                layout="prev, pager, next, jumper" :total="totalCount">
-                            </el-pagination>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
                         </div>
-                    </div>
-                </div>
-                <div data-v-1a6b3659="" data-v-318a99d9="" class="el-dialog__wrapper" style="display: none;">
-                    <div role="dialog" aria-modal="true" aria-label="提示"
-                        class="el-dialog el-dialog--center common-dialog" style="margin-top: 15vh; width: 600px;">
-                        <div class="el-dialog__header">
-                            <div data-v-1a6b3659="" class="dialog-title">
-                                <h3 data-v-1a6b3659="">提示</h3> <i data-v-1a6b3659="" class="iconfont icon-guanbi"></i>
-                            </div><!---->
-                        </div><!---->
-                        <div class="el-dialog__footer">
-                            <div data-v-1a6b3659="" class="dialog-footer"><button data-v-084d845c="" data-v-1a6b3659=""
-                                    type="button" class="btn"><span data-v-084d845c="">确定</span></button></div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
                         </div>
-                    </div>
-                </div>
-            </div>
-        </el-row>
-
+                      </div>
+                    </td>
+
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
 
-        <template>
-            <el-dialog :visible.sync="dialogVisible" fullscreen top="0" custom-class="GPSREN"
-                :close-on-click-modal="false" :before-close="handleClose">
-                <div slot="title" class="cust-title">
-                    GPS-REN学习法
-                </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
+                      <div class="cell"><a data-v-318a99d9="" class="btn study-btn">学习</a>
+                      </div>
+                    </td>
+                  </tr>
+
+                  <tr class="el-table__row">
+                    <td rowspan="1" colspan="1" class="el-table_24_column_101  ">
+                      <div class="cell"><span data-v-318a99d9=""
+                                              class="course-name">学习习近平总书记关于教育的重要论述 落实党的二十大和三中全会对教育工作重要部署
+                                                        加快建设教育强国</span></div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_102  ">
+                      <div class="cell">
+                        <div data-v-318a99d9="">
+                          <el-progress type="circle" :width="60"
+                                       :percentage="25"></el-progress>
 
-                <Gpsren></Gpsren>
-            </el-dialog>
-        </template>
-    </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td rowspan="1" colspan="1" class="el-table_24_column_104 is-center ">
+                      <div class="cell"><a data-v-318a99d9="" class="btn study-btn"
+                                           @click="()=>{ this.dialogVisible = true}">学习</a>
+                      </div>
+                    </td>
+                  </tr>
+
+                  </tbody>
+                </table><!----><!---->
+              </div><!----><!----><!----><!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-loading-mask" style="display: none;">
+                <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular">
+                  <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
+                </svg><!----></div>
+              </div>
+            </div>
+            <div data-v-318a99d9="" class="page-part">
+              <el-pagination background :current-page="currentPage" :page-size="pageSize"
+                             layout="prev, pager, next, jumper" :total="totalCount">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div data-v-1a6b3659="" data-v-318a99d9="" class="el-dialog__wrapper" style="display: none;">
+          <div role="dialog" aria-modal="true" aria-label="提示"
+               class="el-dialog el-dialog--center common-dialog" style="margin-top: 15vh; width: 600px;">
+            <div class="el-dialog__header">
+              <div data-v-1a6b3659="" class="dialog-title">
+                <h3 data-v-1a6b3659="">提示</h3> <i data-v-1a6b3659="" class="iconfont icon-guanbi"></i>
+              </div><!---->
+            </div><!---->
+            <div class="el-dialog__footer">
+              <div data-v-1a6b3659="" class="dialog-footer"><button data-v-084d845c="" data-v-1a6b3659=""
+                                                                    type="button" class="btn"><span data-v-084d845c="">确定</span></button></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-row>
+
+
+       <template>
+         <el-dialog :visible.sync="dialogVisible" fullscreen top="0" custom-class="GPSREN"
+                    :close-on-click-modal="false" :before-close="handleClose">
+           <div slot="title" class="cust-title">
+             GPS-REN学习法
+           </div>
+
+           <Gpsren></Gpsren>
+         </el-dialog>
+      </template>
+  </div>
 </template>
 <script>
 import subjectInfo from "../../components/subject-info";
 import Gpsren from "../../components/gpsren.vue";
 export default {
-    name: 'courseVideo',
-    components: { subjectInfo, Gpsren },
-    data() {
-        return {
-            fileHost: this.$store.state.common.fileHost,
-            courseList: [],
-            currentPage: 1,
-            courseVal: 1,
-            pageSize: 9,
-            totalCount: 0,
-            options: [],
-            dialogVisible: false
+  name: 'courseVideo',
+  components: { subjectInfo, Gpsren },
+  data() {
+    return {
+      fileHost: this.$store.state.common.fileHost,
+      courseList: [],
+      courseSection:[],
+      currentPage: 1,
+      courseVal: 1,
+      pageSize: 10,
+      totalCount: 0,
+      options: [],
+      dialogVisible: false
+    }
+  },
+
+  mounted() {
+    // this.options.push({
+    //   label: "数据结构与原理",
+    //   value: 1
+    // })
+    this.getCourseList()
+    this.getCourseSection(this.courseVal)
+  },
+
+  destroyed() {
+
+  },
+
+  methods: {
+    getCourseSection(courseId){
+      this.axios.get(this.$httpApi.httpUrl(`/student/courseInfo/${courseId}/section`),{
+        params:{
+          courseId:courseId
         }
+      }).then(res=>{
+        console.log(res)
+      })
     },
-
-    mounted() {
-        this.options.push({
-            label: "数据结构与原理",
-            value: 1
-        })
-        this.getCourseList()
-    },
-
-    destroyed() {
-
+    // changeCourseSubject(val) {
+    //   this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
+    //     params: {
+    //       pageNum: this.currentPage,
+    //       pageSize: this.pageSize,
+    //       status: 1,
+    //       subjectId: val
+    //     }
+    //   }).then(response => {
+    //     this.courseList = response.data.data.dataList
+    //     this.totalCount = response.data.data.total
+    //   })
+    // },
+
+    getCourseList() {
+      this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
+        params: {
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+          status: 1
+        }
+      }).then(response => {
+        this.courseList = response.data.data.dataList
+        this.totalCount = response.data.data.total
+      })
     },
 
-    methods: {
-
-        changeCourseSubject(val) {
-            this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
-                params: {
-                    pageNumber: this.currentPage,
-                    pageSize: this.pageSize,
-                    status: 1,
-                    subjectId: val
-                }
-            }).then(response => {
-                this.courseList = response.data.data.dataList
-                this.totalCount = response.data.data.total
-            })
-        },
-
-        getCourseList() {
-            this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
-                params: {
-                    pageNumber: this.currentPage,
-                    pageSize: this.pageSize,
-                    status: 1
-                }
-            }).then(response => {
-                this.courseList = response.data.data.dataList
-                this.totalCount = response.data.data.total
-            })
-        },
-
-        studyCourse(course) {
-            this.$store.commit('course/updateCourseInfo', course)
-            this.$router.push({
-                name: 'courseDetail',
-            })
-        }
+    studyCourse(course) {
+      this.$store.commit('course/updateCourseInfo', course)
+      this.$router.push({
+        name: 'courseDetail',
+      })
     }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .learnstyle-page {
-    // background-color: aliceblue;
-    height: 100%;
-    max-width: 1200px;
+  // background-color: aliceblue;
+  height: 100%;
+  max-width: 1200px;
 }
 
 .demoList ul {
-    width: 100%;
-    box-sizing: border-box;
-    margin-bottom: 100px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 100px;
 }
 
 .demoList {
-    padding-top: 30px;
+  padding-top: 30px;
 }
 
 .course_detail {
-    padding-top: 6px;
-    max-height: 48px;
-    line-height: 20px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    font-size: 14px;
-    color: #93999f
+  padding-top: 6px;
+  max-height: 48px;
+  line-height: 20px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 14px;
+  color: #93999f
 }
 
 .demoList li {
-    box-sizing: border-box;
-    width: 192px;
-    min-height: 160px;
-    float: left;
-    margin-right: 40px;
-    margin-bottom: 30px;
-    text-align: left;
-
-    img {
-        cursor: pointer;
-        width: 100%;
-        height: 108px;
-        display: block;
-        border-radius: 8px;
-
-        &:hover {
-            opacity: 0.7;
-        }
+  box-sizing: border-box;
+  width: 192px;
+  min-height: 160px;
+  float: left;
+  margin-right: 40px;
+  margin-bottom: 30px;
+  text-align: left;
+
+  img {
+    cursor: pointer;
+    width: 100%;
+    height: 108px;
+    display: block;
+    border-radius: 8px;
+
+    &:hover {
+      opacity: 0.7;
     }
+  }
 }
 
 .typeitem {
-    cursor: pointer;
-    width: 300px;
+  cursor: pointer;
+  width: 300px;
 
-    .title {
-        padding-top: 8px;
-        font-weight: bold;
+  .title {
+    padding-top: 8px;
+    font-weight: bold;
 
-        &:hover {
-            cursor: pointer;
-            color: red;
-        }
+    &:hover {
+      cursor: pointer;
+      color: red;
     }
+  }
 }
 
 .demoList li {
-    width: 30%;
+  width: 30%;
 }
 
 .demoList .page {
-    position: relative;
-    left: 0;
-    bottom: 50px;
-    width: 100%;
-    text-align: center;
+  position: relative;
+  left: 0;
+  bottom: 50px;
+  width: 100%;
+  text-align: center;
 }
 
 .demoList li .image {
-    height: 199px;
-    width: 100%;
-    display: block;
+  height: 199px;
+  width: 100%;
+  display: block;
 }
 
 .top .item {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
 .grid-head {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 </style>

src/views/home.vue

@@ -2,16 +2,17 @@
   <div class="home">
     <el-container style="height: 100%;">
       <el-aside width="300px" style="background-color: rgb(238, 241, 246);height: 100%;">
-        <el-menu :default-openeds="['1', '3']"  @select="handleSelect">
+        <el-menu :default-openeds="['1', '3']" @select="handleSelect">
           <el-submenu index="1">
             <template slot="title"><i class="el-icon-message"></i>专业课列表</template>
-             <el-menu-item index="1" >数据结构与算法</el-menu-item>
-              <el-menu-item index="2">数据库原理与应用</el-menu-item>
+            <el-menu-item v-for="(item, index) in courseInfo" :key="index" :index="item.subjectName">
+              {{ item.subjectName }}
+            </el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
 
-      <el-container>  
+      <el-container>
         <el-main>
           <div id="knowmap"></div>
         </el-main>
@@ -25,26 +26,27 @@ import { swiper, swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
 import { mapGetters } from 'vuex'
 
-import { getData} from '../mock/knowmap' 
- 
+import { getData} from '../mock/knowmap'
+
 
 export default {
   components: {
 
   },
   data() {
-    return { 
+    return {
+      courseInfo: [],
       echarts: null,
       option: {
         title: {
-          text: '数据结构与算法知识图谱',
+          text: '知识图谱',
           subtext: 'Default layout',
           top: 'bottom',
           left: 'right'
         },
         tooltip: {},
         legend: [
-          
+
         ],
         animationDuration: 1500,
         animationEasingUpdate: 'quinticInOut',
@@ -74,15 +76,18 @@ export default {
             lineStyle: {
               color: 'source',
               curveness: 0.3
-            }
+            },
+            zoom:1.5
           }
         ]
       }
     }
   },
 
+
   mounted() {
     this.initECharts();
+    this.getCourseList();
   },
 
   methods: {
@@ -92,22 +97,32 @@ export default {
 
       this.echarts.setOption(this.option)
     },
- 
+    getCourseList(){
+      this.axios.get(this.$httpApi.httpUrl('/student/courseInfo'), {
+        params: {
+          pageNum:1,
+          pageSize:10,
+        }
+      }).then(response => {
+        this.courseInfo = response.data.data.dataList
+      })
+    },
     handleSelect(obj) {
       //科目的知识图谱数据
       const knows = getData(obj)
-       this.option.series[0].data = knows.nodes
-       this.option.series[0].links = knows.links
-       this.option.series[0].categories = knows.categories
-       this.echarts.setOption(this.option)
+      this.option.series[0].data = knows.nodes
+      this.option.series[0].links = knows.links
+      this.option.series[0].categories = knows.categories
+      this.option.title.text = `${obj}知识图谱`;
+      this.echarts.setOption(this.option)
     }
-  },
+  }
 }
 
 </script>
 
 <style lang='scss' scoped>
-#knowmap { 
+#knowmap {
   height: 100%;
 }
 
@@ -227,3 +242,4 @@ h3 {
   justify-content: center;
 }
 </style>
+