FlowVue/src/views/ultrasoniccom/ultrasonicForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" class="custom-dialog">
    <!-- <el-form
      ref="Print"
      :model=applyFormVO
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    > -->
    <div class="container">
      <div class="left">
        <el-select
          v-model="fordevicemValue"
          placeholder="请选择模版类别"
          clearable
          class="!w-230px"
          @change="handleselectchange"
          @clear="selectclear"
        >
          <el-option label="门诊" value="门诊模版" />
          <el-option label="住院" value="住院模版" />
          <el-option label="体检" value="体检模版" />
        </el-select>

        <el-tabs type="border-card" style="height: 931px">
          <el-tab-pane label="通用模版">
            <!-- 树 -->
            <el-tree
              style="min-width: 195px"
              v-loading="formLoading"
              class="treeStyle"
              :check-on-click-node="true"
              :highlight-current="true"
              :default-expand-all="true"
              :data="treeData"
              :props="treeDefaultProps"
              node-key="id"
              :show-checkbox="false"
              :check-strictly="true"
              @check="handleTreeNodeClick"
              ref="selectTree"
              :expand-on-click-node="false"
            />
          </el-tab-pane>
          <el-tab-pane label="私有模版">
            <!-- 树 -->
            <el-tree
              style="min-width: 195px"
              v-loading="formLoading"
              class="treeStyle"
              :check-on-click-node="true"
              :highlight-current="true"
              :default-expand-all="true"
              :data="privateData"
              :props="treeDefaultProps"
              node-key="id"
              :show-checkbox="false"
              :check-strictly="true"
              @node-click="handleTreeNodeClick"
              
              ref="priselectTree"
              :expand-on-click-node="false"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="middle">
        <!--用户信息区域-->

        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          type="border-card"
          style="height: 963px"
          @tab-change="handleTabChange"
        >
          <el-tab-pane label="用户信息" name="first">
            <el-form
              :model="applyFormVO"
              label-width="auto"
              style="max-width: 900px"
              :inline="true"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item label="检查号">
                    <el-input v-model="applyFormVO.examId" style="width: 180px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="姓名">
                    <el-input v-model="applyFormVO.pname" style="width: 180px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别">
                    <el-input v-model="applyFormVO.gender" style="width: 180px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生日期">
                    <el-date-picker
                      v-model="applyFormVO.birthday"
                      type="date"
                      placeholder="出生日期"
                      size="default"
                      style="width: 180px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检查时间">
                    <el-date-picker
                      v-model="applyFormVO.examDate"
                      type="datetime"
                      placeholder="检查时间"
                      size="default"
                      style="width: 180px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="检查项目名称">
                    <el-input
                      v-model="applyFormVO.examItemName"
                      style="width: 180px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="申请时间">
                    <el-date-picker
                      v-model="applyFormVO.applicationDate"
                      type="datetime"
                      placeholder="检查时间"
                      size="default"
                      style="width: 180px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请单号">
                    <el-input v-model="applyFormVO.regId" style="width: 180px" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="送检科室">
                    <el-input
                      v-model="applyFormVO.billDoctorDepartment"
                      style="width: 180px"
                      :disabled="true"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-divider />
            <!--图片显示区域-->
            <div class="demo-image">
              <el-card style="max-width: 180px">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="selecteimagedone"
                  fit="fill"
                  @dblclick="deleteimage('1')"
                />
              </el-card>

              <el-card style="max-width: 180px">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="selecteimagedtwo"
                  fit="fill"
                  @dblclick="deleteimage('2')"
                />
              </el-card>

              <el-card style="max-width: 180px">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="selecteimagedthree"
                  fit="fill"
                  @dblclick="deleteimage('3')"
                />
              </el-card>
            </div>
            <el-divider />
            <label style="text-align: center">检查所见</label>
            <el-input
              v-model="sj"
              style="max-width: 100%; width: 100%"
              :rows="4"
              type="textarea"
              placeholder="检查所见"
            />
            <el-divider />
            <label>诊断结论</label>
            <el-input
              v-model="zdjl"
              style="width: 100%"
              :rows="4"
              type="textarea"
              placeholder="诊断结论"
            />
            <el-divider />
            <label>报告备注</label>
            <el-input v-model="notes" style="width: 100%" placeholder="" />
            <el-radio-group
              v-model="radio1"
              size="small"
              class="radio-group-wrapper"
              @dblclick="cancelSelection"
            >
              <el-radio-button label="阴性" value="0" />
              <el-radio-button label="阳性" value="1" />
            </el-radio-group>
            <div class="form-row">
              <el-form-item label="诊断医生" class="form-item">
                <el-input v-model="applyFormVO.diagDoctor" style="width: 180px" :disabled="true" />
              </el-form-item>
              <el-form-item label="审核医生" class="form-item">
                <el-input
                  v-model="applyFormVO.reviewDoctor"
                  style="width: 180px"
                  :disabled="true"
                />
              </el-form-item>

              <el-form-item label="报告状态" class="form-item">
                <el-input
                  v-model="applyFormVO.reportstatus"
                  style="width: 180px"
                  :disabled="true"
                />
              </el-form-item>
            </div>

            <!--:disabled="applyFormVO.reportstatus === '已审核' ? true : false"-->
            <el-button
              type="primary"
              plain
              style="width: 180px; float: right"
              @click="examine"
              :disabled="applyFormVO.reportstatus === '已审核' ? true : false"
              >审核</el-button
            >
          </el-tab-pane>
          <el-tab-pane label="报告" name="report">
            <!--报告区域-->
            <div class="flex-center" id="printMe">
              <div class="ultrasound-report" id="PDF" style="height: 750px">
                <h2>超声检查报告单</h2>
                <hr />
                <div class="patient-info">
                  <p class="info-item">姓名：{{ applyFormVO.pname }}</p>
                  <p class="info-item">送检科室：{{ applyFormVO.billDoctorDepartment }}</p>
                  <p class="info-item">门诊号：{{ applyFormVO.examId }}</p>
                  <p class="info-item">性别：{{ applyFormVO.gender }}</p>
                  <p class="info-item">年龄：{{ age }}</p>
                  <p class="info-item">设备：{{ applyFormVO.deviceName }}</p>
                  <p class="info-item">检查号：{{ applyFormVO.regId }}</p>
                  <p class="info-item">检查类型：{{ applyFormVO.examItemName }}</p>
                </div>
                <hr />
                <!-- 图片展示区域 -->
                <h3>超声图像：</h3>
                <div class="image-gallery">
                  <div class="image-item-container" v-for="image in reportimages" :key="image.id">
                    <img :src="image.imgUrl" alt="" style="width: 180px; height: 180px" />
                  </div>
                </div>
                <div class="ultrasound-findings">
                  <h3>超声所见：</h3>
                  <p>{{ applyFormVO.examDescription }}</p>
                </div>
                <div class="ultrasound-recommendation">
                  <h3>超声提示：</h3>
                  <p>{{ applyFormVO.diagResults }}</p>
                </div>
                <div style="position: absolute; bottom: 20px; right: 20px">
                  <p>医生签名：{{ Profilevo.username }}</p>
                  <!-- <p>时间：xxx</p> -->
                </div>
              </div>
              <el-divider />
              <!--功能区-->
              <div>
                <el-button
                  type="primary"
                  style="width: 100px; float: right"
                  class="ignore-print"
                  :disabled="formLoading"
                  v-print="'printMe'"
                  >打印</el-button
                >
                <el-button
                  type="primary"
                   class="ignore-print"
                  style="width: 100px"
                  :disabled="formLoading"
                  @click="() => htmlToPdf.getPdf('超声报告单', '#PDF')"
                  >导出PDF</el-button
                >
              </div>
              <div> </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right" style="border: 1px solid #dcdfe6; padding: 2px; height: 960px">
        <!--图片区域-->
        <div>
          <el-button
            type="primary"
            plain
            style="width: 220px"
            @click="upimagedeleteor()"
            :disabled="applyFormVO.reportstatus === '已审核' ? true : false"
            >图像删除</el-button
          >
        </div>
        <div>
          <el-button
            type="primary"
            plain
            style="width: 220px"
            @click="getimages"
            :disabled="applyFormVO.reportstatus === '已审核' ? true : false"
            >图像刷新</el-button
          >
        </div>
        <div class="image-container">
          <div class="image-wrapper">
            <div class="image-item-container" v-for="image in images" :key="image.id">
              <el-image
                class="image-item"
                :src="image.imgUrl"
                @dblclick="selectImage(image.imgUrl, image.id)"
                @click="chooseImage($event, image.id)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--   </el-form> -->
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
  <!--  弹窗-->
  <el-dialog v-model="dialogTableVisible" title="选择结论添加方式" width="300" align-center>
    <div>
      <el-button @click="handleButtonClick('覆盖')" type="primary">覆盖</el-button>
      <el-button @click="handleButtonClick('追加')" type="success">追加</el-button>
      <el-button @click="dialogTableVisible = false" type="info">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ApplyformApi, ApplyformVO, UPFJApplyformVO } from '@/api/applyregistration/applyform'
