jiangs/lis8.0-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调统计大屏接口，报告查询入参

Browse Source
This commit is contained in:
wyuu 2025-11-17 18:04:00 +08:00
parent 58b11a20eb
commit 27302128eb
5 changed files with 337 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/regional/index.ts
View File

@ -49,3 +49,11 @@ export function sampleitemCount(query?: Object) {
params: query params: query
}) })
} }
// 标本报表费用
export function getallcount(query?: Object) {
return request({
url: '/transitstat/getallcount',
method: 'get',
params: query
})
}

143
src/views/checkCode/index.vue
View File

@ -15,18 +15,17 @@
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<el-form-item label="条码状态：" prop="zt"> <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-option v-for="item in dictData.ST" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="" prop="failed4"> <el-form-item label="" prop="queryType">
<el-select v-model="queryParams.failed4" placeholder="请选择" style="width:8.75rem"> <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-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="" prop="failed5"> <el-form-item label="" prop="queryValue">
<el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery" <el-input v-model="queryParams.queryValue" clearable placeholder="条件搜索" />
@clear="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="">
@ -97,8 +96,8 @@
</el-col> </el-col>
<el-col :span="8" class="right-table"> <el-col :span="8" class="right-table">
<!-- <div class="title"> 项目 </div> --> <div class="mb8" style="height:2rem"> </div>
<el-button type="primary" plain class="mb8" :size="aotuSize">拆分选中项目</el-button> <!-- <el-button type="primary" plain class="mb8" :size="aotuSize">拆分选中项目</el-button> -->
<CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig"> <CustomTable :data="rightTableData" :columns="rightColumns" :config="rightTableConfig">
<template #jjzt="{ row }"> <template #jjzt="{ row }">
{{ row.jjzt == '1' ? '计价' : '无' }} {{ row.jjzt == '1' ? '计价' : '无' }}
@ -160,7 +159,7 @@ import { ref, reactive, toRaw, computed, watch, nextTick, onMounted, } from 'vue
import { HiprintPrinter } from '@/utils/hiprintPrinter'; import { HiprintPrinter } from '@/utils/hiprintPrinter';
import { classCom } from '@/utils/classCom'; import { classCom } from '@/utils/classCom';
import CustomTable from '@/components/elTable/index.vue' 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 { usePrintStore } from '@/store/modules/printStore'
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index' import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
const aotuSize = classCom.useAutoSize(); const aotuSize = classCom.useAutoSize();
@ -169,7 +168,9 @@ import useUserStore from '@/store/modules/user'
//@ts-ignore //@ts-ignore
import { comDict } from '@/utils/dict' import { comDict } from '@/utils/dict'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs';
const router = useRouter() const router = useRouter()
const route = useRoute()
const userStore = useUserStore() const userStore = useUserStore()
const printStore = usePrintStore(); const printStore = usePrintStore();
const compactForm = ref<HTMLElement | null>(null); const compactForm = ref<HTMLElement | null>(null);
@ -182,8 +183,10 @@ interface QueryParams {
times: string[]; // 明确类型为字符串元组 times: string[]; // 明确类型为字符串元组
yljg: string; yljg: string;
zt: string; zt: string;
failed4: string; queryType: string;
failed5: string; queryValue: string;
ksdh: string;
userid: string;
} }
// 提交表单数据 // 提交表单数据
const queryParams = reactive<QueryParams>({ const queryParams = reactive<QueryParams>({
@ -191,9 +194,28 @@ const queryParams = reactive<QueryParams>({
// times: [], // times: [],
yljg: '1', yljg: '1',
zt: '', zt: '',
failed4: '', queryType: '',
failed5: '', 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 showSearch = ref(true);
const queryRef = ref() const queryRef = ref()
// 定义校验规则 // 定义校验规则
@ -209,15 +231,15 @@ const queryRules = ref({
}) })
const options = [ const options = [
{ {
value: '1', value: 'brxm',
label: '通过姓名搜索', label: '通过姓名搜索',
}, },
{ {
value: '2', value: 'brdh',
label: '通过病人号搜索', label: '通过病人号搜索',
}, },
{ {
value: '3', value: 'ch',
label: '通过床号搜索', label: '通过床号搜索',
}, },
] ]
@ -236,13 +258,13 @@ const handleQuery = async () => {
// 重置 // 重置
const resetQuery = () => { const resetQuery = () => {
queryRef.value?.resetFields(); queryRef.value?.resetFields();
queryParams.zt = ''
queryParams.queryType = ''
queryParams.queryValue = ''
getList() getList()
} }
const loading = ref(true); const loading = ref(false);
// 数据源 // 数据源
const tableData = ref([]) const tableData = ref([])
@ -329,6 +351,7 @@ const lastTimeIndex = computed(() => {
} }
}); });
const Info: any = ref({})
// 点击行 // 点击行
const rowHandle = (row: any) => { const rowHandle = (row: any) => {
timelineItems.value = timelineItems.value =
@ -341,6 +364,7 @@ const rowHandle = (row: any) => {
{ title: '标本签收', time: row.jssj }, { title: '标本签收', time: row.jssj },
{ title: '结果审核', time: row.confirmtime }, { title: '结果审核', time: row.confirmtime },
] ]
Info.value = row
getRightTable(row) getRightTable(row)
}; };
@ -427,9 +451,9 @@ const openBlock = (value: string) => {
const requests = sqhs.value.map((item: any) => { return item.sqh }); const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({ fetchCodeExec({
sqh: requests.join(','), sqh: requests.join(','),
userid: 'lis', userid: queryParams.userid,
status: value == '采样登记' ? 12 : 13, status: value == '采样登记' ? 12 : 13,
yljg: 1 yljg: queryParams.yljg
}).then((res: any) => { }).then((res: any) => {
if (res.code == 0) { if (res.code == 0) {
ElMessage.success('调用成功'); ElMessage.success('调用成功');
@ -459,9 +483,9 @@ const sqdQuery = () => {
if (res.code == 0 && res.data.sqh) { if (res.code == 0 && res.data.sqh) {
fetchCodeExec({ fetchCodeExec({
sqh: res.data.sqh, sqh: res.data.sqh,
userid: 'lis', userid: queryParams.userid,
status: 12, status: 12,
yljg: 1 yljg: queryParams.yljg
}) })
cyTableData.value = cyTableData.value.concat(res.data) cyTableData.value = cyTableData.value.concat(res.data)
} }
@ -500,7 +524,9 @@ const getRightTable = (row: any) => {
const goReport = () => { 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 = () => { const cancelHandle = () => {
@ -513,9 +539,9 @@ const cancelHandle = () => {
const requests = sqhs.value.map((item: any) => { return item.sqh }); const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({ fetchCodeExec({
sqh: requests.join(','), sqh: requests.join(','),
userid: 'lis', userid: queryParams.userid,
status: 9, status: 9,
yljg: 1 yljg: queryParams.yljg
}).then((res: any) => { }).then((res: any) => {
if (res.code == 0) { if (res.code == 0) {
ElMessage.success('调用成功'); ElMessage.success('调用成功');
@ -531,21 +557,17 @@ const cancelHandle = () => {
}, },
}).catch(() => { }); }).catch(() => { });
} }
onMounted(async () => { onMounted(async () => {
// 进入页面单点登录 // 进入页面单点登录
const result = await userStore.loginAnonymous({ name: 'admin' }) const result = await userStore.loginAnonymous({ name: 'admin' })
if (result) { if (result) {
getList() 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(); adjustTableHeight();
// 加载病人来源字典 // 加载病人来源字典
@ -582,13 +604,18 @@ function adjustTableHeight() {
const handletime = (val: Array<string>) => { const handletime = (val: Array<string>) => {
// console.log('时间', val); // 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 printHandle = () => {
const data = { const data = {
dept: '0235', dept: queryParams.ksdh,
userid: 'lis', userid: queryParams.userid,
st: '', st: '',
et: '', et: '',
yljg: queryParams.yljg yljg: queryParams.yljg
@ -596,25 +623,59 @@ const printHandle = () => {
if (queryParams.times && queryParams.times.length) { if (queryParams.times && queryParams.times.length) {
data.st = queryParams.times[0] data.st = queryParams.times[0]
data.et = queryParams.times[1] data.et = queryParams.times[1]
} else {
data.st = ''
data.et = ''
} }
addObj(data).then((res: any) => { addObj(data).then((res: any) => {
if (res.code == 0) { if (res.code == 0) {
getList() 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 = () => { const getList = () => {
loading.value = true;
const data = { const data = {
dept: '0235', dept: queryParams.ksdh,
userid: 'lis', userid: queryParams.userid,
st: queryParams.times[0], st: queryParams.times[0],
et: queryParams.times[1], et: queryParams.times[1],
yljg: queryParams.yljg 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) => { fetchCodeList(data).then((response: any) => {
if (response.code == 0) { if (response.code == 0) {
loading.value = false; loading.value = false;
@ -648,9 +709,9 @@ const printPdf = () => {
const requests = sqhs.value.map((item: any) => { return item.sqh }); const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({ fetchCodeExec({
sqh: requests.join(','), sqh: requests.join(','),
userid: 'lis', userid: queryParams.userid,
status: 11, status: 11,
yljg: 1 yljg: queryParams.yljg
}).then((res: any) => { }).then((res: any) => {
if (res.code == 0) { if (res.code == 0) {
done(); done();

144
src/views/checkCode/report/index.vue
View File

@ -7,7 +7,8 @@
<el-col :span="5"> <el-col :span="5">
<el-form-item label="日期：" prop="times"> <el-form-item label="日期：" prop="times">
<el-date-picker v-model="queryParams.times" type="daterange" range-separator="-" <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-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
@ -206,7 +207,8 @@ interface QueryParams {
ch: string, ch: string,
dybz: string, dybz: string,
sqh: string, sqh: string,
userid: string userid: string,
yljg: string,
} }
// 提交表单数据 // 提交表单数据
@ -222,7 +224,8 @@ const queryParams = reactive<QueryParams>({
brdh: '', brdh: '',
ch: '', ch: '',
dybz: '', dybz: '',
userid: '' userid: '',
yljg: ''
}); });
// 获取当前日期（当天） // 获取当前日期（当天）
const today = dayjs(); 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'); const endDate = route.query.endate ? String(route.query.endate) : today.format('YYYY-MM-DD');
queryParams.times = [startDate, endDate]; queryParams.times = [startDate, endDate];
queryParams.ksdh = (route.query.deptcode as string) || ''; queryParams.ksdh = (route.query.deptcode as string) ? (route.query.deptcode as string) : '';
queryParams.userid = (route.query.userid as string) || ''; queryParams.userid = (route.query.userid as string) ? (route.query.userid as string) : '';
queryParams.brdh = (route.query.brdh 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); const single = ref(true);
@ -249,16 +253,17 @@ const queryRef = ref()
const Info = ref<any>({}) const Info = ref<any>({})
// 定义校验规则 // 定义校验规则
const queryRules = ref({ 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( const timelineItems = ref(
@ -381,11 +386,7 @@ const handleColumnDragEnd = (newColumns: any) => {
const printPdf = () => { const printPdf = () => {
const printStore = usePrintStore(); const printStore = usePrintStore();
const merge = rows.value.map((item: any) => { return `${item.jyrqname.replace(/-/g, '')}_${item.yq.trim()}_${item.ybh}` }) 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) => { reportPrintPdf(merge).then((res: any) => {
if (res.code == 0) { if (res.code == 0) {
if (!res.data) return ElMessage.warning('未找到打印文件') if (!res.data) return ElMessage.warning('未找到打印文件')
@ -490,14 +491,14 @@ const brlxFields = ref([
const rightTableData = ref([]) const rightTableData = ref([])
// 配置项 // 配置项
const rightColumns = ref([ const rightColumns = ref([
{ prop: 'xmdh', label: '项目代号', align: 'center', visible: true, }, { prop: 'xmdh', label: '项目代号', align: 'center', visible: true, }, //0
{ prop: 'xmmc', label: '项目名称', align: 'center', visible: true, }, { prop: 'xmmc', label: '项目名称', align: 'center', visible: true, }, //1
{ prop: 'xmmc', label: '培养结果', align: 'center', visible: true, width: 150 }, { prop: 'xmmc', label: '培养结果', align: 'center', visible: true, width: 150 },//2
{ prop: 'csjg', label: '检验结果', align: 'center', visible: true, }, { prop: 'csjg', label: '检验结果', align: 'center', visible: true, },//3
{ prop: 'refs', label: '参考值', align: 'center', visible: true, }, { prop: 'refs', label: '参考值', align: 'center', visible: true, },//4
{ prop: 'dw', label: '单位', align: 'center', visible: true, }, { prop: 'dw', label: '单位', align: 'center', visible: true, },//5
{ prop: 'od', label: '菌落计数', align: 'center', visible: true, }, { prop: 'od', label: '菌落计数', align: 'center', visible: true, },//6
{ prop: 'jgbz', label: '结果标志', align: 'center', visible: true, slot: 'jgbz' }, // { prop: 'jgbz', label: '结果标志', align: 'center', visible: true, slot: 'jgbz' },
]) ])
const rightCellStyleHd = ({ row, column, rowIndex, columnIndex }: { const rightCellStyleHd = ({ row, column, rowIndex, columnIndex }: {
@ -614,41 +615,48 @@ interface copyItem {
refs: string | number; refs: string | number;
dw: string; dw: string;
jgbz: string; jgbz: string;
od: string;
} }
// 复制函数 // 复制函数
const copyData = (type: string) => { const copyData = (type: string) => {
let str = '' 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`; // 处理空值的工具函数：null/undefined/空字符串都返回空白
rightTableData.value.forEach((v: any) => { const getFieldValue = (value: any) => {
if (type == 'All') { if (value === null || value === undefined || value === '') {
str = str + getCommonRow(v) return '';
// str = str + v.xmmc + v.csjg + v.dw + + ',';
} }
if (type == 'N' && v.jgbz != 'M' && v.jgbz != '') { // 转换为字符串，避免数字等类型直接拼接
str = str + getCommonRow(v) return String(value);
} };
if (type == 'Y' && v.jgbz == 'M' && v.jgbz != '') {
str = str + getCommonRow(v)
}
})
var input = document.createElement('textarea'); // 根据设备类型定义不同的字段拼接逻辑
if (!str) return ElMessage.error('没有数据可复制'); const getCommonRow = Info.value.yqdl === '细菌仪'
// 把文字放进input中，供复制 ? (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; input.value = str;
document.body.appendChild(input); document.body.appendChild(input);
// 选中创建的input
input.select(); input.select();
var copy_result = document.execCommand('copy'); const copyResult = document.execCommand('copy');
if (copy_result) { copyResult ? ElMessage.success('复制成功') : ElMessage.error('复制失败');
ElMessage.success('复制成功');
} else {
ElMessage.error('复制失败');
}
// 移除
document.body.removeChild(input); document.body.removeChild(input);
} };
// 数据重组 // 数据重组
const formatGroupedData = (data: any[]) => { const formatGroupedData = (data: any[]) => {
if (!data || data.length === 0) return []; 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 = () => { const getList = () => {
if (!queryParams.ksdh) return ElMessage.error('科室代号不能为空');
if (!queryParams.userid) return ElMessage.error('用户userid不能为空');
const data = { const data = {
alarmflag: alarmflag.value, alarmflag: alarmflag.value,
jzbz: jzbz.value, jzbz: jzbz.value,
@ -859,14 +878,25 @@ const getList = () => {
userid: queryParams.userid, userid: queryParams.userid,
st: '', st: '',
et: '', 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) { if (queryParams.times && queryParams.times.length) {
data.st = queryParams.times[0] data.st = queryParams.times[0]
data.et = queryParams.times[1] data.et = queryParams.times[1]
} else { } else {
return ElMessage.error('日期时间段不能为空'); data.st = ''
data.et = ''
} }
loading.value = true loading.value = true
reportList(data).then((res: any) => { reportList(data).then((res: any) => {

17
src/views/regional/statistics/overview/css/index.css
View File

@ -205,6 +205,10 @@
overflow: hidden; 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 { .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
display: flex; display: flex;
@ -255,7 +259,6 @@
} }
.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_left zi {
} }
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line { .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
@ -263,16 +266,24 @@
height: 1.25rem; height: 1.25rem;
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
border-radius: 125rem; border-radius: 125rem;
overflow: hidden;
position: relative;
} }
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn { .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
width: 100%; width: 100%;
height: 1.25rem; height: 1.25rem;
background: #05d1fc; background: #05d1fc;
border-radius: 6.25rem; border-radius: 125rem;
-webkit-animation: widthMove1 2s ease-in-out; -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 { .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
background: #e7feb8; background: #e7feb8;
-webkit-animation: widthMove2 2s ease-in-out; -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 { .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
width: 17%; width: 18%;
font-family: dig; font-family: dig;
padding-left: 0.3125rem; padding-left: 0.3125rem;
} }

263
src/views/regional/statistics/overview/index.vue
View File

@ -5,50 +5,10 @@
<div class="leftMain_top"> <div class="leftMain_top">
<div class="leftMain_topIn"> <div class="leftMain_topIn">
<ul> <ul>
<li> <li v-for="item in source">
<div class="liIn"> <div class="liIn">
<h3>区域机构</h3> <h3>{{ item.name }}</h3>
<p class="shu"><span class="shu1">69</span><i>家</i></p> <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>
<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>
<span class="border_bg_leftTop"></span> <span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span> <span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span> <span class="border_bg_leftBottom"></span>
@ -83,19 +43,22 @@
<h3>委托机构当月送检标本占比</h3> <h3>委托机构当月送检标本占比</h3>
<div class="biaoge biaoge_pai"> <div class="biaoge biaoge_pai">
<div class="biaoge_paiIn"> <div class="biaoge_paiIn">
<Vue3SeamlessScroll :list="list" :config="scrollConfig">
<ul> <ul>
<li v-for="(item, i) in list"> <!-- <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">
<div class="liIn_left"><span class="zi">{{ item.name }}</span></div> <div class="liIn_left"><span class="zi">{{ item.groupname }}</span></div>
<div class="liIn_line"> <div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.pre}%` }"></div> <div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
<div class="per">{{ item.percentage }}</div>
</div> </div>
<p class="num">{{ item.pre }}%</p> </div>
<p class="num">{{ item.groupsum }}</p>
</div> </div>
</li> </li>
<!-- </Vue3SeamlessScroll> -->
</ul> </ul>
</Vue3SeamlessScroll>
</div> </div>
</div> </div>
@ -139,47 +102,24 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll' import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
//@ts-ignore import { getallcount } from '@/api/regional'
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 },
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 = { const listData: any = ref([])
hoverStop: true, // 鼠标点击后停止
direction: 'up', // 滚动方向：up/down/left/right
step: 0.8, // 滚动速度（数值越小越慢）
limitScrollNum: 3, // 列表长度大于等于此值才开始滚动
passive: true,
waitTime: 1000 // 单步滚动完成后停留时间（ms）
}
const chartmain = ref() const chartmain = ref()
const getEcharts1 = () => { const getEcharts1 = (data: any) => {
const Intance = echarts.init(chartmain.value); 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 dataAxis = data.map((item: any) => item.daynum + '日')
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 data = data.map((item: any) => item.sl)
const option = { const option = {
title: { title: {
text: '', text: '',
@ -222,10 +162,15 @@ const getEcharts1 = () => {
type: 'slider', type: 'slider',
show: true, //flase直接隐藏图形 show: true, //flase直接隐藏图形
xAxisIndex: [0], xAxisIndex: [0],
textStyle: {
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
fontSize: 12, // 文字大小
fontWeight: 'normal' // 文字粗细
},
left: '9%', //滚动条靠左侧的百分比 left: '9%', //滚动条靠左侧的百分比
bottom: 0, bottom: 0,
start: 0,//滚动条的起始位置 start: 0,//滚动条的起始位置
end: 60 //滚动条的截止位置（按比例分割你的柱状图x轴长度） end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}], }],
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -281,8 +226,8 @@ const getEcharts1 = () => {
Intance.setOption(option); Intance.setOption(option);
} }
const chartmain_bing = ref() 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 Intance = echarts.init(chartmain_bing.value);
const option = { const option = {
title: { title: {
@ -296,7 +241,7 @@ const getEcharts2 = () => {
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{b} : {c} ({d}%)'
}, },
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
@ -307,7 +252,7 @@ const getEcharts2 = () => {
top: 40, top: 40,
bottom: 20, bottom: 20,
left: 'right', left: 'right',
data: ['已审核', '已采样', '已送检', '已接收', '已报告'], data: names,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
@ -327,16 +272,7 @@ const getEcharts2 = () => {
radius: '65%', radius: '65%',
center: ['45%', '50%'], center: ['45%', '50%'],
selectedMode: 'single', selectedMode: 'single',
data: [ data: data,
{
value: 1548, name: '已报告',
},
{ value: 535, name: '已接收' },
{ value: 510, name: '已送检' },
{ value: 634, name: '已采样' },
{ value: 735, name: '已审核' }
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
@ -353,24 +289,47 @@ const getEcharts2 = () => {
const chartmain_zhe = ref() const chartmain_zhe = ref()
const getEcharts3 = () => { const getEcharts3 = () => {
const Intance = echarts.init(chartmain_zhe.value); 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 = { const option = {
title: { title: {
text: '' text: ''
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis', // 或 'item'，根据图表类型选择
}, },
legend: { legend: {
type: 'scroll', // 开启滚动
textStyle: { textStyle: {
color: '#fff', color: '#fff', // 文字颜色（保持与你的主题一致）
fontSize: 12, fontSize: 12
}, },
right: '10%', // 滚动箭头样式（兼容写法）
data: ['武汉汉阳医院', '武汉第五医院'] pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
pageIconSize: 12, // 箭头大小
pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
pageTextStyle: {
color: '#0efdff' // 分页文字颜色（若显示数字分页）
},
data: tooltips
}, },
grid: { grid: {
x: 40, x: 40,
@ -411,10 +370,15 @@ const getEcharts3 = () => {
type: 'slider', type: 'slider',
show: true, //flase直接隐藏图形 show: true, //flase直接隐藏图形
xAxisIndex: [0], xAxisIndex: [0],
textStyle: {
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
fontSize: 12, // 文字大小
fontWeight: 'normal' // 文字粗细
},
left: '9%', //滚动条靠左侧的百分比 left: '9%', //滚动条靠左侧的百分比
bottom: 0, bottom: 0,
start: 0,//滚动条的起始位置 start: 0,//滚动条的起始位置
end: 60 //滚动条的截止位置（按比例分割你的柱状图x轴长度） end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}], }],
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -436,26 +400,7 @@ const getEcharts3 = () => {
} }
}, },
series: [ series: arr
{
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,]
},
]
}; };
@ -465,8 +410,8 @@ const getEcharts3 = () => {
} }
const sjRef = ref() const sjRef = ref()
const getEcharts4 = () => { const getEcharts4 = (data: any) => {
const names = data.map((item: any) => item.name)
const Intance = echarts.init(sjRef.value); const Intance = echarts.init(sjRef.value);
const option = { const option = {
title: { title: {
@ -480,7 +425,7 @@ const getEcharts4 = () => {
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{b} : {c} ({d}%)'
}, },
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
@ -491,12 +436,19 @@ const getEcharts4 = () => {
top: 40, top: 40,
bottom: 20, bottom: 20,
left: 'right', left: 'right',
data: ['全血', '血液', '血浆', '尿液', '其他',], data: names,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
} },
// 滚动箭头样式（兼容写法）
pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
pageIconSize: 12, // 箭头大小
pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
pageTextStyle: {
color: '#0efdff' // 分页文字颜色（若显示数字分页）
},
}, },
grid: { grid: {
x: '-10%', x: '-10%',
@ -511,13 +463,7 @@ const getEcharts4 = () => {
radius: '65%', radius: '65%',
center: ['45%', '50%'], center: ['45%', '50%'],
selectedMode: 'single', selectedMode: 'single',
data: [ data: data,
{ value: 156, name: '尿液' },
{ value: 256, name: '血浆' },
{ value: 335, name: '血液' },
{ value: 235, name: '全血' },
{ value: 877, name: '其他' }
],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
@ -533,11 +479,40 @@ const getEcharts4 = () => {
Intance.setOption(option); Intance.setOption(option);
} }
onMounted(() => {
getEcharts1() const getDataInfo = () => {
getEcharts2() 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() getEcharts3()
getEcharts4() getEcharts4(data4)
})
}
onMounted(() => {
getDataInfo()
}) })
</script> </script>