ECG/src/views/dicomForm/dicomViewForm.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    class="my-custom-close-icon"
    :fullscreen="true"
    @close="
      () => {
        newSrc = 'about:blank'
        dataLoaded = false
      }
    "
  >
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane v-if="tagLoaded" label="影像" name="first">
        <iframe
          ref="dicomframe"
          v-if="dataLoaded"
          frameborder="0"
          scrolling="no"
          style="width: 100%; height: 87vh; margin-right: 14px"
          :src="newSrc"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="报告单" name="second">
        <el-scrollbar height="80vh">
          <div style="display: flex">
            <!-- 模版区域 -->
            <div style="flex: 1; min-width: 0; border: 1px solid rgb(220, 223, 230)">
              <el-select
                v-model="fordevicemValue"
                placeholder="请选择模版类别"
                clearable
                @change="handleselectchange"
                @clear="selectclear"
                style="width: 100%"
              >
                <el-option label="门诊" value="门诊模版" />
                <el-option label="住院" value="住院模版" />
                <el-option label="体检" value="体检模版" />
              </el-select>

              <el-tabs type="border-card" style="border: none">
                <el-tab-pane label="通用模版">
                  <el-scrollbar height="114vh" style="border: 2px solid rgb(220, 223, 230)">
                    <el-tree
                      style="padding-top: 15px; padding-bottom: 20px; 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-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="私有模版">
                  <el-scrollbar height="114vh" style="border: 2px solid rgb(220, 223, 230)">
                    <el-tree
                      style="padding-top: 15px; padding-bottom: 20px; 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-scrollbar>
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- 用户信息区域 -->
            <div
              style="
                flex: 3;
                min-width: 0;
                border: 1px solid rgb(220, 223, 230);
                padding: 10px 14px 12px 2px;
                margin-left: 6px;
                margin-right: 14px;
              "
            >
              <label style="font-size: 18px; font-weight: bold; margin-left: 50px">患者信息</label>
              <el-divider />
              <el-form
                :model="applyFormVO"
                label-width="96px"
                style="max-width: 1000px; margin-left: 28px"
                :inline="false"
              >
                <el-row>
                  <el-col :span="7">
                    <el-form-item label="检查号" style="font-weight: bold">
                      <el-input v-model="applyFormVO.examId" style="width: 100%" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="姓名" style="font-weight: bold">
                      <el-input v-model="applyFormVO.pname" style="width: 100%" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="性别" style="font-weight: bold">
                      <el-input v-model="applyFormVO.gender" style="width: 100%" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <el-form-item label="出生日期" style="font-weight: bold">
                      <el-date-picker
                        v-model="applyFormVO.birthday"
                        type="date"
                        placeholder="出生日期"
                        size="default"
                        style="width: 100%"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="检查时间" style="font-weight: bold">
                      <el-date-picker
                        v-model="applyFormVO.examDate"
                        type="datetime"
                        placeholder="检查时间"
                        size="default"
                        style="width: 100%"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="送检科室" style="font-weight: bold">
                      <el-input
                        v-model="applyFormVO.billDoctorDepartment"
                        style="width: 100%"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="7">
                    <el-form-item label="申请时间" style="font-weight: bold">
                      <el-date-picker
                        v-model="applyFormVO.applicationDate"
                        type="datetime"
                        placeholder="检查时间"
                        size="default"
                        style="width: 100%"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="申请单号" style="font-weight: bold">
                      <el-input v-model="applyFormVO.regId" style="width: 100%" :disabled="true" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="7">
                    <!-- <el-form-item label="检查项目名称" label-width="160px" style="font-weight: bold">
                    <el-input
                      v-model="applyFormVO.examItemName"
                      style="width: 220px"
                      :disabled="true"
                    />
                  </el-form-item> -->
                  </el-col>
                </el-row>
              </el-form>
              <label style="font-size: 18px; font-weight: bold; margin-left: 50px">检查项目</label>
              <el-divider />
              <el-input
                v-model="applyFormVO.examItemName"
                style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 6px"
                :rows="1"
                :disabled="true"
                placeholder="检查项目"
              />
              <label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像所见</label>
              <el-divider />
              <el-input
                v-model="sj"
                style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
                :rows="4"
                type="textarea"
                placeholder="影像所见"
              />
              <label style="font-size: 18px; font-weight: bold; margin-left: 50px">影像结论</label>
              <el-divider />
              <el-input
                v-model="zdjl"
                style="width: 95%; font-size: 20px; margin-left: 40px; margin-bottom: 3px"
                :rows="4"
                type="textarea"
                placeholder="影像结论"
              />
              <label style="font-size: 18px; font-weight: bold; margin-left: 50px">报告备注</label>
              <el-divider />
              <el-input
                v-model="notes"
                style="
                  width: 95%;
                  font-size: 19px;
                  margin-left: 40px;
                  margin-top: 6px;
                  margin-bottom: 6px;
                "
                placeholder="报告备注"
              />
              <el-divider />

              <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-button label="重大阳性" value="2" />
              </el-radio-group>
              <el-divider />
              <div class="form-row-yx">
                <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>

              <div style="text-align: right">
                <el-button
                  type="primary"
                  plain
                  v-show="examinedisabled"
                  style="
                    width: 80px;
                    margin-right: 15px;
                    background-color: rgba(56, 119, 246, 1);
                    font-size: 14;
                    color: rgb(255, 255, 255);
                  "
                  @click="examine"
                >
                  审核
                </el-button>
                <el-button
                  type="success"
                  plain
                  style="
                    width: 80px;
                    margin-right: 15px;
                    background-color: rgba(56, 119, 246, 1);
                    font-size: 14;
                    color: rgb(255, 255, 255);
                  "
                  @click="save"
                  :disabled="savedisabled"
                >
                  保存
                </el-button>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  <!--  弹窗-->
  <el-dialog v-model="dialogTableVisible" title="选择结论添加方式" width="320" align-center>
    <div>
      <el-button @click="handleButtonClick('覆盖')" type="primary" style="font-size: 20px"
        >覆盖</el-button
      >
      <el-button @click="handleButtonClick('追加')" type="success" style="font-size: 20px"
        >追加</el-button
      >
      <el-button @click="dialogTableVisible = false" type="info" style="font-size: 20px"
        >关闭</el-button
      >
    </div>
  </el-dialog>
  <!--报告 保存的时候 存base64-->
