【山东大学创新实训】VCRS-前端设计与开发（11）

本周主要是完成最主要的界面，就是根据对话，后端给出的用户可能感兴趣的知识点跳转到该知识点的学习界面。

首先向右侧的对话界面进行提问，例如“计算机网络7层模型有哪几个部分”。在chat.vue组件中调用store.js中的simulateBotResponse函数。

将从后端收到的用户可能感兴趣的知识点列表展示在chat组件的下端。

点击Chat组件知识点跳转

要实现点击chat组件中的知识点跳转到相应的知识学习界面，首先将每个span绑定点击函数

<div>
              <span 
            v-for="knowledge in ProbKnowledge" 
            :key="knowledge" 
            class="knowledge-tag"
            @click="handleClick(knowledge)"
          >
            {{ knowledge }}
            <i 
              class="delete-icon" 
              @click.stop="removeKnowledge(knowledge)"
            >x</i>
          </span>
            </div>

 函数handleClick：

handleClick(knowledge) {
      this.$store.dispatch('JumpProbKnowledge', knowledge).then((data) => {
        this.$router.push({path: '/knowledge'})
      })
    },

去调用Store.js中的JumpProbKnowledge函数然后跳转路由去knowledge

store.js中的JumpProbKnowledge函数：

async JumpProbKnowledge({commit}, knowledge) {
      const response = await api.post('/JumpProb', knowledge);
      console.log("knowledge_name:" + knowledge)
      commit('setData', response.data);
      return response.data;
    }

调用后端的方法，返回该知识点的所有详细信息，包括与该知识点的相关的知识点，该知识点的详细信息，知识图谱，题库并将这些数据存放在store.js的state中。以便在Knowledge展示界面获取。

将知识列表保存在state中

当提问问题时，我们可能对其所有的知识都感兴趣，因此在进行下一次提问或者手动删除之前，chat组件内的知识点列表不能随着界面改变而改动。因此我们把它存放到state中。

commit('setProbKnowledge', response.data.ProbKnowledge);

知识点展示界面的设计与实现

对知识点界面的设计和实现分为四个方面

分别是与这个知识点相关的各个知识点的跳转链接，这个知识点相关知识的展示，知识图谱的展示，以及相关题目的展示。

与这个知识点相关的各个知识点的跳转链接：

<div class="row1 card-container"> 
        <card type="chart" cardCol>
          <template slot="header">
            <h4 class="card-category">可能相关的知识</h4>
            <div class="knowledge-container">
        <div 
          v-for="knowledge in ProbKnowledge" 
          :key="knowledge" 
          class="knowledge-tag"
          @click="handleClick(knowledge)"
        >
          {{ knowledge }}
        </div>
      </div>
          </template>
        </card>
    </div>

点击每一个可能的知识，会调用与点击chat组件中知识点列表类似的函数，根据我的知识点，拿到后端传给我的该知识点的全部的详细信息。

handleClick(knowledge) {
      this.$store.dispatch('JumpProbKnowledge', knowledge).then((data) => {
        this.$router.push({path: '/knowledge'})
      })
    },

可以根据页面上面的按钮点击跳转到相应知识点的界面，但不影响右侧chat组件的知识点列表。

效果图如下：

这个知识点相关知识的展示：

<div class="row2 card-container">
      <card type="info" cardCol>
        <template slot="header">
          <h4 class="card-category">知识点</h4>
        </template>
        <h3 class="KnowledgeName">
            {{ KnowledgeName }}
        </h3>
        <div class="info-table-container">
          <div class="info-table">
            <div class="info-row" v-for="(value, key) in computerNetworkInfo" :key="key">
              <div class="info-key">{{ key }}:</div>
              <div class="info-value">{{ value }}</div>
            </div>
          </div>
        </div>
      </card>
    </div>

将从后端拿到的该知识点的相关信息展示出来。

效果如下：

知识图谱的展示：

<div class="row3 card-container">
      <card type="question" cardCol style="height: 700px; width: 100%;">
        <h3 style="color: black;">
            知识图谱
        </h3>
        <div id="vis-kg" style="width: 100%; height: 90%;"></div> 
      </card>
    </div>

loadTreeData() {
      const chartDom = document.getElementById('vis-kg');
      echarts.dispose(chartDom);
      const myChart = echarts.init(chartDom);
      myChart.showLoading();
      const graph = this.graphData;
      myChart.hideLoading();
      var categories = [];
    for (var i = 0; i < 2; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }
      const option = {
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph',
            layout: 'force',
            symbolSize: 40,
            roam: true,
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },
 
            data: graph.nodes,
            links: graph.links,
            categories: categories,
        }]
    };

效果如下：

相关题目的展示：

对于与该知识点的相关题目，依次展示在知识图谱的下面，只展示题目本身，每个题目后面又一个查看答案的按钮，点击即可展开查看该题目以及题目的答案。

<div class="row4 card-container">
      <card type="quiz" cardCol>
    <h3 style="color: black;">
      相关题目
    </h3>
    <div class="quiz-table">
      <div class="quiz-row" v-for="(question, index) in questions" :key="index">
        <div class="quiz-question">
          {{ question.text }}
          <butten class="info-icon" @click="showModal(question)">
            查看答案
          </butten>
        </div>
        <div>
        <hr v-if="index < questions.length - 1" class="separator">
        </div>
      </div>
    </div>

    <div v-if="isModalVisible" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h4>{{ currentQuestion }}</h4>
        <p>{{ currentAnswer }}</p>
      </div>
    </div>

showModal(question) {
      console.log("wo dian ji le zhan kai an niu")
      this.currentQuestion = question.text;
      this.currentAnswer = question.answer;
      this.isModalVisible = true;
      console.log("wo dian ji le zhan kai an niu")
    },
    closeModal() {
      this.isModalVisible = false;
      this.currentQuestion = '';
      this.currentAnswer = '';
    },

效果如下：