transitPlatForm-Vue3/src/views/regional/inspectionReport/report/index.vue

<template>
  <div class="app-container">
    <div ref="compactForm">
      <el-row :gutter="5" class="compact-form" v-show="showSearch">
        <el-form :model="queryParams" ref="queryRef" label-width="6.25rem" :rules="queryRules" style="width: 100%;"
          :size="aotuSize">
          <el-row>
            <el-col :span="4">
              <el-form-item label="委托机构：" prop="yljg">
                <el-input v-model="queryParams.yljg" :title="queryParams.yljg" :size="aotuSize" readonly
                  v-if="!checkRole(['admin'])" />
                <SelectTable v-model:data="queryParams.yljg" :fields="ksdhFields" :tableData="hosList" v-else
                  label="label" :size="aotuSize" value="label" placeholder="请选择委托机构" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="打印状态：" prop="dybz">
                <el-select v-model="queryParams.dybz" placeholder="请选择" clearable @change="handleQuery">
                  <el-option label="已打印" value="1" />
                  <el-option label="未打印" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="科室：" prop="ksdh">
                <SelectTable v-model:data="queryParams.ksdh" :fields="ksdhFields" :tableData="dictData.DP || []"
                  :size="aotuSize" label="label" value="value" objKey="value" :border="true" placeholder="请选择科室"
                  @getDataValue="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="病人类型：" prop="brlyname">
                <SelectTable v-model:data="queryParams.brlyname" :fields="brlxFields" :tableData="dictData.PT || []"
                  :size="aotuSize" label="label" value="label" objKey="label" :border="true" placeholder="请选择科室"
                  @getDataValue="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="病人号：" prop="brdh">
                <el-input v-model="queryParams.brdh" clearable placeholder="请输入病人号" @keyup.enter="handleQuery"
                  @clear="handleQuery" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form-item label-width="40px">
                <el-checkbox v-model="queryParams.alarmflag" label="仅危急值" @change="alarmHandle" :size="aotuSize" />
                <el-checkbox v-model="queryParams.jzbz" label="仅急诊" @change="jzbzHandle" :size="aotuSize" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="姓名：" prop="brxm">
                <el-input v-model="queryParams.brxm" clearable placeholder="请输入姓名" @keyup.enter="handleQuery"
                  @clear="handleQuery" />
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="床号：" prop="ch">
                <el-input v-model="queryParams.ch" clearable placeholder="请输入床号" @keyup.enter="handleQuery"
                  @clear="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="日期：" prop="times">
                <el-date-picker v-model="queryParams.times" type="daterange" range-separator="-"
                  start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="50px">
                <el-button icon="search" type="primary" @click="handleQuery">
                  搜索
                </el-button>
                <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-row :gutter="10" class="mb8 mt10">
          <!-- <el-col :span="1.5">
            <el-button type="primary" plain icon="Edit" :size="aotuSize" @click="selectStatusRows">勾选所有未打印</el-button>
          </el-col> -->
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Upload" :loading="printLoading" :size="aotuSize"
              @click="printPdf">打印报告</el-button>
          </el-col>

          <!-- <right-toolbar v-model:showSearch="showSearch" @updateColumns="updateColumns" @queryTable="handleQuery"
            :columns="columns"></right-toolbar> -->
        </el-row>
        <div>
          <CustomTable ref="tableRefs" :data="tableData" :columns="columns" :config="tableConfig" :loading="loading"
            @row-click="rowHandle" :enableColumnDrag="true" @column-drag-end="handleColumnDragEnd">
            <template #dybz="{ row }">
              <svg-icon v-if="row.dybz == 1" icon-class="lvgou" />
            </template>
            <template #alarmflag="{ row }">
              {{ row.alarmflag == 1 ? '危' : '' }}
            </template>
            <template #jzbz="{ row }">
              {{ row.jzbz == 1 ? '急' : '' }}
            </template>
          </CustomTable>
        </div>
        <div class="mt5 mb5">
          <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
            :size="aotuSize" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

      </el-col>
      <el-col :span="8" class="right-table">
        <!-- <div class="title">检验结果</div> -->
        <div class="mb8 mt10">
          <!-- <el-button type="primary" plain :size="aotuSize" @click="openDB">对比历史</el-button> -->
          <el-select class="ml10" placeholder="请选择复制" style="width: 140px" @change="copyData" :size="aotuSize">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <!-- <el-button type="primary">知识库</el-button> -->
        </div>
        <div>
          <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig"
            @row-click="xmrowHandle" ref="rightTableRef">
            <template #jgbz="{ row }">
              {{ formatJgbz(row.jgbz) }}
            </template>
          </CustomTable>
        </div>
        <div class="mt10" v-if="bottomTableData.length > 0"></div>
        <div>
          <CustomTable v-if="bottomTableData.length > 0" :data="bottomTableData" :columns="bottomColumns"
            :config="bottomTableConfig">
          </CustomTable>
        </div>
        <div v-if="bottomTableData.length > 0" class="expert-comment" :title="expertComment">
          专家评语：{{ expertComment }}
        </div>
      </el-col>
    </el-row>

    <!-- 样本流程 -->
    <div class="time-line-box">
      <div v-for="(item, i) in timelineItems" :key="i" class="time-line-item">
        <div v-if="i != 0" class="timeline-connector">
          <img class="timg" src="@/assets/images/yjt.png" alt="">
        </div>
        <div :class="['timeline-content', i > lastTimeIndex ? 'no_active' : '']">
          <div :class="['index', lastTimeIndex == i ? 'active' : '']">{{ Number(i) + 1 }}</div>
          <div class="timeline-title">{{ item.title }}</div>
          <div class="timeline-time">{{ item.time }}</div>
        </div>
      </div>
    </div>


    <!-- 结果对比 -->
    <el-dialog v-model="dialogVisible" title="结果对比" draggable :close-on-click-modal="false">
      <div class="flex-between">

      </div>
      <el-table ref="diaTableRef" :data="compareTableData" style="width: 100%" @row-click="handleRowClick"
        highlight-current-row border max-height="350px">
        <el-table-column prop="xmdh" label="项目编号" fixed align="center" width="150px" />
        <el-table-column prop="xmmc" label="项目名称" fixed align="center" />
        <template v-for="(period) in periods" :key="period">
          <el-table-column :label="period" :prop="period" :width="150" align="center" />
        </template>
      </el-table>

      <div ref="myEcharts" style="width:100%;height: 350px" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/elTable/index.vue'
