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

慧心医问医疗问答系统 前端界面开发

1、对话主页面细节开发

（1）复制按钮

效果图：

安装vue-clipboard：

npm install --save vue-clipboard2

main.js中引入：

import VueClipboard from "vue-clipboard2";

......

app.use(VueClipboard);

......

//按钮效果：
 <el-icon class="documentCopy" v-on:click="Copy(item)" size="20px"><DocumentCopy/></el-icon>

//复制按钮
Copy(item) {
      this.$copyText(item.message).then(
        () => {
          this.$message({
            message: "已复制到剪贴板",
            type: "success",
          });
        },
        () => {
          this.$message({
            message: "无法复制",
            type: "info",
          });
        }
      );
},

（2）反馈窗口

    <el-popover
      :visible="visible"
      placement="top"
      :width="240"
      popper-style="background-color:#729cf766"
      title="反馈"
    >
      <template #reference>
        <div
          class="draggable"
          @click="visible = true"
          style="left: 91%; top: 78%"
        >
          反馈入口
        </div>
      </template>
      <el-form :model="reForm" ref="reForm" class="demo-ruleForm">
        <el-form-item prop="content">
          <textarea
            class="el-input"
            :rows="6"
            v-model="reForm.content"
            style="
              outline: none;
              resize: none;
              line-height: 1.5;
              border: 1px solid #8cd2f3b5;
            "
            placeholder="请输入您的反馈意见！"
          ></textarea>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(reForm.content)"
            >提交</el-button
          >
          <el-button @click="reFreshForm">重置</el-button>
          <el-button @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-popover>


methods:

    //反馈重置
    reFreshForm() {
      this.reForm = {};
    },

（3）字符流输出

效果：

data(){
   return{
      ...
      isTyping: false, // 是否正在逐字输出
      newResponse: "", // 逐字输出的文本
      typingIndex: 0, // 当前逐字输出的字符索引
      typingInterval: null, // 逐字输出定时器
      ...
  }
}

methods:
//逐字输出
startTyping(message) {
      this.isTyping = true;
      this.newResponse = "";
      this.typingIndex = 0;
      this.typingInterval = setInterval(() => {
        if (this.typingIndex < message.length) {
          this.newResponse += message.charAt(this.typingIndex++);
        } else {
          this.isTyping = false;
          clearInterval(this.typingInterval);
          this.typingInterval = null;
        }
      }, 100); // 每100毫秒输出一个字符
    },

message传入的是全部文字，他会逐步输出到newResponse中，结束条件是他们的长度最终相等 

2、后台管理系统界面开发

（1）vue项目创建同前

（2）页面框架

左侧导航栏，右侧展示数据

（3）全局引入echarts

在main.js中引入：

import * as echarts from "echarts";
......

app.config.globalProperties.$echarts = echarts;

在页面中：需要展示的时候调用该初始化函数：

    initEcharts() {
      this.$nextTick(() => {
        const dom = this.$refs["myChart"];
        console.log(dom);
        if (dom) {
          console.log("ll");
          const myChart = this.$echarts.init(dom); // 初始化echarts实例
          const option = {
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: "line",
                smooth: true,
              },
            ],
          };
          // 设置实例参数
          option && myChart.setOption(option);
        }
      });
    },

效果：