Compare commits

..

No commits in common. "2d2cbb28ba7d522578ebf17c84577cb93d23cc88" and "35d00b9bfa8e88671c6a299e6fc1c9e5627fab16" have entirely different histories.

5 changed files with 251 additions and 336 deletions

View File

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

View File

@ -15,17 +15,18 @@
</el-select>
</el-form-item> -->
<el-form-item label="条码状态:" prop="zt">
<el-select v-model="queryParams.zt" placeholder="请选择" style="width: 8rem;">
<el-select v-model="queryParams.zt" placeholder="请选择" style="width: 6.25rem;">
<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="queryType">
<el-select v-model="queryParams.queryType" placeholder="请选择" style="width:10rem">
<el-form-item label="" prop="failed4">
<el-select v-model="queryParams.failed4" placeholder="请选择" style="width:8.75rem">
<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="queryValue">
<el-input v-model="queryParams.queryValue" clearable placeholder="条件搜索" />
<el-form-item label="" prop="failed5">
<el-input v-model="queryParams.failed5" clearable placeholder="条件搜索" @keyup.enter="handleQuery"
@clear="handleQuery" />
</el-form-item>
<el-form-item label="">
@ -96,8 +97,8 @@
</el-col>
<el-col :span="8" class="right-table">
<div class="mb8" style="height:2rem"> </div>
<!-- <el-button type="primary" plain class="mb8" :size="aotuSize">拆分选中项目</el-button> -->
<!-- <div class="title"> 项目 </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' ? '计价' : '无' }}
@ -159,7 +160,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, useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { usePrintStore } from '@/store/modules/printStore'
import { fetchCodeList, addObj, fetchCodeDetail, fetchCodeExec, fetchCodeReqmain } from '@/api/checkCode/index'
const aotuSize = classCom.useAutoSize();
@ -168,9 +169,7 @@ 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);
@ -183,10 +182,8 @@ interface QueryParams {
times: string[]; // 明确类型为字符串元组
yljg: string;
zt: string;
queryType: string;
queryValue: string;
ksdh: string;
userid: string;
failed4: string;
failed5: string;
}
// 提交表单数据
const queryParams = reactive<QueryParams>({
@ -194,28 +191,9 @@ const queryParams = reactive<QueryParams>({
// times: [],
yljg: '1',
zt: '',
queryType: '',
queryValue: '',
ksdh: '',
userid: ''
failed4: '',
failed5: '',
});
// 获取当前日期(当天)
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()
// 定义校验规则
@ -231,15 +209,15 @@ const queryRules = ref({
})
const options = [
{
value: 'brxm',
value: '1',
label: '通过姓名搜索',
},
{
value: 'brdh',
value: '2',
label: '通过病人号搜索',
},
{
value: 'ch',
value: '3',
label: '通过床号搜索',
},
]
@ -258,13 +236,13 @@ const handleQuery = async () => {
// 重置
const resetQuery = () => {
queryRef.value?.resetFields();
queryParams.zt = ''
queryParams.queryType = ''
queryParams.queryValue = ''
getList()
}
const loading = ref(false);
const loading = ref(true);
// 数据源
const tableData = ref([])
@ -351,7 +329,6 @@ const lastTimeIndex = computed(() => {
}
});
const Info: any = ref({})
// 点击行
const rowHandle = (row: any) => {
timelineItems.value =
@ -364,7 +341,6 @@ const rowHandle = (row: any) => {
{ title: '标本签收', time: row.jssj },
{ title: '结果审核', time: row.confirmtime },
]
Info.value = row
getRightTable(row)
};
@ -451,9 +427,9 @@ const openBlock = (value: string) => {
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: queryParams.userid,
userid: 'lis',
status: value == '采样登记' ? 12 : 13,
yljg: queryParams.yljg
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
ElMessage.success('调用成功');
@ -483,9 +459,9 @@ const sqdQuery = () => {
if (res.code == 0 && res.data.sqh) {
fetchCodeExec({
sqh: res.data.sqh,
userid: queryParams.userid,
userid: 'lis',
status: 12,
yljg: queryParams.yljg
yljg: 1
})
cyTableData.value = cyTableData.value.concat(res.data)
}
@ -524,9 +500,7 @@ const getRightTable = (row: any) => {
const goReport = () => {
// 跳转到报告查询页面
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=')
router.push('/report?startdate=2025-08-19&endate=2025-08-19&deptcode=0210&userid=00910&brdh=')
};
const cancelHandle = () => {
@ -539,9 +513,9 @@ const cancelHandle = () => {
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: queryParams.userid,
userid: 'lis',
status: 9,
yljg: queryParams.yljg
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
ElMessage.success('调用成功');
@ -557,17 +531,21 @@ 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();
// 加载病人来源字典
@ -604,18 +582,13 @@ 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: queryParams.ksdh,
userid: queryParams.userid,
dept: '0235',
userid: 'lis',
st: '',
et: '',
yljg: queryParams.yljg
@ -623,59 +596,25 @@ 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: queryParams.ksdh,
userid: queryParams.userid,
dept: '0235',
userid: 'lis',
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;
@ -709,9 +648,9 @@ const printPdf = () => {
const requests = sqhs.value.map((item: any) => { return item.sqh });
fetchCodeExec({
sqh: requests.join(','),
userid: queryParams.userid,
userid: 'lis',
status: 11,
yljg: queryParams.yljg
yljg: 1
}).then((res: any) => {
if (res.code == 0) {
done();

View File

@ -7,8 +7,7 @@
<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"
@change="handletime" />
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
</el-form-item>
</el-col>
<el-col :span="5">
@ -207,8 +206,7 @@ interface QueryParams {
ch: string,
dybz: string,
sqh: string,
userid: string,
yljg: string,
userid: string
}
// 提交表单数据
@ -224,8 +222,7 @@ const queryParams = reactive<QueryParams>({
brdh: '',
ch: '',
dybz: '',
userid: '',
yljg: ''
userid: ''
});
// 获取当前日期(当天)
const today = dayjs();
@ -237,10 +234,9 @@ 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) ? (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) : '';
queryParams.ksdh = (route.query.deptcode as string) || '';
queryParams.userid = (route.query.userid as string) || '';
queryParams.brdh = (route.query.brdh as string) || '';
const single = ref(true);
@ -253,17 +249,16 @@ 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(
@ -386,7 +381,11 @@ 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('未找到打印文件')
@ -491,14 +490,14 @@ const brlxFields = ref([
const rightTableData = ref([])
// 配置项
const rightColumns = ref([
{ 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' },
{ 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' },
])
const rightCellStyleHd = ({ row, column, rowIndex, columnIndex }: {
@ -615,48 +614,41 @@ interface copyItem {
refs: string | number;
dw: string;
jgbz: string;
od: string;
}
// 复制函数
const copyData = (type: string) => {
let str = '';
// 处理空值的工具函数:null/undefined/空字符串都返回空白
const getFieldValue = (value: any) => {
if (value === null || value === undefined || value === '') {
return '';
}
// 转换为字符串,避免数字等类型直接拼接
return String(value);
};
// 根据设备类型定义不同的字段拼接逻辑
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`;
// 遍历数据拼接内容
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' ||
(type === 'N' && v.jgbz !== 'M' && v.jgbz !== '') ||
(type === 'Y' && v.jgbz === 'M')) {
str += getCommonRow(v);
if (type == 'All') {
str = str + getCommonRow(v)
// str = str + v.xmmc + v.csjg + v.dw + + ',';
}
});
if (type == 'N' && v.jgbz != 'M' && v.jgbz != '') {
str = str + getCommonRow(v)
}
if (type == 'Y' && v.jgbz == 'M' && v.jgbz != '') {
str = str + getCommonRow(v)
}
})
// 执行复制操作
const input = document.createElement('textarea');
if (!str) {
ElMessage.error('没有数据可复制');
return;
}
var input = document.createElement('textarea');
if (!str) return ElMessage.error('没有数据可复制');
// 把文字放进input中,供复制
input.value = str;
document.body.appendChild(input);
// 选中创建的input
input.select();
const copyResult = document.execCommand('copy');
copyResult ? ElMessage.success('复制成功') : ElMessage.error('复制失败');
var copy_result = document.execCommand('copy');
if (copy_result) {
ElMessage.success('复制成功');
} else {
ElMessage.error('复制失败');
}
// 移除
document.body.removeChild(input);
};
}
// 数据重组
const formatGroupedData = (data: any[]) => {
if (!data || data.length === 0) return [];
@ -851,21 +843,10 @@ 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,
@ -878,25 +859,14 @@ const getList = () => {
userid: queryParams.userid,
st: '',
et: '',
yljg: queryParams.yljg,
yljg: 1,
}
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 {
data.st = ''
data.et = ''
return ElMessage.error('日期时间段不能为空');
}
loading.value = true
reportList(data).then((res: any) => {

View File

@ -205,10 +205,6 @@
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;
@ -259,31 +255,24 @@
}
.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: 125rem;
border-radius: 6.25rem;
-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;
@ -370,7 +359,7 @@
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
width: 18%;
width: 17%;
font-family: dig;
padding-left: 0.3125rem;
}

View File

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