历史对照/其他结果
This commit is contained in:
parent
6d24175f93
commit
8f840f9c79
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
@ -130,8 +130,8 @@ const processTableData = (data: object[]) => {
|
||||
const visibleChange = (val: any) => {
|
||||
searchKey.value = '';
|
||||
if (val) {
|
||||
|
||||
nextTick(() => {
|
||||
filterDataHandle()
|
||||
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()
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,24 +1,47 @@
|
||||
<template>
|
||||
<div class="h_box">
|
||||
<div>
|
||||
<el-table :data="tableData" 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" />
|
||||
<CustomTable ref="tableRef" :columns="columns" :data="tableData" :config="config" @row-click="handleRowClick"
|
||||
:enable-column-drag="true" @column-drag-end="handleColumnDragEnd">
|
||||
<template #oneCsjg="{ column }">
|
||||
<div v-html="formatHeader(column, 'one')"></div>
|
||||
</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,
|
||||
top: '5',
|
||||
right: '5%',
|
||||
left: '20',
|
||||
// bottom: '20%'
|
||||
// subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
|
||||
text: `结果走势图(项目:${data.xmmc})`,
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
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%',
|
||||
height: '80%',
|
||||
bottom: '15%', // 预留legend位置
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// color: 'rgba(193, 207, 220, 1)',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
rotate: 30,
|
||||
textStyle: {
|
||||
color: "#8D949B "
|
||||
}
|
||||
},
|
||||
interval: 0,
|
||||
rotate: 30 // 日期标签旋转，避免重叠
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
// name: '单位(mm)',
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '结果',
|
||||
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#8D949B"
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 结果折线
|
||||
{
|
||||
name: '结果',
|
||||
type: 'line',
|
||||
data: yData,
|
||||
symbol: 'circle', // 实心圆
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: '#00c800'
|
||||
},
|
||||
// formatter: '{value}%'
|
||||
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#24abf2'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
color: '#00c800',
|
||||
width: 3
|
||||
},
|
||||
emphasis: {
|
||||
scale: true // 鼠标 hover 时放大
|
||||
},
|
||||
smooth: true
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: data.xmmc,
|
||||
type: 'line',
|
||||
data: seriesData,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5, //标记的大小
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: '#24abf2',
|
||||
// 参考上限（虚线）
|
||||
{
|
||||
name: `参考上限：${data.cksx}`,
|
||||
type: 'line',
|
||||
data: xData.map(() => data.cksx), // 所有日期都对应上限值
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: '#a4beef',
|
||||
type: 'dashed', // 虚线
|
||||
width: 2
|
||||
},
|
||||
// 关闭上限线的交互，避免干扰结果线
|
||||
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">
|
||||
|
||||
@ -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 { querylabInstrList, querylabInstrListByLisgroup } from "@/api/liswork/dict/LabInstr";
|
||||
import { queryLabPatList, queryLabResults, loadDefault, queryLabPat, instrdconfig, delSample, getGroupInstrdList } from "@/api/liswork/work/LisWork";
|
||||
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 = '33'
|
||||
queryParams.value.yq = '46'
|
||||
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) {
|
||||
instrOptions.value = res.rows.map((item: any) => ({
|
||||
if (res.code == 0) {
|
||||
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 {
|
||||
|
||||
@ -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
|
||||
height="82vh" show-overflow-tooltip>
|
||||
<el-table-column prop="yq" label="仪器名称" align="center" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatyq(scope.row.yq) }}
|
||||
</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 ref="tableRef" :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row
|
||||
border height="82vh" show-overflow-tooltip>
|
||||
<el-table-column prop="yqmc" label="仪器名称" align="center" width="120" />
|
||||
<el-table-column prop="gjmc" label="医疗机构" align="center" width="150" />
|
||||
<el-table-column prop="jyrqName" label="检验日期" align="center" width="100" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-table :data="tableData" style="width: 100%" @row-click="handleRowClick" highlight-current-row border
|
||||
height="82vh">
|
||||
<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" />
|
||||
<CustomTable ref="tableDetailRef" :columns="columns" :data="tableDataDetail" :config="config"
|
||||
@row-click="handleRowClick" :enable-column-drag="true" @column-drag-end="handleColumnDragEnd">
|
||||
<template #firstCsjg="{ column }">
|
||||
<div v-html="formatHeader(column, 'first')"></div>
|
||||
</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 { otherinstr } from '@/api/liswork/work/LisWork';
|
||||
import { ref, watch, computed, reactive, toRefs, onMounted, h, nextTick } from 'vue';
|
||||
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) => {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="result_box">
|
||||
|
||||
<el-image v-for="url in resultImgs" class="img_box" :src="url" :max-scale="7" :min-scale="0.2"
|
||||
:preview-src-list="resultImgs" show-progress :initial-index="4" />
|
||||
|
||||
<div v-for="item in resultImgs" class="img_box">
|
||||
<el-image class="img_item" class-prefix="el-image" :src="item.picbase64" :max-scale="7" :min-scale="0.2"
|
||||
: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: ;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.img_item {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.bz_text {
|
||||
margin-left: 20px;
|
||||
color: #0000ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user