import { reportList, reportPrintPdf, reportResult, reportMedList, reportFsresult } from '@/api/checkCode/index'
import dayjs from 'dayjs';
import SelectTable from '@/components/SelectTable/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { classCom } from '@/utils/classCom'
import * as echarts from 'echarts';
import { comDict } from '@/utils/dict'
import useUserStore from '@/store/modules/user'
import { listhospital } from '@/api/regional/dict/hospital';
import { checkRole } from '@/utils/permission'
const userStore = useUserStore()
const aotuSize = classCom.useAutoSize();
const compactForm = ref<HTMLElement | null>(null);
const heightForm = ref(90);
const dialogVisible = ref(false)
const tableRefs = ref()
const diaTableRef = ref()
const myEcharts = ref()
const options = ref([
  { label: '复制全部数据', value: 'All' },
  { label: '复制异常数据', value: 'N' },
  { label: '复制正常数据', value: 'Y' },
])
interface QueryParams {
  times: string[]; // 明确类型为字符串元组
  alarmflag: boolean,
  jzbz: boolean,
  ksdh: string,
  brlyname: string,
  brxm: string,
  brdh: string,
  ch: string,
  dybz: string,
  sqh: string,
  pageNum: number,
  pageSize: number
}

// 提交表单数据
const queryParams = reactive<QueryParams>({
  times: ['2025-08-19', '2025-08-19'],
  // ksdh: '0203',
  ksdh: '',
  brlyname: '',
  sqh: '25080109476',
  alarmflag: false,
  jzbz: false,
  brxm: '',
  brdh: '',
  ch: '',
  dybz: '',
  pageNum: 1,
  pageSize: 20,
  yljg: userStore.sysLoginParam.loginYLJGName,
});