</template>

<script setup lang="ts">
import { ApplyformApi, ApplyformVO, UPFJApplyformVO } from '@/api/applyregistration/applyform'
import { ultrasoniccomApi, updateexamineimageVO } from '@/api/ultrasoniccom'
import axios from 'axios'
import { PatientexamlistApi, PatientexamlistVO } from '@/api/tblist/patientexamlist'
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
import PdfContent from '@/views/applyregistration/reportPrintStatistics/ReportInfoCT.vue' // 引入你的PDF内容组件
import { createVNode, render } from 'vue'
import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

/** dicom */
defineOptions({ name: 'DicomViewForm' })
//存放生成的pdfbase
const pdfBase64 = ref('')
const dicomframe = ref()
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 savedisabled = ref(false) //保存按钮是否可用
const examinedisabled = ref(false) //审核按钮是否可见
const dataLoaded = ref(false) //是否加载网页
const tagLoaded = ref(true) //是否加载影像标签

//点击节点更新使用时间
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 save = async () => {
  try {
    // 二次确认
    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.doctorname
    examineFormVO.value.diagDoctorId = Profilevo.value.doctorID
    // 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) {
      message.alertSuccess('保存成功')
      // 接口调用成功，可以根据需要处理返回的data数据
      console.log('接口调用成功')
      console.log('data:', response.data)
      //查询患者信息 根据ID
      getPatientexamlist(ID)
      emit('success')
    } else {
      // 接口调用失败，根据具体情况处理错误
      console.error('接口调用失败:', response.msg)
    }
  } catch (error) {
    // 处理异常情况，例如接口调用失败或其他错误
    console.error('接口调用失败:', error)
  }
}
// 审核
const examine = async () => {
  if (applyFormVO.value.reportstatus === '已分析') {
    const response = await PatientexamlistApi.examine(ID.toString())
    if (response) {
      message.alertSuccess('审核成功')
      getPatientexamlist(ID)
      emit('success')
    }
  } else if (applyFormVO.value.reportstatus === '已审核') {
    message.warning('已经审核,无需再次审核')
    return
  } else {
    message.warning('请先进行保存')
    return
  }
}
//生成pdfbase64
const exportPdfToBase64 = async () => {
  // 创建一个临时的DOM元素来挂载PdfContent组件
  const tempDiv = document.createElement('div')
  document.body.appendChild(tempDiv)

  // 使用createVNode创建一个虚拟节点
  // 渲染组件到临时DOM元素  传递数据
  const componentInstance = createVNode(PdfContent, {
    ...applyFormVO.value,
    showQRcode: false
  })

  // 使用render函数将虚拟节点渲染到临时DOM元素中
  render(componentInstance, tempDiv)

  // 等待Vue组件渲染完成
  await new Promise((resolve) => setTimeout(resolve, 0)) // 使用setTimeout来模拟nextTick

  // 使用html2canvas将DOM元素转换为canvas，并设置scale参数提高分辨率
  const canvas = await html2canvas(tempDiv, {
    scale: 1, // 根据需要调整scale值
    useCORS: true
  })

  // 移除临时DOM元素
  document.body.removeChild(tempDiv)

  // 使用jsPDF生成PDF
  const imgData = canvas.toDataURL('image/jpeg', 0.8)
  const pdf = new jsPDF({
    orientation: 'landscape',
    unit: 'mm',
    format: 'a4' // 设置PDF的尺寸与canvas一致
  })

  const scalefactor = 1 // 设置一个放大因子

  const imgWidth = pdf.internal.pageSize.getWidth() * scalefactor
  const imgHeight = ((canvas.height * imgWidth) / canvas.width) * scalefactor

  pdf.addImage(imgData, 'jpeg', 0, 0, imgWidth, imgHeight)
  const pdfBase64String = pdf.output('datauristring') // 获取base64编码的PDF文件

  // 更新pdfBase64的值
  pdfBase64.value = pdfBase64String
  await PatientexamlistApi.ftppdf({ id: ID.toString(), imagebase: pdfBase64String })
}
const infoParams = ref({
  id: '',
  examId: '',
  regId: '',
  orgId: '',
  pname: '',
  gender: '',
  birthday: '',
  billDoctorDepartment: '',
  applicationDate: '',
  examDescription: '',
  diagResults: '',
  examItemName: '',
  deviceName: '',
  deviceType: '',
  diagDoctor: '',
  diagDate: '',
  reviewDoctor: '',
  reviewDate: ''
})
// 计算年龄
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)
  //判断节点类型的不需要弹
  if (data.dataType === '0') {
    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 examid = ref('')
//内嵌网页加载增加时间戳 防止缓存
const newSrc = ref('about:blank')

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

  //判断是否隐藏影像标签
  if (isLoaded == '1') {
    tagLoaded.value = false
    activeName.value = 'second'
  } else {
    tagLoaded.value = true
    activeName.value = 'first'
  }

  console.log('orgid' + orgid)
  console.log('regid' + regid)
  console.log('id' + id)
  orgId.value = orgid
  regId.value = regid
  examid.value = examId
  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
    await iframeData()
    //查询患者信息 根据ID
    getPatientexamlist(id)

    //获取登录人信息
    getlogininfo()
  } finally {
    if (newSrc.value != 'about:blank') {
      nextTick(async () => {
        console.log('------------aaaaaaaaaa--------')
        await new Promise((resolve) => setTimeout(resolve, 350))
        console.log('------------aaaaaaaaaa1--------')
        dataLoaded.value = true
        console.log('------------aaaaaaaaaa2--------')
      })
    }
    formLoading.value = false
  }
}
// 加载网页请求的数据
const iframeData = async () => {
  try {
    const response = await ultrasoniccomApi.getdcmlist(examid.value, orgId.value, regId.value)
    if (response) {
      //给打开的内嵌html 传递参数
      var localData = {
        regid: '', // 这里的 'someNumber' 应该替换为实际的数值
        orgId: '', // 这里的 'someOrgId' 应该替换为实际的组织ID
        maxSize: 10,
        do: response
      }

      // 在存入新数据之前，先删除原有的'data'项
      localStorage.removeItem('data')
      // 将对象转换为JSON字符串
      var localStorageData = JSON.stringify(localData)
      localStorage.setItem('data', localStorageData)
      const Src = `/static/dicom/dicomViewPc1.html?t=${new Date().getTime()}`
      newSrc.value = Src
    } else {
      // 如果status不是success，可以根据需要处理错误情况
      console.error('Request did not succeed:', response.data)
    }
    // dataLoaded.value = true // 请求完成后，无论成功与否，都设置dataLoaded为true
  } catch (error) {
    console.error('Error fetching data:', error)
    // dataLoaded.value = true // 即使发生错误，也设置dataLoaded为true，以便可以显示错误信息
  }
}

