历史对照/其他结果

src/api/liswork/work/LisWork.ts

@@ -185,6 +185,14 @@ export function otherinstr(query?: Object) {
     params: query
   })
 }
+// 其他结果明细
+export function otherInstrDetail(query?: Object) {
+  return request({
+    url: '/lisworkpageinfo/otherinstrdetail',
+    method: 'get',
+    params: query
+  })
+}
 // 收费信息
 export function reqdetail(query?: Object) {
   return request({
@@ -257,3 +265,11 @@ export function redoResult(query?: Object) {
     params: query
   })
 }
+// 仪器组可操作仪器查询
+export function getGroupInstrdList(query?: Object) {
+  return request({
+    url: '/liswork/getGroupInstrdList',
+    method: 'get',
+    params: query
+  })
+}

src/components/SelectTable/index.vue

@@ -130,8 +130,8 @@ const processTableData = (data: object[]) => {
 const visibleChange = (val: any) => {
   searchKey.value = '';
   if (val) {
-
+    filterDataHandle()
-    nextTick(() => {
+    setTimeout(() => {
       searchInput.value.focus();
 
       currentIndex.value = filterData.value.findIndex(item => item[props.value!] === props.data);
@@ -139,9 +139,9 @@ const visibleChange = (val: any) => {
         tableRef.value.setCurrentRow(filterData.value[currentIndex.value]);
         tableRef.value.setScrollTop(currentIndex.value * 25);
       }
-    });
+    }, 10);
   }
-  filterDataHandle()
+
 };
 
 

src/views/liswork/work/history/index.vue

@@ -1,24 +1,47 @@
 <template>
   <div class="h_box">
     <div>
-      <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
+      <CustomTable ref="tableRef" :columns="columns" :data="tableData" :config="config" @row-click="handleRowClick"
-        max-height="350px">
+        :enable-column-drag="true" @column-drag-end="handleColumnDragEnd">
-        <el-table-column prop="xmdh" label="项目编号" fixed align="center" width="150px" />
+        <template #oneCsjg="{ column }">
-        <el-table-column prop="xmmc" label="项目名称" fixed align="center" />
+          <div v-html="formatHeader(column, 'one')"></div>
-        <template v-for="(period) in periods" :key="period">
-          <el-table-column :label="period" :prop="period" :width="150" align="center" />
         </template>
-      </el-table>
+        <template #twoCsjg="{ column }">
+          <div v-html="formatHeader(column, 'two')"></div>
+        </template>
+        <template #threeCsjg="{ column }">
+          <div v-html="formatHeader(column, 'three')"></div>
+        </template>
+        <template #fourCsjg="{ column }">
+          <div v-html="formatHeader(column, 'four')"></div>
+        </template>
+        <template #fiveCsjg="{ column }">
+          <div v-html="formatHeader(column, 'five')"></div>
+        </template>
+        <template #sixCsjg="{ column }">
+          <div v-html="formatHeader(column, 'six')"></div>
+        </template>
+        <template #sevenCsjg="{ column }">
+          <div v-html="formatHeader(column, 'seven')"></div>
+        </template>
+        <template #eightCsjg="{ column }">
+          <div v-html="formatHeader(column, 'eight')"></div>
+        </template>
+        <template #nineCsjg="{ column }">
+          <div v-html="formatHeader(column, 'nine')"></div>
+        </template>
+      </CustomTable>
     </div>
-    <div ref="myEcharts" style="width:100%;height: 350px" />
+    <div ref="myEcharts" class="mt20" style="width:100%;height: 40vh" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, toRefs, computed, watch } from 'vue';
+import { onMounted, ref, toRefs, computed, watch, nextTick } from 'vue';
 import * as echarts from 'echarts';
 import { historyInfo } from '@/api/liswork/work/LisWork'
-import { get } from '@vueuse/core';
+import dayjs from 'dayjs';
+import CustomTable from '@/components/elTable/index.vue'
 
 const props = defineProps({
   // 主键
@@ -30,117 +53,273 @@ const props = defineProps({
 
 // 解构 props
 const { queryParams } = toRefs(props);
-const tableData = ref([])
-const periods = ref<string[]>([])
 
+const tableData: any = ref([]);
+const tableRef = ref();
+const columns = ref([
+  { label: '项目', prop: 'xmmc', width: 140, align: 'center', visible: true, },
+  { label: '本次', prop: 'firstCsjg', width: 140, align: 'center', visible: true, },
+  { label: '上一次', prop: 'oneCsjg', width: 150, align: 'center', visible: true, headerSlot: 'oneCsjg' },
+  { label: '上二次', prop: 'twoCsjg', width: 150, align: 'center', visible: true, headerSlot: 'twoCsjg' },
+  { label: '上三次', prop: 'threeCsjg', width: 150, align: 'center', visible: true, headerSlot: 'threeCsjg' },
+  { label: '上四次', prop: 'fourCsjg', width: 150, align: 'center', visible: true, headerSlot: 'fourCsjg' },
+  { label: '上五次', prop: 'fiveCsjg', width: 150, align: 'center', visible: true, headerSlot: 'fiveCsjg' },
+  { label: '上六次', prop: 'sixCsjg', width: 150, align: 'center', visible: true, headerSlot: 'sixCsjg' },
+  { label: '上七次', prop: 'sevenCsjg', width: 150, align: 'center', visible: true, headerSlot: 'sevenCsjg' },
+  { label: '上八次', prop: 'eightCsjg', width: 150, align: 'center', visible: true, headerSlot: 'eightCsjg' },
+  { label: '上九次', prop: 'nineCsjg', width: 150, align: 'center', visible: true, headerSlot: 'nineCsjg' },
+])
+
+// 定义样式
+const styleMap: any = {
+  H: { background: '#ffc0c0 !important', color: '#606266' },
+  L: { background: '#8080ff !important', color: '#fff' },
+  P: { background: '#ffc0c0 !important', color: '#606266' },
+  Q: { background: '#ffff80 !important', color: '#FFF' }
+};
+
+// 定义列标签与标志位字段的映射关系
+const labelFlagMap: any = {
+  '本次': 'firstResultFlag',
+  '上一次': 'oneResultFlag',
+  '上二次': 'twoResultFlag',
+  '上三次': 'threeResultFlag',
+  '上四次': 'fourResultFlag',
+  '上五次': 'fiveResultFlag',
+  '上六次': 'sixResultFlag',
+  '上七次': 'sevenResultFlag',
+  '上八次': 'eightResultFlag',
+  '上九次': 'nineResultFlag',
+};
+
+const cellStyle = ({ column, row }: any) => {
+  const flagField = labelFlagMap[column.label];
+  if (!flagField) return {}; // 非目标列直接返回默认样式
+
+  // 获取当前行的标志位值
+  const flag = row[flagField];
+  // 返回对应的样式（默认返回空对象）
+  return styleMap[flag] || {};
+};
+
+const config = {
+  border: true,
+  maxHeight: '350px',
+  highlightCurrentRow: true,
+  cellStyle: cellStyle
+}
+
+const handleColumnDragEnd = (data: any) => {
+  columns.value = data.columns;
+};
+
+const formatHeader = (column: any, prefix: string) => {
+  const index = tableData.value.findIndex((item: any) => item[`${prefix}Csjg`] !== undefined);
+  if (index !== -1) {
+    const yljgKey = `${prefix}yljg`;
+    const dateKey = `${prefix}Date`;
+    const ybhKey = `${prefix}ybh`;
+    const yqdlKey = `${prefix}yqdl`;
+    const item = tableData.value[index];
+    return `${item[yljgKey]} <br /> ${item[dateKey]} <br /> ${item[yqdlKey]}(${item[ybhKey]})`;
+  }
+  return column.label;
+};
 
 const getList = () => {
   historyInfo(queryParams.value).then((res: any) => {
-    tableData.value = res.data
+    const periods = ['first', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
-  })
+    const dataMaps = new Map();
-}
+
+    periods.forEach(period => {
+      const data = res.data[period] || [];
+      const map = new Map();
+      data.forEach((item: any) => {
+        // 使用xmdh作为唯一标识
+        map.set(item.xmdh, {
+          csjg: item.csjg,
+          jyrq: dayjs(item.jyrq).format('YY/MM/DD'),
+          yqdl: item.yqdl,
+          ybh: item.ybh,
+          yljg: item.yljg,
+          result_flag: item.result_flag,
+          xmmc: item.xmmc,
+          cksx: item.cksx,
+          ckxx: item.ckxx
+        });
+      });
+      dataMaps.set(period, map);
+    });
+
+
+    const allXmdhSet = new Set<string>();
+    periods.forEach(period => {
+      const data = res.data[period] || [];
+      data.forEach((item: any) => {
+        allXmdhSet.add(item.xmdh);
+      });
+    });
+
+    tableData.value = Array.from(allXmdhSet).map((xmdh) => {
+      const row: any = {};
+
+      periods.forEach(period => {
+        const item = dataMaps.get(period).get(xmdh);
+        if (item) {
+          row[`${period}Csjg`] = item.csjg;
+          row[`${period}Date`] = item.jyrq;
+          row[`${period}yqdl`] = item.yqdl;
+          row[`${period}ybh`] = item.ybh;
+          row[`${period}yljg`] = item.yljg;
+          row[`${period}ResultFlag`] = item.result_flag;
+
+          if (!row.xmmc) {
+            row.xmmc = item.xmmc;
+            row.cksx = item.cksx;
+            row.ckxx = item.ckxx;
+          }
+        }
+      });
+
+      return row;
+    });
+    nextTick(() => {
+      tableRef.value.setCurrentRow(tableData.value[0]);
+      getEcharts(tableData.value[0])
+    })
+    // console.log('合并后的表格数据==>', tableData.value);
+  });
+};
+
 watch(() => props.queryParams, (newValue) => {
   getList()
 }, { immediate: true })
-const handleRowClick = () => { }
+
+const handleRowClick = (row: any) => {
+  console.log('row==>', row);
+  nextTick(() => {
+    getEcharts(row)
+  })
+}
 
 const myEcharts = ref()
 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 periods = ['first', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+
+  const xData = periods.map(period => { return data[`${period}Date`] || ''; })
+  const yData = periods.map(period => { return data[`${period}Csjg`] || ''; })
   const Intance = echarts.init(myEcharts.value);
-  const xData = dateKeys;
+
-  let seriesData = []
-  seriesData = dateKeys.map(item => data[item]);
 
   const option = {
     title: {
-      text: data.xmmc,
+      text: `结果走势图(项目:${data.xmmc})`,
-      top: '5',
+      left: 'center',
-      right: '5%',
+      textStyle: {
-      left: '20',
+        fontSize: 16
-      // bottom: '20%'
+      }
-      // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
     },
+    color: ['#a4beef', '#a4beef'],
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
+      formatter: function (params: any) {
+        let param = params[0];
+        return `${param.name}<br/>
+                结果: ${param.value}<br/>
+                参考范围: ${data.cksx} - ${data.ckxx}`;
+      }
+    },
+    legend: {
+      data: ['结果', `参考上限：${data.cksx}`, `参考下限：${data.ckxx}`],
+      bottom: 10,
+      // icon: 'rect', // 分别对应结果、上限、下限的图标
+      itemWidth: 20,
+      itemHeight: 15,
+      textStyle: {
+        fontSize: 16
+      },
     },
     grid: {
-      top: '20%',
       left: '3%',
       right: '4%',
-      // bottom: '3%',
+      bottom: '15%', // 预留legend位置
-      height: '80%',
+      top: '15%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
       data: xData,
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          // color: 'rgba(193, 207, 220, 1)',
-        }
-      },
       axisLabel: {
-        rotate: 30,
+        interval: 0,
-        textStyle: {
+        rotate: 30 // 日期标签旋转，避免重叠
-          color: "#8D949B "
+      }
-        }
-      },
     },
-    yAxis: [{
+    yAxis: {
-      // name: '单位(mm)',
       type: 'value',
+      name: '结果',
+
       axisLabel: {
-        textStyle: {
+        formatter: '{value}'
-          color: "#8D949B"
+      }
+    },
+    series: [
+      // 结果折线
+      {
+        name: '结果',
+        type: 'line',
+        data: yData,
+        symbol: 'circle', // 实心圆
+        symbolSize: 10,
+        itemStyle: {
+          color: '#00c800'
         },
-        // formatter: '{value}%'
-
-
-      },
-      axisLine: {
-        show: false,
         lineStyle: {
-          color: '#24abf2'
+          color: '#00c800',
-        }
+          width: 3
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed'
         },
+        emphasis: {
+          scale: true // 鼠标 hover 时放大
+        },
+        smooth: true
       },
-    }
+      // 参考上限（虚线）
-    ],
+      {
-    series: [{
+        name: `参考上限：${data.cksx}`,
-      name: data.xmmc,
+        type: 'line',
-      type: 'line',
+        data: xData.map(() => data.cksx), // 所有日期都对应上限值
-      data: seriesData,
+        symbol: 'none',
-      symbol: 'circle',
+        lineStyle: {
-      symbolSize: 5, //标记的大小
+          color: '#a4beef',
-      lineStyle: {
+          type: 'dashed', // 虚线
-        normal: {
+          width: 2
-          width: 2,
+        },
-          color: '#24abf2',
+        // 关闭上限线的交互，避免干扰结果线
+        emphasis: {
+          disabled: true
         }
       },
-      itemStyle: {
+      // 参考下限（虚线）
-        normal: {
+      {
-          color: '#24abf2',
+        name: `参考下限：${data.ckxx}`,
+        type: 'line',
+        data: xData.map(() => data.ckxx),
+        symbol: 'none',
+        lineStyle: {
+          color: '#a4beef',
+          type: 'dashed', // 虚线
+          width: 2
+        },
+        // 关闭下限线的交互
+        emphasis: {
+          disabled: true
         }
-      },
+      }
-      smooth: true
-    }
     ]
   };
 
   Intance.setOption(option);
 }
 
-
 </script>
 
 <style scoped lang="scss">

src/views/liswork/work/index.vue

@@ -130,8 +130,7 @@ import LabResult from './components/labresult.vue';
 import LabPatList from './components/labpatlist.vue';
 // @ts-ignore
 import { comDict } from '@/utils/dict'
-import { queryLabPatList, queryLabResults, loadDefault, queryLabPat, instrdconfig, delSample } from "@/api/liswork/work/LisWork";
+import { queryLabPatList, queryLabResults, loadDefault, queryLabPat, instrdconfig, delSample, getGroupInstrdList } from "@/api/liswork/work/LisWork";
-import { querylabInstrList, querylabInstrListByLisgroup } from "@/api/liswork/dict/LabInstr";
 import { getComDicts, queryComDictListService } from "@/api/liswork/dict/ComDict";
 import { ElMessage, ElMessageBox } from "element-plus";
 import History from './history/index.vue'
@@ -149,7 +148,7 @@ const previewShow = ref(false);
 const lbFlag = ref(false);
 const queryParams = ref({
   jyrq: '2025-08-20',
-  yq: '33',
+  yq: '46',
   ybh: '1',
   instrGroup: '02',
   problemId: 0,
@@ -234,8 +233,7 @@ const loadinstrGroupOptions = () => {
     instrGroupOptions.value = res.data
     instrGroupOptions.value.push({ zddh: 'ALL', zdmc: '所有仪器' })
     queryParams.value.instrGroup = '02'
-    // queryParams.value.yq = '46'
+    queryParams.value.yq = '46'
-    queryParams.value.yq = '33'
     getYqConfig()
   });
 }
@@ -246,10 +244,10 @@ const yqFields = ref([
 ])
 // 仪器
 const getYqConfig = () => {
-  querylabInstrListByLisgroup({ pageNum: 1, pageSize: 100, lisgroup: queryParams.value.instrGroup })
+  getGroupInstrdList({ lisgroup: queryParams.value.instrGroup })
     .then((res: any) => {
-      if (res.code == 200) {
+      if (res.code == 0) {
-        instrOptions.value = res.rows.map((item: any) => ({
+        instrOptions.value = res.data.map((item: any) => ({
           yq: item.yq.trim(),
           yqmc: item.yqmc
         }))
@@ -574,7 +572,6 @@ onMounted(async () => {
   color: #28BDBB;
   // margin-top: 20px;
 
-  span {}
 
 
   .text2 {

src/views/liswork/work/others/index.vue

@@ -2,29 +2,47 @@
   <div class="others-box">
     <el-row :gutter="5">
       <el-col :span="8">
-        <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
+        <el-table ref="tableRef" :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row
-          height="82vh" show-overflow-tooltip>
+          border height="82vh" show-overflow-tooltip>
-          <el-table-column prop="yq" label="仪器名称" align="center" width="120">
+          <el-table-column prop="yqmc" label="仪器名称" align="center" width="120" />
-            <template #default="scope">
+          <el-table-column prop="gjmc" label="医疗机构" align="center" width="150" />
-              {{ formatyq(scope.row.yq) }}
+          <el-table-column prop="jyrqName" label="检验日期" align="center" width="100" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="yljg" label="医疗机构" align="center" width="120">
-            <template #default="scope">
-              {{ formatDict(scope.row.yljg, 'HOS') }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="jyrq" label="检验日期" align="center" width="150" />
         </el-table>
       </el-col>
       <el-col :span="16">
-        <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
+        <CustomTable ref="tableDetailRef" :columns="columns" :data="tableDataDetail" :config="config"
-          height="82vh">
+          @row-click="handleRowClick" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd">
-          <el-table-column prop="xmmc" label="项目名称" fixed align="center" />
+          <template #firstCsjg="{ column }">
-          <template v-for="(period) in periods" :key="period">
+            <div v-html="formatHeader(column, 'first')"></div>
-            <el-table-column :label="period" :prop="period" :width="150" align="center" />
           </template>
-        </el-table>
+          <template #oneCsjg="{ column }">
+            <div v-html="formatHeader(column, 'one')"></div>
+          </template>
+          <template #twoCsjg="{ column }">
+            <div v-html="formatHeader(column, 'two')"></div>
+          </template>
+          <template #threeCsjg="{ column }">
+            <div v-html="formatHeader(column, 'three')"></div>
+          </template>
+          <template #fourCsjg="{ column }">
+            <div v-html="formatHeader(column, 'four')"></div>
+          </template>
+          <template #fiveCsjg="{ column }">
+            <div v-html="formatHeader(column, 'five')"></div>
+          </template>
+          <template #sixCsjg="{ column }">
+            <div v-html="formatHeader(column, 'six')"></div>
+          </template>
+          <template #sevenCsjg="{ column }">
+            <div v-html="formatHeader(column, 'seven')"></div>
+          </template>
+          <template #eightCsjg="{ column }">
+            <div v-html="formatHeader(column, 'eight')"></div>
+          </template>
+          <template #nineCsjg="{ column }">
+            <div v-html="formatHeader(column, 'nine')"></div>
+          </template>
+        </CustomTable>
       </el-col>
     </el-row>
   </div>
@@ -32,8 +50,10 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { ref, watch, computed, reactive, toRefs, onMounted } from 'vue';
+import { ref, watch, computed, reactive, toRefs, onMounted, h, nextTick } from 'vue';
-import { otherinstr } from '@/api/liswork/work/LisWork';
+import { otherinstr, otherInstrDetail } from '@/api/liswork/work/LisWork';
+import CustomTable from '@/components/elTable/index.vue'
+import dayjs from 'dayjs';
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 
 const props = defineProps({
@@ -55,10 +75,97 @@ const props = defineProps({
 // 解构 props
 const { queryParams, dictData, instrOptions } = toRefs(props);
 const tableData = ref([]);
-const periods = ref<string[]>([])
+const tableDataDetail: any = ref([]);
+const tableRef = ref();
+const tableDetailRef = ref();
+
+const columns = ref([
+  { label: '项目', prop: 'xmmc', width: 140, align: 'center', visible: true, },
+  { label: '本次', prop: 'firstCsjg', width: 100, align: 'center', visible: true, headerSlot: 'firstCsjg' },
+  { label: '上一次', prop: 'oneCsjg', width: 150, align: 'center', visible: true, headerSlot: 'oneCsjg' },
+  { label: '上二次', prop: 'twoCsjg', width: 150, align: 'center', visible: true, headerSlot: 'twoCsjg' },
+  { label: '上三次', prop: 'threeCsjg', width: 150, align: 'center', visible: true, headerSlot: 'threeCsjg' },
+  { label: '上四次', prop: 'fourCsjg', width: 150, align: 'center', visible: true, headerSlot: 'fourCsjg' },
+  { label: '上五次', prop: 'fiveCsjg', width: 150, align: 'center', visible: true, headerSlot: 'fiveCsjg' },
+  { label: '上六次', prop: 'sixCsjg', width: 150, align: 'center', visible: true, headerSlot: 'sixCsjg' },
+  { label: '上七次', prop: 'sevenCsjg', width: 150, align: 'center', visible: true, headerSlot: 'sevenCsjg' },
+  { label: '上八次', prop: 'eightCsjg', width: 150, align: 'center', visible: true, headerSlot: 'eightCsjg' },
+  { label: '上九次', prop: 'nineCsjg', width: 150, align: 'center', visible: true, headerSlot: 'nineCsjg' },
+])
+
+// 定义样式
+const styleMap: any = {
+  H: { background: '#ffc0c0 !important', color: '#606266' },
+  L: { background: '#8080ff !important', color: '#fff' },
+  P: { background: '#ffc0c0 !important', color: '#606266' },
+  Q: { background: '#ffff80 !important', color: '#FFF' }
+};
+
+// 定义列标签与标志位字段的映射关系
+const labelFlagMap: any = {
+  '本次': 'firstResultFlag',
+  '上一次': 'oneResultFlag',
+  '上二次': 'twoResultFlag',
+  '上三次': 'threeResultFlag',
+  '上四次': 'fourResultFlag',
+  '上五次': 'fiveResultFlag',
+  '上六次': 'sixResultFlag',
+  '上七次': 'sevenResultFlag',
+  '上八次': 'eightResultFlag',
+  '上九次': 'nineResultFlag',
+};
+
+const cellStyle = ({ column, row }: any) => {
+  const flagField = labelFlagMap[column.label];
+  if (!flagField) return {}; // 非目标列直接返回默认样式
+
+  // 获取当前行的标志位值
+  const flag = row[flagField];
+  // 返回对应的样式（默认返回空对象）
+  return styleMap[flag] || {};
+};
+
+const config = {
+  border: true,
+  // maxHeight: '350px',
+  height: '82vh',
+  highlightCurrentRow: true,
+  cellStyle: cellStyle
+}
+
+const handleColumnDragEnd = (data: any) => {
+  columns.value = data.columns
+}
+
+const formatHeader = (column: any, prefix: string) => {
+  const index = tableDataDetail.value.findIndex((item: any) => item[`${prefix}Csjg`] !== undefined);
+  if (index !== -1) {
+    const dateKey = `${prefix}Date`;
+    const ybhKey = `${prefix}ybh`;
+    const yqdlKey = `${prefix}yqdl`;
+    const yqKey = `${prefix}yq`;
+    const brxbKey = `${prefix}brxb`;
+    const nlKey = `${prefix}nl`;
+    const item = tableDataDetail.value[index];
+    return ` ${item[dateKey]} <br /> (${item[ybhKey]}) <br /> ${item[yqdlKey]} <br />${item[brxbKey]}，${item[nlKey]}`;
+  }
+  return column.label;
+};
+// 获取其他结果信息
 const getOthersInfo = () => {
   otherinstr(queryParams.value).then((res: any) => {
-    tableData.value = res.data
+    tableData.value = res.data.map((item: any) => {
+      return {
+        ...item,
+        jyrqName: dayjs(item.jyrq).format('YYYY/MM/DD'),
+      }
+    })
+    if (res.data.length > 0) {
+      nextTick(() => {
+        tableRef.value.setCurrentRow(tableData.value[0])
+        handleRowClick(tableData.value[0])
+      })
+    }
   })
 }
 
@@ -66,7 +173,78 @@ watch(() => props.queryParams, (newValue) => {
   getOthersInfo()
 }, { immediate: true })
 
-const handleRowClick = (row: any) => { }
+// 获取明细
+const handleRowClick = (row: any) => {
+  const data = {
+    brdh: row.brdh,
+    yq: row.yq,
+    jyrq: row.jyrq,
+    ybh: row.ybh
+  }
+  otherInstrDetail(data).then((res: any) => {
+    const periods = ['first', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+    const dataMaps = new Map();
+
+    periods.forEach(period => {
+      const data = res.data[period] || [];
+      const map = new Map();
+      data.forEach((item: any) => {
+        // 使用xmdh作为唯一标识
+        map.set(item.xmdh, {
+          csjg: item.csjg,
+          jyrq: dayjs(item.jyrq).format('YY/MM/DD'),
+          yqdl: item.yqdl,
+          yq: item.yq,
+          ybh: item.ybh,
+          yljg: item.yljg,
+          result_flag: item.result_flag,
+          xmmc: item.xmmc,
+          cksx: item.cksx,
+          ckxx: item.ckxx,
+          brxb: item.brxb,
+          nl: item.nl
+        });
+      });
+      dataMaps.set(period, map);
+    });
+
+
+    const allXmdhSet = new Set<string>();
+    periods.forEach(period => {
+      const data = res.data[period] || [];
+      data.forEach((item: any) => {
+        allXmdhSet.add(item.xmdh);
+      });
+    });
+
+    tableDataDetail.value = Array.from(allXmdhSet).map((xmdh) => {
+      const row: any = {};
+
+      periods.forEach(period => {
+        const item = dataMaps.get(period).get(xmdh);
+        if (item) {
+          row[`${period}Csjg`] = item.csjg;
+          row[`${period}Date`] = item.jyrq;
+          row[`${period}yqdl`] = item.yqdl;
+          row[`${period}yq`] = item.yq;
+          row[`${period}ybh`] = item.ybh;
+          row[`${period}yljg`] = item.yljg;
+          row[`${period}ResultFlag`] = item.result_flag;
+          row[`${period}brxb`] = item.brxb;
+          row[`${period}nl`] = item.nl;
+
+          if (!row.xmmc) {
+            row.xmmc = item.xmmc;
+            row.cksx = item.cksx;
+            row.ckxx = item.ckxx;
+          }
+        }
+      });
+
+      return row;
+    });
+  })
+}
 
 
 const formatDict = (v: string, dictType: string) => {

src/views/liswork/work/resultGraph/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="result_box">
-
+    <div v-for="item in resultImgs" class="img_box">
-    <el-image v-for="url in resultImgs" class="img_box" :src="url" :max-scale="7" :min-scale="0.2"
+      <el-image class="img_item" class-prefix="el-image" :src="item.picbase64" :max-scale="7" :min-scale="0.2"
-      :preview-src-list="resultImgs" show-progress :initial-index="4" />
+        :preview-src-list="resultImgs.map((v: any) => { return v.picbase64 })" show-progress :initial-index="4" />
-
+      <div class="bz_text">{{ item.bz }}</div>
+    </div>
   </div>
 </template>
 
@@ -25,12 +26,17 @@ const props = defineProps({
 // 解构 props
 const { queryParams } = toRefs(props);
 
-const resultImgs = ref([])
+const resultImgs: any = ref([])
 
 const getResultGraph = () => {
   resultgraph(queryParams.value).then((res: any) => {
     if (res.code == 0) {
-      resultImgs.value = res.data?.map((item: any) => { return "data:image/png;base64," + item })
+      resultImgs.value = res.data?.map((item: any) => {
+        return {
+          ...item,
+          picbase64: "data:image/png;base64," + item.picbase64,
+        }
+      })
     }
   })
 };
@@ -45,10 +51,23 @@ watch(() => props.queryParams, (newValue) => {
   height: 82vh;
   overflow-y: auto;
   background-color: #fffbf0;
+  padding: 5px;
 
   .img_box {
-    // box-shadow: ;
+    display: flex;
-    margin-right: 20px;
+    margin-bottom: 10px;
+
+    .img_item {
+      width: 200px;
+      height: 150px;
+    }
+
+    .bz_text {
+      margin-left: 20px;
+      color: #0000ff;
+      font-weight: 600;
+    }
   }
+
 }
 </style>