const total = ref(0);

const printLoading = ref(false);
const single = ref(true);
const multiple = ref(true);
const alarmflag = ref()
const jzbz = ref()
const showSearch = ref(true);
const queryRef = ref()
// 项目点击数据
const Info = ref<any>({})
// 定义校验规则
const queryRules = ref({
  // clientId: [
  //   { required: true, message: '编号不能为空', trigger: 'blur' },

  // ],

  // failed3: [
  //   { required: true, message: '条码状态不能为空', trigger: 'change' },
  // ],
})


// 时间线数据
const timelineItems = ref(
  [
    { title: '检验申请', time: '' },
    { title: '标本采集', time: '' },
    { title: '标本送检', time: '' },
    { title: '标本签收', time: '' },
    { title: '上机检验', time: '' },
    { title: '结果审核', time: '' },
  ]
);

// 计算最后一个有时间的节点索引
const lastTimeIndex = computed(() => {

  const lastIndex = timelineItems.value.findLastIndex((item: any) => item.time);
  if (lastIndex === -1) {
    return -1
  } else {
    return lastIndex;
  }
});

const handleQuery = async () => {
  const valid = await queryRef.value.validate().catch(() => { });
  if (!valid) return false;
  getList()
}

const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  handleQuery()
}
const handleCurrentChange = (val: number) => {
  queryParams.pageNum = val
  handleQuery()
}
// 重置
const resetQuery = () => {
  queryRef.value?.resetFields();
  getList()
}

const loading = ref(false);
// 勾选框数据
const rows = ref<any[]>([])
// 数据源
const tableData = ref([])
// 配置项
const columns = ref([
  { type: 'selection', visible: true, align: 'center', width: 30, label: '多选框' },
  { prop: 'yljg', label: '委托机构', align: 'center', visible: true, width: 200 },
  { prop: 'brdh', label: '病人代号', align: 'center', visible: true, width: 100 },
  { prop: 'brxm', label: '病人姓名', align: 'center', visible: true, },
  { prop: 'brxbname', label: '性别', align: 'center', visible: true, width: 40 },
  { prop: 'ch', label: '床号', align: 'center', visible: true, width: 50 },
  { prop: 'jymd', label: '检验目的', align: 'center', visible: true, width: 200 },
  { prop: 'yblxname', label: '样本类型', align: 'center', visible: true, },
  { prop: 'sqsj', label: '申请时间', align: 'center', visible: true, width: 150 },
  { prop: 'sqh', label: '条码号', align: 'center', visible: true, width: 150 },
  { prop: 'confirmtime', label: '报告时间', align: 'center', visible: true, sortable: true, width: 150 },
  { prop: 'sjysname', label: '送检医生', align: 'center', visible: true, width: 80 },
  { prop: 'brlyname', label: '病人类型', align: 'center', visible: true, width: 80 },
  { prop: 'jyrq', label: '检验日期', align: 'center', visible: true, width: 100 },
  { prop: 'ybh', label: '样本号', align: 'center', visible: true, width: 60 },
  { prop: 'yqmc', label: '仪器名称', align: 'center', visible: true, width: 150 },
  { prop: 'dybz', label: '印', align: 'center', visible: true, slot: 'dybz', width: 40 },
  { prop: 'jzbz', label: '急', align: 'center', visible: true, slot: 'jzbz', width: 40 },
  { prop: 'alarmflag', label: '危', align: 'center', visible: true, slot: 'alarmflag', width: 40 },
  // { prop: 'yqdl', label: '仪器', align: 'center', visible: true, width: 100 },
  { prop: 'jcjg', label: '检验机构', align: 'center', visible: true, width: 150 },
])

