2024 山东大学软件学院创新项目实训（十）

智慧医疗问答系统 -- 前端界面完善

1、对话主页自适应+重新生成功能实现

设置高度自动滚动，使新出现的内容出现在页面最下方，不会被遮盖

添加重新生成图标，点击即可重新生成最新对话

效果演示：

代码：

 高度滚动：

    startTyping(message) {
      this.isTyping = true;
      this.newResponse = "";
      this.typingIndex = 0;
      // console.log(message);
      this.typingInterval = setInterval(() => {
        if (this.typingIndex < message.length) {
          this.newResponse += message.charAt(this.typingIndex++);
        } else {
          this.isTyping = false;
          clearInterval(this.typingInterval);
          this.typingInterval = null;
        }
        var div = this.$refs.show;  //展示对话的div对象
        setTimeout(() => {
          div.scrollTop = div.scrollHeight;
        }, 0);
      }, 50); 
    },

重新生成：

            <el-tooltip
              class="box-item"
              effect="light"
              content="重新生成"
              placement="right-start"
            >
              <el-icon
                color="rgb(140,186,230)"
                size="20px"
                v-on:click="reProduct"
                ><RefreshLeft
              /></el-icon>
            </el-tooltip>


    //重新生成答案
    reProduct() {
      let curIndex = this.dataMsg.length - 1;
      let question = this.dataMsg[curIndex - 1].question;
      this.reSend(question);
    },

    handleSend() {
      if (this.repeatSend == false) {
        var div = this.$refs.show;
        setTimeout(() => {
          div.scrollTop = div.scrollHeight;
        }, 0);
        this.repeatSend = true;
        var getTime = new Date().getTime(); //获取到当前时间戳
        var time = new Date(getTime); //创建一个日期对象
        //发送按钮事件
        if (this.inputMsg.length == 0) {
          this.$message({
            message: "请输入内容",
            type: "warning",
          });
          return;
        }
        this.loadding = true;
        //输入的内容
        let newData = {
          question: this.inputMsg,
          answer: "",
          imageUrl: this.imageUrl || "",
          qtime: nowDate(time),
          user_id: localStorage.getItem("userId"),
          record_id: "",
        };
        //将输入放进消息数组
        this.dataMsg.push(newData);
        //设置成最新回复
        this.lastMsg = true;
        //处理发送包含图片的数据
        if (this.imageName != "") {
          const XRayMessage = {
            text: this.inputMsg,
            image: this.imageName || "",
            type: this.maxType + 1, //当前对话类型
            qtime: nowDate(time),
            user_id: localStorage.getItem("userId"),
            history: "",
            status: this.historyState == "开启无痕" ? 0 : 1,
          };
          //X-光接口
          xRayApi("post", XRayMessage)
            .then((res) => {
              if (res.status == 200) {
                console.log(res);
                this.loadding = false;
                //成功的响应
                let newResponse = {
                  record_id: res.data.record_id,
                  user_id: res.data.user_id,
                  type: this.maxType + 1,
                  question: "",
                  answer: res.data.result,
                };
                this.dataMsg.push(newResponse);
                // 开始逐字输出最新的对话框
                this.startTyping(newResponse.answer);
                var div = this.$refs.show;
                setTimeout(() => {
                  div.scrollTop = div.scrollHeight;
                }, 0);
              }
            })
            .catch((error) => {
              console.log(error);
            });
        } else {
          var history;
          if (this.dataMsg.length > 2) {
            let curIndex = this.dataMsg.length - 1;
            let que = this.dataMsg[curIndex - 2].question;
            let ans = this.dataMsg[curIndex - 1].answer;
            history = [[que, ans]];
          } else {
            history = [];
          }
          console.log(history);
          const postMessage = {
            message: this.inputMsg,
            type: this.maxType + 1,
            user_id: localStorage.getItem("userId"),
            time: nowDate(time),
            history: history,
            status: this.historyState == "开启无痕" ? 0 : 1,
          };
          //对话消息
          dialogueApi("post", postMessage)
            .then((res) => {
              // 处理对话响应
              console.log("Success! ", res.data);
              this.loadding = false;
              let newResponse = {
                record_id: res.data.data.record_id,
                user_id: res.data.data.user_id,
                type: this.maxType + 1,
                question: "",
                answer: res.data.data.message,
              };

              this.dataMsg.push(newResponse);
              // // 开始逐字输出最新的对话框
              this.startTyping(newResponse.answer);
              var div = this.$refs.show;
              setTimeout(() => {
                div.scrollTop = div.scrollHeight;
              }, 0);
            })
            .catch((error) => {
              // 处理错误
              console.error("Error:", error);
            });
        }
        //清空输入框
        this.inputMsg = "";
        this.imageUrl = "";
        this.imageName = "";
        // console.log(XRayMessage);
        this.repeatSend = false;
      } else {
        this.$message({
          message: "请等待当前对话完成！",
          type: "warning",
        });
      }
      var div = this.$refs.show;
      setTimeout(() => {
        div.scrollTop = div.scrollHeight;
      }, 0);
    },

2、定时刷新侧边栏

在生成对话时，需同时将第一条对话保存进数据库，作为索引，同时需要展示在侧边栏历史记录中。为了实现不用手动刷新，采用定时刷新的方式：

效果如下：

  mounted() {
    this.timer = setInterval(() => {
      setTimeout(this.getAllHistory, 0);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },

其中getAllHistory是获取所有历史记录的方法。

3、无痕模式

考虑到用户隐私性的需求，我们加入了无痕问答模式。

效果如下：

            <el-tooltip :content="historyState" placement="top" effect="light">
              <el-switch
                v-model="historyState"
                active-color="#13ce66"
                inactive-color=""
                active-value="开启无痕"
                inactive-value="关闭无痕"
                style="--el-switch-on-color: #44b8f7a9"
                @change="updateState"
              >
              </el-switch>
            </el-tooltip>

    //无痕问答：
    changeState() {
      if (this.historyState == "开启无痕") {
        this.$message({
          message: "开启无痕问答模式，您的对话历史将不会被保留",
          type: "info",
        });
      } else {
        this.$message({
          message: "无痕问答模式已关闭",
          type: "info",
        });
      }
      console.log(this.historyState);
    },