项目实训#6 病历生成功能

完善了上周写的页面，实现并且测试了和后端之间的数据传输，（大模型在这里执行的功能是对传入的字符流划分、处理成为一个json对象）同时因为在本地部署的大模型的算力问题，大模型返回数据需要30秒左右的时间，所以使用了element-plus下的loading组件做了一个加载等待，等待大模型返回的数据到位再结束等待，显示出来

//展示前端图片 加载状态

//代码

<script setup>
import { ref } from "vue";
import Blogpost from "@/views/Blogpost.vue";
import axios from 'axios';
import { ElLoading } from 'element-plus';

let dialogVisible1 = ref(false);
const blogs = ref([
  {
    id: 1,
    title: "智能病历生成系统",
    content: "请简要描述你的病情,请尽可能完整的提供你的症状，并告诉我们你是否有相关的既往病症或药物过敏",
  },
  {
    id: 2,
    title: "感谢使用",
    content: "本系统使用chatglm进行病历自动生成，您的个人信息不会被用于其他目的",
  },
]);
const initialBlogForm = {
  title: "",
  content: "",
  doctor: "",
};
const blogForm = ref({ ...initialBlogForm });
const handleSubmit = async() => {
   //显示加载界面 element-plus
  const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      }
      )
  // 在这里传给后端数据
  await axios.post('http://localhost:8000/medic/generate/1/', {
        content: blogForm.value.content,
        doctor: blogForm.value.doctor
    })
  //生成结果显示到弹窗上
  dialogVisible1.value = true
};
</script>

<template>
  <div class="container">

    <header class="header">
    </header>

    <div class="content">
      <div class="blog-container">
        <Blogpost v-for="blog in blogs" :key="blog.id" v-bind="blog" />
      </div>

      <form class="form">
        <div class="form-group">
          <label for="content">病情描述</label>
          <textarea
            id="content"
            cols="30"
            rows="10"
            v-model="blogForm.content"
            class="description-text"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="doctor-select">医生选择</label>
          <el-select v-model="blogForm.doctor" placeholder="请选择医生" class="select-doctor">
            <el-option label="李医生" value="李医生"></el-option>
            <el-option label="王医生" value="王医生"></el-option>
            <el-option label="何医生" value="何医生"></el-option>
          </el-select>
        </div>
          <el-button type="primary" class="submit-button" @click="handleSubmit">提交</el-button>
      </form>
    </div>
  </div>
  <el-dialog title="生成结果" v-model="dialogVisible1" width="50%">
        <span>这里显示病历生成结果</span>
        <template #footer>
        <span class = "dialog-footer">
          <el-button @click="dialogVisible1 = false">好的</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<style scoped>
.container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  width: 100%;
  max-width: 800px;
  margin-left: 150px;
}

.blog-container {
  margin-bottom: 20px;
  margin-left: 190px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 100px;
}

.form-group {
  margin-bottom: 40px; /* 增加表单元素之间的间距 */
  width: 100%;
  margin-left: 100px;
}

.description-text {
  width: 100%;
  box-sizing: border-box;
  margin: 20px;
}

.select-doctor {
  width: 100%;
  box-sizing: border-box;
  margin: 20px;

}

.submit-button {
  align-self: center;
  margin-left:200px;
}
</style>