import { ultrasoniccomApi, updateexamineimageVO } from '@/api/ultrasoniccom'
import { fill } from 'lodash-es'
import { number } from 'vue-types'
import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
import { getNowDateTimeS } from '@/utils/formatTime'
import print from 'vue3-print-nb'
import htmlToPdf from '@/utils/htmlPdf'

/** 超声组件 */
defineOptions({ name: 'Ultrasonic' })

const Profilevo = ref<ProfileVO>({} as ProfileVO) //当前登录人信息
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const upFJApplyformVO = ref<UPFJApplyformVO[]>([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const examineFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)


//点击节点更新使用时间
const clickuptime =async (pid:string)=>
{
  await ultrasoniccomApi.upreporttemplatetime(pid)
}

// 是否弹窗
const dialogTableVisible = ref(false)
//表示自定义弹窗点击的按钮名称
const btncleckname = ref()
//自定义弹窗点击方法 获取按钮名称
const handleButtonClick = (buttonName) => {
  if (buttonName == '覆盖') {
    zdjl.value = strzdjl
    sj.value = strsj
  } else if (buttonName == '追加') {
    let lszdjl: string = zdjl.value
    let lssj: string = sj.value
    zdjl.value = lszdjl + strzdjl
    sj.value = lssj + strsj
  }
  dialogTableVisible.value = false
  console.log("获取到父节点"+pid);
  clickuptime(pid)
}

//调用删除or更新标识实体集合
const updateexamineimage = ref<updateexamineimageVO[]>([])

//备注
const notes = ref()
//审核
const examine = async () => {
  try {
    if (selecteimagedoneid === 0 || selecteimagedtwoid === 0 || selecteimagedthreeid === 0) {
      message.warning('请选择影像图')
      return
    }

    // 二次确认
    await message.delConfirm('是否进行审核', '确认')
    let timesta = new Date()
    var localDateTime = new Date(timesta.getTime()).toISOString() // 转换为ISO格式的字符串
    localDateTime = localDateTime.slice(0, localDateTime.length - 1)
    console.log('当前时间' + localDateTime)
    examineFormVO.value.id = ID.toString()
    examineFormVO.value.examDescription = sj.value
    examineFormVO.value.diagResults = zdjl.value
    examineFormVO.value.notes = notes.value
    examineFormVO.value.diagFlag = radio1.value
    examineFormVO.value.diagDoctor = Profilevo.value.username
    examineFormVO.value.reviewDoctor = Profilevo.value.username
    examineFormVO.value.reportstatus = '已审核'
    // examineFormVO.value.diagDate=localDateTime
    // examineFormVO.value.reviewDate=dateTime

    const response = await PatientexamlistApi.examineupdatelist(examineFormVO.value)
    // 根据code判断接口调用是否成功
    if (response) {
      //更新图片选中标识
      await upimageselect()
      message.alertSuccess('审核成功')
      // 接口调用成功，可以根据需要处理返回的data数据
      console.log('接口调用成功')
      console.log('data:', response.data)
      //查询患者信息 根据ID
      getPatientexamlist(ID)
    } else {
      // 接口调用失败，根据具体情况处理错误
      console.error('接口调用失败:', response.msg)
    }
  } catch (error) {
    // 处理异常情况，例如接口调用失败或其他错误
    console.error('接口调用失败:', error)
  }
}

///转换时间格式
function nowDate(time) {
  var year = time.getFullYear() // 年
  var month = (time.getMonth() + 1).toString().padStart(2, '0') // 月
  var date = time.getDate().toString().padStart(2, '0') // 日
  var hour = time.getHours().toString().padStart(2, '0') // 时
  var minute = time.getMinutes().toString().padStart(2, '0') // 分
  var second = time.getSeconds().toString().padStart(2, '0') // 秒
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
}
//记录删除图片选中的图片id
const deleteimageid = ref('')
//第一个图地址
const selecteimagedone = ref('1')
//第二个图地址
const selecteimagedtwo = ref('2')
//第三个图地址
const selecteimagedthree = ref('3')
//保存每个图片的ID
let selecteimagedoneid: number = 0
let selecteimagedtwoid: number = 0
let selecteimagedthreeid: number = 0
//图片区域
const images = ref<any[]>([])
//报告的查询
const reportimages = ref<any[]>([])
//查询图片
const getimages = async () => {
  const imageslist = await ultrasoniccomApi.getimageslist(orgId.value, regId.value, '')
  console.log(imageslist)
  images.value = imageslist
}
const selectImage = (imageUrl: string, id: number) => {
  console.log(imageUrl)
  console.log(id)
  if (selecteimagedone.value == '1') {
    selecteimagedone.value = imageUrl
    selecteimagedoneid = id
    return
  }
  if (selecteimagedtwo.value == '2') {
    selecteimagedtwo.value = imageUrl
    selecteimagedtwoid = id
    return
  }
  if (selecteimagedthree.value == '3') {
    selecteimagedthree.value = imageUrl
    selecteimagedthreeid = id
    return
  }
}
//删除选中的图
const deleteimage = (flag: string) => {
  if (flag == '1') {
    selecteimagedone.value = '1'
    selecteimagedoneid = 0
    return
  } else if (flag == '2') {
    selecteimagedtwo.value = '2'
    selecteimagedtwoid = 0
    return
  } else if (flag == '3') {
    selecteimagedthree.value = '3'
    selecteimagedthreeid = 0
    return
  }
}
//更新图片标识方法
const upimageselect = async () => {
  updateexamineimage.value.push({
    id: selecteimagedoneid.toString(),
    isDelete: '',
    deletePerson: '',
    selected: '1'
  })
  updateexamineimage.value.push({
    id: selecteimagedtwoid.toString(),
    isDelete: '',
    deletePerson: '',
    selected: '1'
  })
  updateexamineimage.value.push({
    id: selecteimagedthreeid.toString(),
    isDelete: '',
    deletePerson: '',
    selected: '1'
  })

  const response = await ultrasoniccomApi.updateexamineimagelist(updateexamineimage.value)
  if (response) {
    console.log('更新图片标识接口调用成功')
  }
  updateexamineimage.value = []
}
//删除图片
const upimagedeleteor = async () => {
  updateexamineimage.value.push({
    id: deleteimageid.value,
    isDelete: '1',
    deletePerson: Profilevo.value.username,
    selected: ''
  })

  const response = await ultrasoniccomApi.updateexamineimagelist(updateexamineimage.value)
  if (response) {
    console.log('删除图片标识接口调用成功')
  }
  //清空选中ID
  deleteimageid.value = ''
  updateexamineimage.value = []
}
const handleTabChange = async () => {
  if (activeName.value == 'report') {
    if (reportimages.value.length === 0) {
      const imageslist = await ultrasoniccomApi.getimageslist(orgId.value, regId.value, '1')
      console.log(imageslist)
      reportimages.value = imageslist
    }
  }
}
// 计算年龄
const age = ref()
const calculateAge = (birthdate) => {
  if (!birthdate) {
    age.value = null
    return
  }

  const today = new Date()
  const birth = new Date(birthdate)

  let yearsDiff = today.getFullYear() - birth.getFullYear()

  // Check if the birthday hasn't occurred yet this year
  const hasBirthdayPassed =
    today.getMonth() > birth.getMonth() ||
    (today.getMonth() === birth.getMonth() && today.getDate() >= birth.getDate())

  if (!hasBirthdayPassed) {
    yearsDiff--
  }

  age.value = yearsDiff
}

//基本信息
const applyFormVO = ref<PatientexamlistVO>({} as PatientexamlistVO)
//下拉模版类别
const fordevicemValue = ref('')
//下拉清除
const selectclear = async () => {
  //选择模版后 刷新接口
  //通用
  const dd = await ultrasoniccomApi.getreporttemplatelist('', '', '')
  treeData.value = dd

  const pridate = await ultrasoniccomApi.getreporttemplatelist('', '', '1')
  privateData.value = pridate
}
const fordevicemData = ref<any[]>([])

const formRules = reactive({})
const formRef = ref() // 表单 Ref
//用户信息的table页
const activeName = ref('first')

//阴性阳性
const radio1 = ref('')
const cancelSelection = () => {
  radio1.value = ''
}
//诊断结论
const zdjl = ref('')
//所见
const sj = ref('')

//树相关
const selectTree = ref()
// 通用树数据
const treeData = ref([])
// 私有树数据
const privateData = ref([])
// 树配置项
const treeDefaultProps = {
  children: 'children',
  label: 'tempname'
}
//当前选中节点的值
let strzdjl: string = ''
let strsj: string = ''
let pid:string=''//当前节点的父id
// 树节点选中事件
const handleTreeNodeClick = async (data) => {
  strzdjl = data.diagResults
  strsj = data.examDescription
  pid=data.pid
  console.log("父节点"+data.pid)
  dialogTableVisible.value = true
}
//下拉选择事件
const handleselectchange = async () => {
  console.log(fordevicemValue.value)

  if (fordevicemValue.value) {
    //选择模版后 刷新接口
    //通用
    const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
    treeData.value = dd

    const pridate = await ultrasoniccomApi.getreporttemplatelist(
      '',
      String(fordevicemValue.value),
      '1'
    )
    privateData.value = pridate
  }
}
//患者主键
let ID: number
//orgid
const orgId = ref('')

//regid
const regId = ref('')
/** 打开弹窗 */
const open = async (id: number, orgid: string, regid: string) => {
  resetForm()

  console.log('orgid' + orgid)
  console.log('regid' + regid)
  console.log('id' + id)
  orgId.value = orgid
  regId.value = regid
  ID = id
  dialogVisible.value = true
  dialogTitle.value = '书写报告(超声)'
  // 提交请求
  formLoading.value = true
  try {
    //通用
    const dd = await ultrasoniccomApi.getreporttemplatelist('', String(fordevicemValue.value), '')
    treeData.value = dd
    console.log('返回值1' + dd)
    console.log('返回值2' + treeData.value)
    //私有
    const pridate = await ultrasoniccomApi.getreporttemplatelist(
      '',
      String(fordevicemValue.value),
      '1'
    )
    privateData.value = pridate
    //查询患者信息 根据ID
    getPatientexamlist(id)

    //获取登录人信息
    getlogininfo()
  } finally {
    formLoading.value = false
  }
}
//查询患者信息 根据ID
const getPatientexamlist = async (id: number) => {
  const data = await PatientexamlistApi.getPatientexamlist(id)
  applyFormVO.value = data
  //阳性阴性 赋值
  radio1.value = applyFormVO.value.diagFlag
  zdjl.value = applyFormVO.value.diagResults
  sj.value = applyFormVO.value.examDescription
  notes.value = applyFormVO.value.notes
  calculateAge(applyFormVO.value.birthday)
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
//打印方法  暂时不需要  使用v-print
const PrintForm = () => {
  // window.print()
  // 发送操作成功的事件
  emit('success')
}
//获取当前登录人信息
const getlogininfo = async () => {
  Profilevo.value = await getUserProfile()
}




/** 重置表单 */
const resetForm = () => {
  applyFormVO.value={} as PatientexamlistVO
  pid=''
   strzdjl= ''
    strsj = ''
  activeName.value = 'first'
  deleteimageid.value = ''
  updateexamineimage.value = []
  //第一个图
  selecteimagedone.value = '1'
  //第二个图
  selecteimagedtwo.value = '2'
  //第三个图
  selecteimagedthree.value = '3'
  selecteimagedoneid = 0
  selecteimagedtwoid = 0
  selecteimagedthreeid = 0
  images.value = []
  reportimages.value = []
  selectTree.value = ''
  treeData.value = []
  privateData.value = []
  fordevicemData.value = []
  fordevicemValue.value = ''
  upFJApplyformVO.value = []
  formRef.value?.resetFields()
  orgId.value = ''
  regId.value = ''
}

/** 选择图片，用于删除 */
const chooseImage = (event, id: number) => {
  console.log(id)
  deleteimageid.value = id.toString()
  const items = document.querySelectorAll('.image-item')

  items.forEach((item) => {
    item.classList.remove('image-item-selected')
  })

  console.log(event)

  event.target.parentNode.classList.add('image-item-selected')
}
</script>

<style>
.container {
  display: flex;
  height: 950px;
}

.left {
  flex: 0 0 200px; /* 固定宽度 */
  background: lightblue;
}

.middle {
  flex: 1; /* 占据剩余空间 */
  margin-left: 2px;
  background: rgb(238, 240, 238);
}

.right {
  flex: 0 0 200px; /* 固定宽度 */
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.custom-dialog {
  width: 1500px; /* 设置宽度 */
  height: 1100px; /* 设置高度 */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

.demo-image {
  display: flex;
  justify-content: center;
}

.demo-image .el-card:not(:last-child) {
  margin-right: 100px;
}
.radio-group-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px; /* 调整上方外边距 */
}
/* 右侧图片列表样式 */
.image-container {
  /* 添加一些外边距来控制图像容器与周围元素之间的间距 */
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 设置图像之间的间距 */
}

.image-item {
  /* 可选：设置图像的宽度和高度 */
  width: 200px;
  height: 200px;
  cursor: pointer;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.image-item:hover {
  transform: scale(1.1); /* 放大容器 */
}

.image-item-selected {
  outline: none;
  border-color: yellow;
  box-shadow: 0 0 10px yellow;
}

.image-item:active {
  transform: scale(0.9); /* 缩小图像 */
}
/* 诊断医生等样式 */
.form-row {
  display: flex;
  justify-content: space-between; /* 将元素左右对齐 */
  margin-top: 10px;
}

.form-item {
  flex: 1; /* 均分宽度，使两个输入框平分容器的宽度 */
  margin-right: 20px;
}

/* 报告样式 */
.ultrasound-report {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative;
}

.ultrasound-report h1,
.ultrasound-report h2 {
  text-align: center;
}

.patient-info p,
.ultrasound-findings p,
.ultrasound-recommendation p {
  margin: 5px 0;
}

.ultrasound-findings h3,
.ultrasound-recommendation h3 {
  margin-top: 20px;
}
.image-gallery {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.image-gallery img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 5px;
}
/* 不打印区域 */
@media print {
  .ignore-print {
    display: none;
  }
}

/* 报告的P标签 */
.patient-info {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  flex-basis: 25%;
  /* 设置其他样式属性，如 padding、margin 等 */
}
</style>