const selectionChange = (selection: any) => {
  rows.value = selection
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

const rightTableRef = ref()
const rowHandle = (row: any) => {
  console.log('row==>', row);
  if (row.yqdl == 2) {
    rightColumns.value[1].visible = false
    rightColumns.value[2].visible = true
    rightColumns.value[4].visible = false
    rightColumns.value[5].visible = false
    rightColumns.value[6].visible = true
  } else {
    rightColumns.value[1].visible = true
    rightColumns.value[2].visible = false
    rightColumns.value[4].visible = true
    rightColumns.value[5].visible = true
    rightColumns.value[6].visible = false
  }
  timelineItems.value =
    [
      { title: '检验申请', time: row.sqsj },
      { title: '标本采集', time: row.cysj },
      { title: '标本送检', time: row.bbsjsj },
      { title: '标本签收', time: row.jssj },
      { title: '上机检验', time: row.sjsj },
      { title: '结果审核', time: row.confirmtime },
    ]

  Info.value = row

  reportResult({ bgdh: row.bgdh }).then((res) => {
    if (res.code == 0) {
      rightTableData.value = res.data
      nextTick(() => {
        rightTableRef.value.setCurrentRow(res.data[0])
      })
      xmrowHandle(res.data[0])
    }
  })
}

const handleColumnDragEnd = (newColumns: any) => {
  columns.value = newColumns.columns
}

// 打印单张Pdf
const printPdf = () => {
  printLoading.value = true
  reportPrintPdf({ bgdh: Info.value.bgdh }).then((res) => {
    if (res.code == 0) {
      if (!res.data) return ElMessage.warning('未找到打印文件')
      classCom.printBase64PDF(res.data.report)
    }
  }).finally(() => {
    printLoading.value = false
  })
}

// 单元格样式
const cellStyleHd = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  // console.log(row, column, rowIndex, columnIndex);
  if (column.label == "急" && row.jzbz == "1") {
    return { color: '#f00' };
  }
  if (column.label == "危" && row.alarmflag == "1") {
    return { color: '#f00' };
  }
};

// 表格配置
const tableConfig = ref(
  {
    // stripe: true, // 斑马纹
    border: true, // 边框
    height: '', // 高度
    highlightCurrentRow: true, // 高亮当前行
    fit: true,
    cellStyle: cellStyleHd
  }
)

// 勾选未打印
const selectStatusRows = () => {
  tableRefs.value.clearSelection()
  tableData.value.forEach((item: any) => {
    if (item.dybz != 1) {
      tableRefs.value.toggleRowSelection(item, true)
    }
  })
}
const alarmHandle = (val: boolean) => {
  if (val) {
    queryParams.jzbz = false
    alarmflag.value = '1'
    jzbz.value = null
  } else {
    alarmflag.value = null
  }
  getList()
}
const jzbzHandle = (val: boolean) => {
  if (val) {
    queryParams.alarmflag = false
    alarmflag.value = null
    jzbz.value = '1'
  } else {
    jzbz.value = null
  }
  getList()
}


interface ColumnItem {
  prop: string;
  label: string;
  visible: boolean;
  key: number;
  align?: string;
  slot?: string;
  width?: string | number;
  sortable?: boolean;
  type?: string;
}
// 更新列
const updateColumns = (arr: any[]) => {
  columns.value = arr
};

const ksdhFields = ref([
  { prop: 'label', label: '名称', width: 150, enablePinyinSearch: true },
  { prop: 'value', label: '代号', width: 120, enablePinyinSearch: true },
])

const brlxFields = ref([
  { prop: 'value', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'label', label: '名称', width: 120, enablePinyinSearch: true },
])



// 右侧数据源
const rightTableData = ref([])
// 配置项
const rightColumns = ref([
  { prop: 'xmdh', label: '项目代号', align: 'center', visible: true, },
  { prop: 'xmmc', label: '项目名称', align: 'center', visible: true, },
  { prop: 'xmmc', label: '培养结果', align: 'center', visible: true, width: 150 },
  { prop: 'csjg', label: '检验结果', align: 'center', visible: true, },
  { prop: 'refs', label: '参考值', align: 'center', visible: true, },
  { prop: 'dw', label: '单位', align: 'center', visible: true, },
  { prop: 'od', label: '菌落计数', align: 'center', visible: true, },
  { prop: 'jgbz', label: '结果标志', align: 'center', visible: true, slot: 'jgbz' },
])

