This commit is contained in:
jiangs 2025-11-18 18:12:27 +08:00
commit 1e75be2bbe
5 changed files with 337 additions and 252 deletions

View File

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

View File

@ -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();

View File

@ -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) => {

View File

@ -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;
}

View File

@ -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>