联调统计大屏接口，报告查询入参
This commit is contained in:
parent
58b11a20eb
commit
27302128eb
@ -48,4 +48,12 @@ export function sampleitemCount(query?: Object) {
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 标本报表费用
|
||||
export function getallcount(query?: Object) {
|
||||
return request({
|
||||
url: '/transitstat/getallcount',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@ -15,18 +15,17 @@
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="条码状态：" prop="zt">
|
||||
<el-select v-model="queryParams.zt" placeholder="请选择" style="width: 6.25rem;">
|
||||
<el-select v-model="queryParams.zt" placeholder="请选择" style="width: 8rem;">
|
||||
<el-option v-for="item in dictData.ST" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="failed4">
|
||||
<el-select v-model="queryParams.failed4" placeholder="请选择" style="width:8.75rem">
|
||||
<el-form-item label="" prop="queryType">
|
||||
<el-select v-model="queryParams.queryType" placeholder="请选择" style="width:10rem">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="failed5">
|
||||
<el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery"
|
||||
@clear="handleQuery" />
|
||||
<el-form-item label="" prop="queryValue">
|
||||
<el-input v-model="queryParams.queryValue" clearable placeholder="条件搜索" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="">
|
||||
@ -97,8 +96,8 @@
|
||||
|
||||
</el-col>
|
||||
<el-col :span="8" class="right-table">
|
||||
<!-- <div class="title"> 项目 </div> -->
|
||||
<el-button type="primary" plain class="mb8" :size="aotuSize">拆分选中项目</el-button>
|
||||
<div class="mb8" style="height:2rem"> </div>
|
||||
<!-- <el-button type="primary" plain class="mb8" :size="aotuSize">拆分选中项目</el-button> -->
|
||||
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig">
|
||||
<template #jjzt="{ row }">
|
||||
{{ row.jjzt == '1' ? '计价' : '无' }}
|
||||
@ -160,7 +159,7 @@ import { ref, reactive, toRaw, computed, watch, nextTick, onMounted, } from 'vue
|
||||
import { HiprintPrinter } from '@/utils/hiprintPrinter';
|
||||
import { classCom } from '@/utils/classCom';
|
||||
import CustomTable from '@/components/elTable/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { usePrintStore } from '@/store/modules/printStore'
|
||||
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
|
||||
const aotuSize = classCom.useAutoSize();
|
||||
@ -169,7 +168,9 @@ import useUserStore from '@/store/modules/user'
|
||||
//@ts-ignore
|
||||
import { comDict } from '@/utils/dict'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import dayjs from 'dayjs';
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
const printStore = usePrintStore();
|
||||
const compactForm = ref<HTMLElement | null>(null);
|
||||
@ -182,8 +183,10 @@ interface QueryParams {
|
||||
times: string[]; // 明确类型为字符串元组
|
||||
yljg: string;
|
||||
zt: string;
|
||||
failed4: string;
|
||||
failed5: string;
|
||||
queryType: string;
|
||||
queryValue: string;
|
||||
ksdh: string;
|
||||
userid: string;
|
||||
}
|
||||
// 提交表单数据
|
||||
const queryParams = reactive<QueryParams>({
|
||||
@ -191,9 +194,28 @@ const queryParams = reactive<QueryParams>({
|
||||
// times: [],
|
||||
yljg: '1',
|
||||
zt: '',
|
||||
failed4: '',
|
||||
failed5: '',
|
||||
queryType: '',
|
||||
queryValue: '',
|
||||
ksdh: '',
|
||||
userid: ''
|
||||
});
|
||||
|
||||
|
||||
// 获取当前日期（当天）
|
||||
const today = dayjs();
|
||||
|
||||
// 计算前6天的日期（当天 + 前6天 = 7天）
|
||||
const startOfWeek = today.subtract(6, 'day');
|
||||
|
||||
const startDate = route.query.startdate ? String(route.query.startdate) : startOfWeek.format('YYYY-MM-DD HH:mm:ss');
|
||||
const endDate = route.query.endate ? String(route.query.endate) : today.format('YYYY-MM-DD HH:mm:ss');
|
||||
|
||||
queryParams.times = [startDate, endDate];
|
||||
queryParams.ksdh = (route.query.deptcode as string) ? (route.query.deptcode as string) : '';
|
||||
queryParams.userid = (route.query.userid as string) ? (route.query.userid as string) : '';
|
||||
queryParams.yljg = (route.query.yljg as string) ? (route.query.yljg as string) : '';
|
||||
|
||||
|
||||
const showSearch = ref(true);
|
||||
const queryRef = ref()
|
||||
// 定义校验规则
|
||||
@ -209,15 +231,15 @@ const queryRules = ref({
|
||||
})
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
value: 'brxm',
|
||||
label: '通过姓名搜索',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
value: 'brdh',
|
||||
label: '通过病人号搜索',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
value: 'ch',
|
||||
label: '通过床号搜索',
|
||||
},
|
||||
]
|
||||
@ -236,13 +258,13 @@ const handleQuery = async () => {
|
||||
// 重置
|
||||
const resetQuery = () => {
|
||||
queryRef.value?.resetFields();
|
||||
|
||||
queryParams.zt = ''
|
||||
queryParams.queryType = ''
|
||||
queryParams.queryValue = ''
|
||||
getList()
|
||||
}
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
// 数据源
|
||||
const tableData = ref([])
|
||||
@ -329,6 +351,7 @@ const lastTimeIndex = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const Info: any = ref({})
|
||||
// 点击行
|
||||
const rowHandle = (row: any) => {
|
||||
timelineItems.value =
|
||||
@ -341,6 +364,7 @@ const rowHandle = (row: any) => {
|
||||
{ title: '标本签收', time: row.jssj },
|
||||
{ title: '结果审核', time: row.confirmtime },
|
||||
]
|
||||
Info.value = row
|
||||
getRightTable(row)
|
||||
};
|
||||
|
||||
@ -427,9 +451,9 @@ const openBlock = (value: string) => {
|
||||
const requests = sqhs.value.map((item: any) => { return item.sqh });
|
||||
fetchCodeExec({
|
||||
sqh: requests.join(','),
|
||||
userid: 'lis',
|
||||
userid: queryParams.userid,
|
||||
status: value == '采样登记' ? 12 : 13,
|
||||
yljg: 1
|
||||
yljg: queryParams.yljg
|
||||
}).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success('调用成功');
|
||||
@ -459,9 +483,9 @@ const sqdQuery = () => {
|
||||
if (res.code == 0 && res.data.sqh) {
|
||||
fetchCodeExec({
|
||||
sqh: res.data.sqh,
|
||||
userid: 'lis',
|
||||
userid: queryParams.userid,
|
||||
status: 12,
|
||||
yljg: 1
|
||||
yljg: queryParams.yljg
|
||||
})
|
||||
cyTableData.value = cyTableData.value.concat(res.data)
|
||||
}
|
||||
@ -500,7 +524,9 @@ const getRightTable = (row: any) => {
|
||||
|
||||
const goReport = () => {
|
||||
// 跳转到报告查询页面
|
||||
router.push('/report?startdate=2025-08-19&endate=2025-08-19&deptcode=0210&userid=00910&brdh=')
|
||||
router.push(`/report?yljg=${Info.value.yljg ? Info.value.yljg : queryParams.yljg}&deptcode=${Info.value.ksdh ? Info.value.ksdh : queryParams.ksdh}&userid=${queryParams.userid}&brdh=${Info.value.brdh ? Info.value.brdh : ''}`)
|
||||
// router.push('/report?startdate=2025-08-19&endate=2025-08-19&deptcode=0210&userid=00910&brdh=')
|
||||
|
||||
};
|
||||
|
||||
const cancelHandle = () => {
|
||||
@ -513,9 +539,9 @@ const cancelHandle = () => {
|
||||
const requests = sqhs.value.map((item: any) => { return item.sqh });
|
||||
fetchCodeExec({
|
||||
sqh: requests.join(','),
|
||||
userid: 'lis',
|
||||
userid: queryParams.userid,
|
||||
status: 9,
|
||||
yljg: 1
|
||||
yljg: queryParams.yljg
|
||||
}).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ElMessage.success('调用成功');
|
||||
@ -531,21 +557,17 @@ const cancelHandle = () => {
|
||||
},
|
||||
}).catch(() => { });
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
// 进入页面单点登录
|
||||
const result = await userStore.loginAnonymous({ name: 'admin' })
|
||||
if (result) {
|
||||
getList()
|
||||
}
|
||||
// 初始化3天区间（今天-前两天）
|
||||
// const end = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
||||
// const start = dayjs().subtract(2, 'day').format('YYYY-MM-DD HH:mm:ss'); //add 时间往后
|
||||
// queryParams.times = [start, end];
|
||||
// console.log(queryParams.times);
|
||||
|
||||
|
||||
adjustTableHeight();
|
||||
// 加载病人来源字典
|
||||
@ -582,13 +604,18 @@ function adjustTableHeight() {
|
||||
|
||||
const handletime = (val: Array<string>) => {
|
||||
// console.log('时间', val);
|
||||
// 校验日期格式
|
||||
const dayDiff = getDayDiff(val[0], val[1]);
|
||||
if (dayDiff === -1) return ElMessage.warning('请选择有效的日期范围');
|
||||
//校验是否超过7天
|
||||
if (dayDiff > 7) return ElMessage.warning('查询时间范围不能超过7天，请重新选择');
|
||||
}
|
||||
|
||||
// 生成条码
|
||||
const printHandle = () => {
|
||||
const data = {
|
||||
dept: '0235',
|
||||
userid: 'lis',
|
||||
dept: queryParams.ksdh,
|
||||
userid: queryParams.userid,
|
||||
st: '',
|
||||
et: '',
|
||||
yljg: queryParams.yljg
|
||||
@ -596,25 +623,59 @@ const printHandle = () => {
|
||||
if (queryParams.times && queryParams.times.length) {
|
||||
data.st = queryParams.times[0]
|
||||
data.et = queryParams.times[1]
|
||||
} else {
|
||||
data.st = ''
|
||||
data.et = ''
|
||||
}
|
||||
addObj(data).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
getList()
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
// 计算两个日期的天数差（支持带时分秒）
|
||||
const getDayDiff = (start: string, end: string): number => {
|
||||
const startTime = new Date(start).getTime();
|
||||
const endTime = new Date(end).getTime();
|
||||
|
||||
// 校验日期有效性
|
||||
if (isNaN(startTime) || isNaN(endTime)) {
|
||||
return -1; // 无效日期
|
||||
}
|
||||
|
||||
// 计算毫秒差 → 转换为天数（向上取整，避免因时分秒导致的误差）
|
||||
return Math.ceil((endTime - startTime) / (24 * 60 * 60 * 1000));
|
||||
};
|
||||
// 查询申请单
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
const data = {
|
||||
dept: '0235',
|
||||
userid: 'lis',
|
||||
dept: queryParams.ksdh,
|
||||
userid: queryParams.userid,
|
||||
st: queryParams.times[0],
|
||||
et: queryParams.times[1],
|
||||
yljg: queryParams.yljg
|
||||
}
|
||||
|
||||
if (!data.yljg) return ElMessage.warning('医疗机构不能为空！')
|
||||
if (!data.dept) return ElMessage.warning('科室代号不能为空！')
|
||||
if (!data.userid) return ElMessage.warning('用户userid不能为空！')
|
||||
|
||||
// 校验日期格式
|
||||
const dayDiff = getDayDiff(queryParams.times[0], queryParams.times[1]);
|
||||
if (dayDiff === -1) return ElMessage.warning('请选择有效的日期范围');
|
||||
|
||||
|
||||
//校验是否超过7天
|
||||
if (dayDiff > 7) return ElMessage.warning('查询时间范围不能超过7天，请重新选择');
|
||||
if (queryParams.times && queryParams.times.length > 0) {
|
||||
data.st = queryParams.times[0]
|
||||
data.et = queryParams.times[1]
|
||||
} else {
|
||||
data.st = ''
|
||||
data.et = ''
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
fetchCodeList(data).then((response: any) => {
|
||||
if (response.code == 0) {
|
||||
loading.value = false;
|
||||
@ -648,9 +709,9 @@ const printPdf = () => {
|
||||
const requests = sqhs.value.map((item: any) => { return item.sqh });
|
||||
fetchCodeExec({
|
||||
sqh: requests.join(','),
|
||||
userid: 'lis',
|
||||
userid: queryParams.userid,
|
||||
status: 11,
|
||||
yljg: 1
|
||||
yljg: queryParams.yljg
|
||||
}).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
done();
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
<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" />
|
||||
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
@change="handletime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
@ -206,7 +207,8 @@ interface QueryParams {
|
||||
ch: string,
|
||||
dybz: string,
|
||||
sqh: string,
|
||||
userid: string
|
||||
userid: string,
|
||||
yljg: string,
|
||||
}
|
||||
|
||||
// 提交表单数据
|
||||
@ -222,7 +224,8 @@ const queryParams = reactive<QueryParams>({
|
||||
brdh: '',
|
||||
ch: '',
|
||||
dybz: '',
|
||||
userid: ''
|
||||
userid: '',
|
||||
yljg: ''
|
||||
});
|
||||
// 获取当前日期（当天）
|
||||
const today = dayjs();
|
||||
@ -234,9 +237,10 @@ const startDate = route.query.startdate ? String(route.query.startdate) : startO
|
||||
const endDate = route.query.endate ? String(route.query.endate) : today.format('YYYY-MM-DD');
|
||||
|
||||
queryParams.times = [startDate, endDate];
|
||||
queryParams.ksdh = (route.query.deptcode as string) || '';
|
||||
queryParams.userid = (route.query.userid as string) || '';
|
||||
queryParams.brdh = (route.query.brdh as string) || '';
|
||||
queryParams.ksdh = (route.query.deptcode as string) ? (route.query.deptcode as string) : '';
|
||||
queryParams.userid = (route.query.userid as string) ? (route.query.userid as string) : '';
|
||||
queryParams.brdh = (route.query.brdh as string) ? (route.query.brdh as string) : '';
|
||||
queryParams.yljg = (route.query.yljg as string) ? (route.query.yljg as string) : '';
|
||||
|
||||
|
||||
const single = ref(true);
|
||||
@ -249,16 +253,17 @@ const queryRef = ref()
|
||||
const Info = ref<any>({})
|
||||
// 定义校验规则
|
||||
const queryRules = ref({
|
||||
// clientId: [
|
||||
// { required: true, message: '编号不能为空', trigger: 'blur' },
|
||||
|
||||
// ],
|
||||
|
||||
// failed3: [
|
||||
// { required: true, message: '条码状态不能为空', trigger: 'change' },
|
||||
// ],
|
||||
})
|
||||
|
||||
const handletime = (val: Array<string>) => {
|
||||
// console.log('时间', val);
|
||||
// 校验日期格式
|
||||
const dayDiff = getDayDiff(val[0], val[1]);
|
||||
if (dayDiff === -1) return ElMessage.warning('请选择有效的日期范围');
|
||||
//校验是否超过7天
|
||||
if (dayDiff > 7) return ElMessage.warning('查询时间范围不能超过7天，请重新选择');
|
||||
}
|
||||
|
||||
// 时间线数据
|
||||
const timelineItems = ref(
|
||||
@ -381,11 +386,7 @@ const handleColumnDragEnd = (newColumns: any) => {
|
||||
const printPdf = () => {
|
||||
const printStore = usePrintStore();
|
||||
const merge = rows.value.map((item: any) => { return `${item.jyrqname.replace(/-/g, '')}_${item.yq.trim()}_${item.ybh}` })
|
||||
// const merge = [
|
||||
// "20250819_11_1",
|
||||
// "20250819_11_10",
|
||||
// "20250819_11_11"
|
||||
// ]
|
||||
|
||||
reportPrintPdf(merge).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
if (!res.data) return ElMessage.warning('未找到打印文件')
|
||||
@ -490,14 +491,14 @@ const brlxFields = ref([
|
||||
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' },
|
||||
{ prop: 'xmdh', label: '项目代号', align: 'center', visible: true, }, //0
|
||||
{ prop: 'xmmc', label: '项目名称', align: 'center', visible: true, }, //1
|
||||
{ prop: 'xmmc', label: '培养结果', align: 'center', visible: true, width: 150 },//2
|
||||
{ prop: 'csjg', label: '检验结果', align: 'center', visible: true, },//3
|
||||
{ prop: 'refs', label: '参考值', align: 'center', visible: true, },//4
|
||||
{ prop: 'dw', label: '单位', align: 'center', visible: true, },//5
|
||||
{ prop: 'od', label: '菌落计数', align: 'center', visible: true, },//6
|
||||
// { prop: 'jgbz', label: '结果标志', align: 'center', visible: true, slot: 'jgbz' },
|
||||
])
|
||||
|
||||
const rightCellStyleHd = ({ row, column, rowIndex, columnIndex }: {
|
||||
@ -614,41 +615,48 @@ interface copyItem {
|
||||
refs: string | number;
|
||||
dw: string;
|
||||
jgbz: string;
|
||||
od: 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 + + ',';
|
||||
let str = '';
|
||||
// 处理空值的工具函数：null/undefined/空字符串都返回空白
|
||||
const getFieldValue = (value: any) => {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return '';
|
||||
}
|
||||
if (type == 'N' && v.jgbz != 'M' && v.jgbz != '') {
|
||||
str = str + getCommonRow(v)
|
||||
}
|
||||
if (type == 'Y' && v.jgbz == 'M' && v.jgbz != '') {
|
||||
str = str + getCommonRow(v)
|
||||
}
|
||||
})
|
||||
// 转换为字符串，避免数字等类型直接拼接
|
||||
return String(value);
|
||||
};
|
||||
|
||||
var input = document.createElement('textarea');
|
||||
if (!str) return ElMessage.error('没有数据可复制');
|
||||
// 把文字放进input中，供复制
|
||||
// 根据设备类型定义不同的字段拼接逻辑
|
||||
const getCommonRow = Info.value.yqdl === '细菌仪'
|
||||
? (item: copyItem) => `${getFieldValue(item.xmdh)}\t${getFieldValue(item.xmmc)}\t${getFieldValue(item.csjg)}\t${getFieldValue(item.od)}\t\r\n`
|
||||
: (item: copyItem) => `${getFieldValue(item.xmdh)}\t${getFieldValue(item.xmmc)}\t${getFieldValue(item.csjg)}\t${getFieldValue(item.refs)}\t${getFieldValue(item.dw)}\t\r\n`;
|
||||
|
||||
// 遍历数据拼接内容
|
||||
rightTableData.value.forEach((v: any) => {
|
||||
// 根据类型过滤数据
|
||||
if (type === 'All' ||
|
||||
(type === 'N' && v.jgbz !== 'M' && v.jgbz !== '') ||
|
||||
(type === 'Y' && v.jgbz === 'M')) {
|
||||
str += getCommonRow(v);
|
||||
}
|
||||
});
|
||||
|
||||
// 执行复制操作
|
||||
const input = document.createElement('textarea');
|
||||
if (!str) {
|
||||
ElMessage.error('没有数据可复制');
|
||||
return;
|
||||
}
|
||||
input.value = str;
|
||||
document.body.appendChild(input);
|
||||
// 选中创建的input
|
||||
input.select();
|
||||
var copy_result = document.execCommand('copy');
|
||||
if (copy_result) {
|
||||
ElMessage.success('复制成功');
|
||||
} else {
|
||||
ElMessage.error('复制失败');
|
||||
}
|
||||
// 移除
|
||||
const copyResult = document.execCommand('copy');
|
||||
copyResult ? ElMessage.success('复制成功') : ElMessage.error('复制失败');
|
||||
document.body.removeChild(input);
|
||||
}
|
||||
|
||||
};
|
||||
// 数据重组
|
||||
const formatGroupedData = (data: any[]) => {
|
||||
if (!data || data.length === 0) return [];
|
||||
@ -843,10 +851,21 @@ onMounted(async () => {
|
||||
};
|
||||
});
|
||||
|
||||
// 计算两个日期的天数差（支持带时分秒）
|
||||
const getDayDiff = (start: string, end: string): number => {
|
||||
const startTime = new Date(start).getTime();
|
||||
const endTime = new Date(end).getTime();
|
||||
|
||||
// 校验日期有效性
|
||||
if (isNaN(startTime) || isNaN(endTime)) {
|
||||
return -1; // 无效日期
|
||||
}
|
||||
|
||||
// 计算毫秒差 → 转换为天数（向上取整，避免因时分秒导致的误差）
|
||||
return Math.ceil((endTime - startTime) / (24 * 60 * 60 * 1000));
|
||||
};
|
||||
const getList = () => {
|
||||
if (!queryParams.ksdh) return ElMessage.error('科室代号不能为空');
|
||||
if (!queryParams.userid) return ElMessage.error('用户userid不能为空');
|
||||
|
||||
const data = {
|
||||
alarmflag: alarmflag.value,
|
||||
jzbz: jzbz.value,
|
||||
@ -859,14 +878,25 @@ const getList = () => {
|
||||
userid: queryParams.userid,
|
||||
st: '',
|
||||
et: '',
|
||||
yljg: 1,
|
||||
|
||||
yljg: queryParams.yljg,
|
||||
}
|
||||
|
||||
if (!data.ksdh) return ElMessage.error('科室代号不能为空');
|
||||
if (!data.yljg) return ElMessage.error('医疗机构yljg不能为空');
|
||||
if (!data.userid) return ElMessage.error('用户userid不能为空');
|
||||
// 校验日期格式
|
||||
const dayDiff = getDayDiff(queryParams.times[0], queryParams.times[1]);
|
||||
if (dayDiff === -1) return ElMessage.warning('请选择有效的日期范围');
|
||||
|
||||
//校验是否超过7天
|
||||
if (dayDiff > 7) return ElMessage.warning('查询时间范围不能超过7天，请重新选择');
|
||||
|
||||
if (queryParams.times && queryParams.times.length) {
|
||||
data.st = queryParams.times[0]
|
||||
data.et = queryParams.times[1]
|
||||
} else {
|
||||
return ElMessage.error('日期时间段不能为空');
|
||||
data.st = ''
|
||||
data.et = ''
|
||||
}
|
||||
loading.value = true
|
||||
reportList(data).then((res: any) => {
|
||||
|
||||
@ -205,6 +205,10 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{
|
||||
height: 68vh;
|
||||
} */
|
||||
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
|
||||
display: flex;
|
||||
@ -255,24 +259,31 @@
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
|
||||
width: 40%;
|
||||
height: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 125rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
|
||||
width: 100%;
|
||||
height: 1.25rem;
|
||||
background: #05d1fc;
|
||||
border-radius: 6.25rem;
|
||||
border-radius: 125rem;
|
||||
-webkit-animation: widthMove1 2s ease-in-out;
|
||||
}
|
||||
|
||||
.line_lineIn .per {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
|
||||
background: #e7feb8;
|
||||
-webkit-animation: widthMove2 2s ease-in-out;
|
||||
@ -359,7 +370,7 @@
|
||||
}
|
||||
|
||||
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
|
||||
width: 17%;
|
||||
width: 18%;
|
||||
font-family: dig;
|
||||
padding-left: 0.3125rem;
|
||||
}
|
||||
|
||||
@ -5,50 +5,10 @@
|
||||
<div class="leftMain_top">
|
||||
<div class="leftMain_topIn">
|
||||
<ul>
|
||||
<li>
|
||||
<li v-for="item in source">
|
||||
<div class="liIn">
|
||||
<h3>区域机构</h3>
|
||||
<p class="shu"><span class="shu1">69</span><i>家</i></p>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="liIn">
|
||||
<h3>检验人数</h3>
|
||||
<p class="shu"><span class="shu2">609</span><i>人</i></p>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="liIn">
|
||||
<h3>检验管数</h3>
|
||||
<p class="shu"><span class="shu2">609</span><i>个</i></p>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="liIn">
|
||||
<h3>检验报告数</h3>
|
||||
<p class="shu"><span class="shu3">289</span><i>份</i></p>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
<span class="border_bg_rightBottom"></span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="liIn">
|
||||
<h3>检验项目数</h3>
|
||||
<p class="shu"><span class="shu4">759</span><i>个</i></p>
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
|
||||
<span class="border_bg_leftTop"></span>
|
||||
<span class="border_bg_rightTop"></span>
|
||||
<span class="border_bg_leftBottom"></span>
|
||||
@ -83,19 +43,22 @@
|
||||
<h3>委托机构当月送检标本占比</h3>
|
||||
<div class="biaoge biaoge_pai">
|
||||
<div class="biaoge_paiIn">
|
||||
<Vue3SeamlessScroll :list="list" :config="scrollConfig">
|
||||
<ul>
|
||||
<li v-for="(item, i) in list">
|
||||
<div class="liIn">
|
||||
<div class="liIn_left"><span class="zi">{{ item.name }}</span></div>
|
||||
<div class="liIn_line">
|
||||
<div class="line_lineIn" :style="{ width: ` ${item.pre}%` }"></div>
|
||||
<ul>
|
||||
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
|
||||
:limitMoveNum="14"> -->
|
||||
<li v-for="(item, i) in listData">
|
||||
<div class="liIn">
|
||||
<div class="liIn_left"><span class="zi">{{ item.groupname }}</span></div>
|
||||
<div class="liIn_line">
|
||||
<div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
|
||||
<div class="per">{{ item.percentage }}</div>
|
||||
</div>
|
||||
<p class="num">{{ item.pre }}%</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</Vue3SeamlessScroll>
|
||||
<p class="num">{{ item.groupsum }}</p>
|
||||
</div>
|
||||
</li>
|
||||
<!-- </Vue3SeamlessScroll> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -139,47 +102,24 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
|
||||
//@ts-ignore
|
||||
|
||||
|
||||
const list: any = ref([
|
||||
{ name: '武汉汉阳医院', pre: 89.7 },
|
||||
{ name: '武汉大学人民医院', pre: 89.2 },
|
||||
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 79.7 },
|
||||
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 89.1 },
|
||||
{ name: '武汉市汉阳区二桥街社区卫生服务中心', pre: 89.7 },
|
||||
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 89 },
|
||||
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 49.7 },
|
||||
{ name: '武汉市汉阳区永丰街社区卫生服务中', pre: 89.5 },
|
||||
{ name: '武汉市汉阳区鹦鹉街社区卫生服务中心', pre: 69.7 },
|
||||
{ name: '武汉市汉阳区四新街社区卫生服务中心', pre: 89 },
|
||||
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 89.7 },
|
||||
{ name: '武汉大学人民医院', pre: 89.8 },
|
||||
{ name: '武汉市汉阳区五里墩街社区卫生服务中心', pre: 49.7 },
|
||||
{ name: '武汉市汉阳区江堤街社区卫生服务中心', pre: 89.7 },
|
||||
{ name: '武汉市汉阳区洲头街社区卫生服务中心', pre: 89 },
|
||||
import { getallcount } from '@/api/regional'
|
||||
|
||||
const source = ref([
|
||||
{ name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
|
||||
{ name: '检验人数', num: 0, unit: '人', pre: 'rs' },
|
||||
{ name: '检验管数', num: 0, unit: '个', pre: 'gs' },
|
||||
{ name: '检验报告数', num: 0, unit: '份', pre: 'bgs' },
|
||||
{ name: '检验项目数', num: 0, unit: '个', pre: 'xms' },
|
||||
])
|
||||
|
||||
const scrollConfig = {
|
||||
hoverStop: true, // 鼠标点击后停止
|
||||
direction: 'up', // 滚动方向：up/down/left/right
|
||||
step: 0.8, // 滚动速度（数值越小越慢）
|
||||
limitScrollNum: 3, // 列表长度大于等于此值才开始滚动
|
||||
passive: true,
|
||||
waitTime: 1000 // 单步滚动完成后停留时间（ms）
|
||||
}
|
||||
|
||||
const listData: any = ref([])
|
||||
|
||||
|
||||
const chartmain = ref()
|
||||
const getEcharts1 = () => {
|
||||
|
||||
const getEcharts1 = (data: any) => {
|
||||
const Intance = echarts.init(chartmain.value);
|
||||
var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];
|
||||
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200, 306, 270, 210, 230, 120, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230, 210, 230,];
|
||||
|
||||
|
||||
var dataAxis = data.map((item: any) => item.daynum + '日')
|
||||
var data = data.map((item: any) => item.sl)
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
@ -222,10 +162,15 @@ const getEcharts1 = () => {
|
||||
type: 'slider',
|
||||
show: true, //flase直接隐藏图形
|
||||
xAxisIndex: [0],
|
||||
textStyle: {
|
||||
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
|
||||
fontSize: 12, // 文字大小
|
||||
fontWeight: 'normal' // 文字粗细
|
||||
},
|
||||
left: '9%', //滚动条靠左侧的百分比
|
||||
bottom: 0,
|
||||
start: 0,//滚动条的起始位置
|
||||
end: 60 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -281,8 +226,8 @@ const getEcharts1 = () => {
|
||||
Intance.setOption(option);
|
||||
}
|
||||
const chartmain_bing = ref()
|
||||
const getEcharts2 = () => {
|
||||
|
||||
const getEcharts2 = (data: any) => {
|
||||
const names = data.map((item: any) => item.name)
|
||||
const Intance = echarts.init(chartmain_bing.value);
|
||||
const option = {
|
||||
title: {
|
||||
@ -296,7 +241,7 @@ const getEcharts2 = () => {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
@ -307,7 +252,7 @@ const getEcharts2 = () => {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 'right',
|
||||
data: ['已审核', '已采样', '已送检', '已接收', '已报告'],
|
||||
data: names,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
@ -327,16 +272,7 @@ const getEcharts2 = () => {
|
||||
radius: '65%',
|
||||
center: ['45%', '50%'],
|
||||
selectedMode: 'single',
|
||||
data: [
|
||||
{
|
||||
value: 1548, name: '已报告',
|
||||
|
||||
},
|
||||
{ value: 535, name: '已接收' },
|
||||
{ value: 510, name: '已送检' },
|
||||
{ value: 634, name: '已采样' },
|
||||
{ value: 735, name: '已审核' }
|
||||
],
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
@ -353,24 +289,47 @@ const getEcharts2 = () => {
|
||||
|
||||
const chartmain_zhe = ref()
|
||||
const getEcharts3 = () => {
|
||||
|
||||
const Intance = echarts.init(chartmain_zhe.value);
|
||||
const xData = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];
|
||||
|
||||
const xData = listData.value[0].dayline.map((item: any) => item.daynum + '日')
|
||||
const tooltips = listData.value.map((item: any) => item.groupname)
|
||||
const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
|
||||
'#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700', '#6b8e23', '#4ea397', '#3cb371', '#b8860b']
|
||||
const arr = listData.value.map((item: any, i: number) => {
|
||||
return {
|
||||
name: item.groupname,
|
||||
type: 'line',
|
||||
data: item.dayline.map((v: any) => v.sl),
|
||||
itemStyle: {
|
||||
color: colors[i],
|
||||
},
|
||||
lineStyle: {
|
||||
color: colors[i],
|
||||
width: 2,
|
||||
}
|
||||
}
|
||||
})
|
||||
const option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: 'axis', // 或 'item'，根据图表类型选择
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll', // 开启滚动
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
color: '#fff', // 文字颜色（保持与你的主题一致）
|
||||
fontSize: 12
|
||||
},
|
||||
right: '10%',
|
||||
data: ['武汉汉阳医院', '武汉第五医院']
|
||||
// 滚动箭头样式（兼容写法）
|
||||
pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
|
||||
pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
|
||||
pageIconSize: 12, // 箭头大小
|
||||
pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
|
||||
pageTextStyle: {
|
||||
color: '#0efdff' // 分页文字颜色（若显示数字分页）
|
||||
},
|
||||
data: tooltips
|
||||
},
|
||||
grid: {
|
||||
x: 40,
|
||||
@ -411,10 +370,15 @@ const getEcharts3 = () => {
|
||||
type: 'slider',
|
||||
show: true, //flase直接隐藏图形
|
||||
xAxisIndex: [0],
|
||||
textStyle: {
|
||||
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
|
||||
fontSize: 12, // 文字大小
|
||||
fontWeight: 'normal' // 文字粗细
|
||||
},
|
||||
left: '9%', //滚动条靠左侧的百分比
|
||||
bottom: 0,
|
||||
start: 0,//滚动条的起始位置
|
||||
end: 60 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
|
||||
}],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
@ -436,26 +400,7 @@ const getEcharts3 = () => {
|
||||
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '武汉汉阳医院',
|
||||
type: 'line',
|
||||
data: [457, 122, 213, 544, 260, 830, 710, 256, 300, 270, 210, 567, 234, 160, 150, 456, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300,]
|
||||
,
|
||||
itemStyle: {
|
||||
color: "#0efdff",//折线点的颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#0efdff",//折线的颜色
|
||||
width: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '武汉第五医院',
|
||||
type: 'line',
|
||||
data: [100, 589, 131, 234, 290, 330, 110, 543, 130, 467, 150, 160, 170, 180, 653, 763, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420,]
|
||||
},
|
||||
]
|
||||
series: arr
|
||||
};
|
||||
|
||||
|
||||
@ -465,8 +410,8 @@ const getEcharts3 = () => {
|
||||
}
|
||||
|
||||
const sjRef = ref()
|
||||
const getEcharts4 = () => {
|
||||
|
||||
const getEcharts4 = (data: any) => {
|
||||
const names = data.map((item: any) => item.name)
|
||||
const Intance = echarts.init(sjRef.value);
|
||||
const option = {
|
||||
title: {
|
||||
@ -480,7 +425,7 @@ const getEcharts4 = () => {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
formatter: '{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
@ -491,12 +436,19 @@ const getEcharts4 = () => {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 'right',
|
||||
data: ['全血', '血液', '血浆', '尿液', '其他',],
|
||||
data: names,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
}
|
||||
|
||||
},
|
||||
// 滚动箭头样式（兼容写法）
|
||||
pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
|
||||
pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
|
||||
pageIconSize: 12, // 箭头大小
|
||||
pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
|
||||
pageTextStyle: {
|
||||
color: '#0efdff' // 分页文字颜色（若显示数字分页）
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
x: '-10%',
|
||||
@ -511,13 +463,7 @@ const getEcharts4 = () => {
|
||||
radius: '65%',
|
||||
center: ['45%', '50%'],
|
||||
selectedMode: 'single',
|
||||
data: [
|
||||
{ value: 156, name: '尿液' },
|
||||
{ value: 256, name: '血浆' },
|
||||
{ value: 335, name: '血液' },
|
||||
{ value: 235, name: '全血' },
|
||||
{ value: 877, name: '其他' }
|
||||
],
|
||||
data: data,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
@ -533,11 +479,40 @@ const getEcharts4 = () => {
|
||||
Intance.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
const getDataInfo = () => {
|
||||
getallcount().then((res: any) => {
|
||||
source.value.forEach(item => {
|
||||
item.num = res.data.regStatAll[item.pre]
|
||||
})
|
||||
|
||||
listData.value = res.data.regStatHospMonth
|
||||
// nextTick(() => {
|
||||
// // 数据更新后强制重绘
|
||||
// (document.querySelector('.Vue3SeamlessScroll') as any)?._init();
|
||||
// })
|
||||
const data2 = res.data.regStatStatus.map((item: any) => {
|
||||
return {
|
||||
name: item.dict_name,
|
||||
value: item.sl,
|
||||
}
|
||||
})
|
||||
const data4 = res.data.regStatSample.map((item: any) => {
|
||||
return {
|
||||
name: item.SampleTypeName,
|
||||
value: item.sl,
|
||||
}
|
||||
})
|
||||
getEcharts1(res.data.regStatMonth)
|
||||
getEcharts2(data2)
|
||||
getEcharts3()
|
||||
getEcharts4(data4)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getEcharts1()
|
||||
getEcharts2()
|
||||
getEcharts3()
|
||||
getEcharts4()
|
||||
getDataInfo()
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user