const rightCellStyleHd = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  if (column.label == "检验结果" && (row.alarm_flag ?? "").trim().length > 0) {
    return { background: '#f00  !important', color: '#FFF' };
  }

  if (column.label == "检验结果" && row.jgbz == "H") {
    return { background: '#ffc0c0  !important', color: '#606266' };
  }
  if (column.label == "检验结果" && row.jgbz == "L") {
    return { background: '#8080ff  !important', color: '#fff' };
  }
  if (column.label == "检验结果" && row.jgbz == "P") {
    return { background: '#ffc0c0  !important', color: '#606266' };
  }
  if (column.label == "检验结果" && row.jgbz == "Q") {
    return { background: '#ffff80  !important', color: '#606266' };
  }
};
// 表格配置
const rightTableConfig = ref(
  {
    // stripe: true, // 斑马纹
    border: true, // 边框
    height: '60.5vh', // 高度
    highlightCurrentRow: true, // 高亮当前行
    cellStyle: rightCellStyleHd
  }
)

const formatJgbz = (v: string) => {
  const jgbzMap = {
    'H': '高',
    'L': '低',
    'N': '阴性',
    'P': '阳性',
    'Q': '弱阳性',
    'M': '正常'
  };
  return jgbzMap[v as keyof typeof jgbzMap] ?? '';
}

const expertComment = ref('')
const xmRow = ref<any>({})
// 查询抗生素
const xmrowHandle = (row: any) => {
  xmRow.value = row

  const data = {
    bgdh: row.bgdh,
    xmdh: row.xmdh
  }
  reportMedList(data).then((res: any) => {
    if (res.code == 0) {
      bottomTableData.value = res.data
      expertComment.value = res.data[0]?.textresult1;
      if (res.data.length > 0) {
        nextTick(() => {
          rightTableConfig.value.height = `calc(32.5vh - ${heightForm.value}px)`
          rightTableRef.value?.doLayout && rightTableRef.value.doLayout();
        });
      } else {
        nextTick(() => {
          rightTableConfig.value.height = '60.5vh'
          rightTableRef.value?.doLayout && rightTableRef.value.doLayout();
        });
      }
    }
  })
}

const periods = ref<string[]>([])

const compareTableData = ref([])


// 历史数据对比
const openDB = () => {
  // 00507620
  compareTableData.value = []
  if (!xmRow.value.xmdh) return ElMessage.error('至少选择一条数据进行对比')
  const data = {
    brdh: Info.value.brdh,
    xmdh: xmRow.value.xmdh
  }
  reportFsresult(data).then((res: any) => {
    periods.value = []
    if (res.code == 0) {
      const arr: string[] = res.data.map((item: any) => item.confirmdt);
      periods.value = [...new Set(arr)];
      res.data.forEach((v: any) => {
        arr.forEach((item: any) => {
          if (item == v.confirmdt) {
            v[item] = v.csjg
          }
        })
      });

      // @ts-ignore  忽略重组数据动态时间key
      compareTableData.value = formatGroupedData(res.data)
      dialogVisible.value = true
      nextTick(() => {
        diaTableRef.value.setCurrentRow(compareTableData.value[0])
        handleRowClick(compareTableData.value[0])
      })
    }
  })
}


interface copyItem {
  xmdh: string;
  xmmc: string;
  csjg: string | number;
  refs: string | number;
  dw: string;
  jgbz: string;
}
// 复制函数
const copyData = (type: string) => {
  let str = ''
  const getCommonRow = (item: copyItem) => `${item.xmdh}\t${item.xmmc}\t${item.csjg}\t${item.refs}\t${item.dw}\t${item.jgbz}\t\r\n`;
  rightTableData.value.forEach((v: any) => {
    if (type == 'All') {
      str = str + getCommonRow(v)
      // str = str + v.xmmc + v.csjg + v.dw + + ',';
    }
    if (type == 'N' && v.jgbz != 'M' && v.jgbz != '') {
      str = str + getCommonRow(v)
    }
    if (type == 'Y' && v.jgbz == 'M' && v.jgbz != '') {
      str = str + getCommonRow(v)
    }
  })

  var input = document.createElement('textarea');
  if (!str) return ElMessage.error('没有数据可复制');
  // 把文字放进input中，供复制
  input.value = str;
  document.body.appendChild(input);
  // 选中创建的input
  input.select();
  var copy_result = document.execCommand('copy');
  if (copy_result) {
    ElMessage.success('复制成功');
  } else {
    ElMessage.error('复制失败');
  }
  // 移除
  document.body.removeChild(input);
}