//查询患者信息 根据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)

  if (
    applyFormVO.value.reportstatus &&
    (applyFormVO.value.reportstatus == '已分析' ||
      applyFormVO.value.reportstatus == '已分检' ||
      applyFormVO.value.reportstatus == '待分析')
  ) {
    savedisabled.value = false
  } else {
    savedisabled.value = true
  }
  exportPdfToBase64()
}

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

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

/** 重置表单 */
const resetForm = () => {
  applyFormVO.value = {} as PatientexamlistVO
  pid = ''
  strzdjl = ''
  strsj = ''
  activeName.value = 'first'
  updateexamineimage.value = []

  selectTree.value = ''
  treeData.value = []
  privateData.value = []
  fordevicemData.value = []
  fordevicemValue.value = ''
  upFJApplyformVO.value = []
  formRef.value?.resetFields()
  orgId.value = ''
  regId.value = ''
}
</script>

<style scoped>
/* .my-container-yx {
  height: 100vh;
  width: 100vw;
}
 */
/* 报告区域 左侧模版选择字体大小 */
.treeStyle {
  font-size: 20px;
}

/* 分割线内部的间距 */
.el-divider--horizontal {
  margin: 6px;
}

/* 阴性 阳性 */
.radio-group-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  /* 调整上方外边距 */
  margin-right: 33px;
}

/* 诊断医生等样式 */
.form-row-yx {
  display: flex;
  justify-content: space-around;
  /* 将元素左右对齐 */
  margin-top: 10px;
  margin-left: 100px;
}
</style>