// 数据重组
const formatGroupedData = (data: any[]) => {
  if (!data || data.length === 0) return [];

  const groupMap: any = {};
  data.forEach(item => {
    const key = item.xmdh;
    if (!groupMap[key]) {
      groupMap[key] = {
        xmdh: item.xmdh,
        xmmc: item.xmmc,
        // confirmdt: item.confirmdt
      };
    }
    const dateKeys = Object.keys(item).filter(key =>
      /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(key) // 匹配 YYYY-MM-DD HH:mm:ss 时间格式
    );
    // 将日期键值对添加到分组对象
    dateKeys.forEach(dateKey => {
      groupMap[key][dateKey] = item[dateKey];
    });
  });
  // 将 Map 转为数组
  return Object.values(groupMap);
};

const handleRowClick = (row: any) => {
  getEcharts(row)
}

const getEcharts = (data: any) => {
  const dateKeys = Object.keys(data).filter(key =>
    /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(key)
  );
  const Intance = echarts.init(myEcharts.value);
  const xData = dateKeys;
  let seriesData: string[] = []
  seriesData = dateKeys.map(item => data[item]);

  const option = {
    title: {
      text: data.xmmc,
      top: '5',
      right: '5%',
      left: '20',
      // bottom: '20%'
      // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      // bottom: '3%',
      height: '80%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          // color: 'rgba(193, 207, 220, 1)',
        }
      },
      axisLabel: {
        rotate: 30,
        textStyle: {
          color: "#8D949B "
        }
      },
    },
    yAxis: [{
      // name: '单位(mm)',
      type: 'value',
      axisLabel: {
        textStyle: {
          color: "#8D949B"
        },
        // formatter: '{value}%'


      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#24abf2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        },
      },
    }
    ],
    series: [{
      name: data.xmmc,
      type: 'line',
      data: seriesData,
      symbol: 'circle',
      symbolSize: 5, //标记的大小
      lineStyle: {
        normal: {
          width: 2,
          color: '#24abf2',
        }
      },
      itemStyle: {
        normal: {
          color: '#24abf2',
        }
      },
      smooth: true
    }
    ]
  };

  Intance.setOption(option);
}

// 右侧数据源
const bottomTableData = ref([])
// 配置项
const bottomColumns = ref([
  { prop: 'ywdh', label: '抗生素代码', align: 'center', visible: true, },
  { prop: 'ywmc', label: '抗生素名称', align: 'center', width: 200, visible: true, },
  { prop: 'mic', label: 'MIC', align: 'center', visible: true },
  { prop: 'rad', label: 'KB', align: 'center', visible: true },
  { prop: 'testResult', label: '药敏结果', align: 'center', visible: true },
])
const botCellStyleHd = ({ row, column, rowIndex, columnIndex }: {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}) => {
  if (column.label == '药敏结果' && row.jgbz == 'R') {
    return { background: '#ffc0c0  !important', color: '#606266' };
  }
  if (column.label == '药敏结果' && row.jgbz.trim() == "") {
    return { background: '#ffff80  !important', color: '#606266' };
  }
}
// 表格配置
const bottomTableConfig = ref(
  {
    // stripe: true, // 斑马纹
    border: true, // 边框
    height: '35vh', // 高度
    highlightCurrentRow: true, // 高亮当前行
    cellStyle: botCellStyleHd
  }
)
interface DictData {
  DP?: Array<any>;
  PT?: Array<any>;
  [key: string]: any[] | undefined; // 添加索引签名以支持动态访问
}

const hosList = ref([])
// 字典数据存储
const dictData = ref<DictData>({});

onMounted(async () => {
  // 初始化3天区间（今天-前两天）
  const end = dayjs().format('YYYY-MM-DD');
  const start = dayjs().subtract(2, 'day').format('YYYY-MM-DD'); //add 时间往后
  queryParams.times = [start, end];
  // console.log(queryParams.times);
  getList()
  adjustTableHeight();

  listhospital().then((res) => {
    hosList.value = res.rows.map((item) => {
      return {
        label: item.hospitalName,
        value: item.hospitalCode
      }
    })
  })

  // 加载病人来源字典
  const dictRefs = await comDict('PT', 'DP');

  // 从 ref 中获取实际数据
  dictData.value = {
    PT: toRaw(dictRefs.PT.value) || [],
    DP: toRaw(dictRefs.DP.value) || [],
  };
});


const getList = () => {
  const data = {
    alarmflag: alarmflag.value,
    jzbz: jzbz.value,
    dybz: queryParams.dybz,
    ksdh: queryParams.ksdh,
    brlyname: queryParams.brlyname,
    brxm: queryParams.brxm,
    brdh: queryParams.brdh,
    ch: queryParams.ch,
    yljg: queryParams.yljg,
    st: '',
    et: '',
    pageSize: queryParams.pageSize || 10,
    pageNum: queryParams.pageNum || 1
  }
  if (queryParams.times && queryParams.times.length) {
    data.st = queryParams.times[0]
    data.et = queryParams.times[1]
  } else {
    return ElMessage.error('日期时间段不能为空');
  }
  loading.value = true
  reportList(data).then((res) => {
    if (res.code == 200) {
      loading.value = false
      tableData.value = res.rows
      total.value = res.total
      if (res.rows.length > 0) {
        tableRefs.value.setCurrentRow(res.rows[0])
        rowHandle(res.rows[0])
      } else {
        rightTableData.value = []
        bottomTableData.value = []
      }
    }
  })
}

// 计算table高度
watch(showSearch, () => {
  nextTick(() => {
    adjustTableHeight();
  })
}, { immediate: true });

function adjustTableHeight() {
  if (compactForm.value) {
    heightForm.value = compactForm.value.offsetHeight;

    nextTick(() => {
      tableConfig.value.height = `calc(74vh - ${heightForm.value + 50}px)`
      tableRefs.value?.doLayout && tableRefs.value.doLayout();
    });

  }
}

</script>

<style scoped lang="scss">
.compact-form {
  border-bottom: 1px solid #E1E9F7;

  .el-form-item {
    margin-bottom: .3125rem;
  }
}

.title {
  border-bottom: 1px solid #E1E9F7;
  margin-bottom: .625rem;
  padding: .625rem;
  font-weight: 700;
}


.time-line-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: .35rem;
  background-color: #f0f3f8;
  padding: .3rem 2.5rem;
}

.time-line-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 16.6%;
  // padding: 0 30px;

  .timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .index {
      width: 1.875rem;
      height: 1.875rem;
      line-height: 1.875rem;
      background: #E1E9F7;
      border-radius: 50%;
      text-align: center;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 1.125rem;
      color: #4767A3;
    }

    .active {
      background-color: #4096ff;
      box-shadow: 0 0 0 .25rem rgba(64, 150, 255, 0.2);
      color: #FFF;
    }

    .timeline-title {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 1rem;
      color: #4767A3;
    }

    .timeline-time {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: .875rem;
      color: #4767A3;
    }

  }

  .timg {
    width: 3.125rem;
  }
}

:deep(.el-form-item--default) {
  margin-bottom: 1.125rem;
}

.expert-comment {
  /* 限制最大显示行数为2行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 可选：设置行高和最大宽度，优化显示效果 */
  line-height: 1.5;
  /* 行高，根据字体大小调整 */
  max-width: 100%;
  pointer-events: auto;
  /* 允许鼠标交互 */
  cursor: default;
}
</style>